Challenge 4: Course Data

[00:00:00]
>> So we're gonna build on top of the same Open Graph example, we've done Facebook, we've done Twitter, now we're going to add some Open Graph data. You're gonna do this by way of adding that special script block with the JSON LD type to it in the body of your HTML.

[00:00:16]
You don't need to be in the head for this, although you could be, it would still work as far as I know. And I want you to just on the course page, the course.HBS page, add the proper metadata for courses for that course. And also add breadcrumbs because it's only one breadcrumb deep.

[00:00:36]
So it's gonna be like, list of courses and then the name of the course, yes.
>> There's a question online about the breadcrumbs.
>> Yes.
>> Does that script tag go in the head or in the body?
>> In the body is fine.
>> In the body is fine.

[00:00:49]
>> Yep, which by the way makes it well suited for single page apps and things like React and Ember and Angular Tube. Because, as you're defining the way the visible stuff looks to your user, side by side within the same component, you could define the JSON using either JSX or handlebars, or whatever you end up using.

[00:01:16]
So there is yet another tool I want to show you, this one is the Google structured data testing tool. And it's also in your list of important tools, so you can do this in two ways. You can either paste a snippet of the special formatted JSON into this area here.

[00:01:38]
Or you can have it hit a URL and validate, like reading the appropriate script tags, what would this, what would Google see here. So you'll do, if we grab, let's see, let me see if I can find my course again. Here we go do, I'll this one, see if I've done my job properly here, hit that URL.

[00:02:07]
All right, this is a good result here, so my breadcrumb list looks like this. Here's, this is the equivalent of the JSON in table form, so you see we've got a type of list item and ID, IDs don't have to be numbers. Using URLs is fine, particularly if they're addressable items, that's as good a unique string to use as any, and if we look at what the course looks like.

[00:02:37]
Here's the name and the description and the provider and etc, this is new, preview, I wonder what that does. Interesting. So this is trying to preview what the course would look like, if I narrow this down a bit, well I guess, let's see, maybe I'm zoomed out, yep.

[00:03:00]
If I narrow this down, so this is, if we think about what the Coursera course looks like, here and bring my Chrome back up front. Here you go, that is a preview of exactly what we're seeing as one of the items in the course list there. So you see here's the name of my organization, here's the description, and here's the name of the course itself.

[00:03:24]
So, Google structured data testing tool, it's available in that same list of tools, our course and our breadcrumbs, push to Heroku, make sure URL works, 20 minutes.