Challenge 4: Solution

[00:00:00]
>> So we're gonna go through the exercise where we add structured data to the app we've built in our Open Graph folder, so that we can start to get search engine, like results showing up in a richer way. So, what I've done in advance is open up the structured data documentation for both breadcrumbs and courses.

[00:00:27]
And you may note that if you look in data types here, there are only a couple types of things that Google provides first class, structured data support for. They used to have a nice little list here which apparently they've gotten rid of. The search gallery, that's where it is.

[00:00:52]
So you see we've got recipes, events, products, reviews and courses. Those are the same ones I believe I showed an example of each in the tiles before. But having looked through that whole schema.org list, they only support five of these things. Hopefully, more coming in the future, but we can make use of these today.

[00:01:12]
So I'm going to just copy the markup for the schema.org example. And I'm gonna place it directly in my body of the course.hbs file. Again, still working in the Open Graph exercise here. Building on everything we have been working on so far. And what we ended up with is this list of elements here.

[00:01:34]
Now we have got four items deep. I only want two, so am gonna get rid of these two here. And let us just go down line by line and explain what all this means. So first we've got this context property, this add context property and its value is the schema.org URL.

[00:01:55]
Don't change this. This is basically telling you, or it's telling anything that parses this that you are attempting to conform to something in the schema.org library of entities. It's almost like a, you can adhere to particular XML namespaces and provide a URL for that. Same idea here. BreadcrumbList is the type of object we're working with here.

[00:02:20]
So it is the top level entity. And then we've got item list element, that is an array, each of which represent a segment of our Breadcrumb going from left to right. So the first thing we're gonna do here is update this to Courses and we can change this ID, which is the URL that breadcrumb conforms to, to the base URL of my herokuapp.

[00:02:48]
So I'll just put that in place here. And the image attribute is I believe, optional. So I'm gonna just go ahead and remove that we might get a warning, but I don't think it will block us entirely. And then here, what I'm gonna wanna do is use the base URL of our app.

[00:03:08]
Actually, I'm just gonna build on the work that we've already done for the canonical URLs that we have already built using this slug. So we're gonna use the exact same thing for the schema.org stuff. So going down here to this id of the second item in our Breadcrumb, just like apparently I didn't grab it.

[00:03:35]
Copy, I think it's trying to direct me to the URL when I click. Yeah, we'll just do it again. All right, also keep in mind that we still wanna be putting everything inside quotes here. So when handlebars is processing these files, it's gonna go find and replace things that are inside those pairs of braces.

[00:04:01]
And if there are no quotes around it, there will be no quotes around the value that is put in its place. So in particular here, what we wanna do the course title, we're gonna wanna make sure that it's all contained within a string. And this should do it.

[00:04:21]
I'm actually gonna push this up. I'm just gonna copy the snippet here, and we're gonna use the Open Graph tester in like snippet form. And I'll just build on top of the thing that I pasted from, which should be somewhere around here. There we go. Paste it in here, or we can keep the script tag that was there for us.

[00:04:45]
And let's see what the parser interprets this as. So I got no errors, no warnings, this looks good, right? So we can consider this piece done. Now let's go ahead and move on to the course data. So I can collapse this, get it out of the way. And of course data should be I'll just go back to my slides here.

[00:05:18]
There it is. So we're just gonna grab their example. Paste it into our code, make similar modifications. All right, so we leave schema.org in place. We leave type as course in place. Here's the name of the course, so we're gonna put the title here. And the description. And then we have a provider here and I'm just gonna put Frontend Masters.

[00:06:03]
And we'll link that to frontendmasters.com. So grab that URL. Paste it there. Let's see how this looks. So basically what I'm doing is I'm letting our app get rendered locally. And I can view source and grab that little chunk here. We're gonna go back to our tester, see what this looks like.

[00:06:35]
Paste, show me. Looks good. Let's preview it. Looks great. So you see here frontend masters showed up underneath that's the organization, right? And there's a description and there's the title. So this, this looks fine to me. Let's commit it. And Push it to a Roku. And GitHub. Oops I tried to do too much here, in one command.

[00:07:23]
All right, so while that's deploying anyone have any questions about structured data before we move on? So this should be like, this should be a compulsory thing, especially if Google supports something that is related to your entity. If you have recipes, like get that marinated in there. Because it'll just make your search result much more rich, and that makes people much more likely to engage with them.

[00:07:53]
So I just wanna prove that this works in our deployed app. So if we go back here. Go to Modern SEO, click it, test the URL. Let's see what this looks like. There's our course preview. And there it is.