Check out a free preview of the full Modern Search Engine Optimization (SEO) course

The "Structured Data Introduction" Lesson is part of the full, Modern Search Engine Optimization (SEO) course featured in this preview video. Here's what you'd learn in this lesson:

Mike shows how structured data for events, products, reviews, recipes, and more that placed in the HTML body element can be used by various services like Gmail and Google search results to provide a richer, interactive experience.

Preview
Close

Transcript from the "Structured Data Introduction" Lesson

[00:00:00]
>> The next topic we're going to jump into is structured data. So structured data is, I know it's a generic term here, but in this context, stuff that you add to your HTML body usually so that you can get a machine readable equivalent of some complex items that you have there.

[00:00:25]
So this is information that crawlers are already seeking out, like the name of an organization or who owns a company. What Twitter accounts are associated with the company? Where's their Facebook account? What's their phone number? So we're already trying to like, there's a need to build this information.

[00:00:43]
And this is a way to make sure that everything ends up being correct. There are a couple different ways of defining this metadata. And so, some of them involve setting special HTML attributes on the HTML that represents this item itself and your UI. Some of them involve little microformats, where you have to really get familiar with some new schema.

[00:01:09]
It seems like the way forward is to use this syntax called JSON-LD. So it is a specific schema of JSON it will look like JSON, and it ends up going in a script tag like this. So in terms of what this gets us, quite a few things and it's really up to the developer of the app consuming this HTML to decide what to do with it.

[00:01:38]
So an example is you can specify details about a calendar event in an HTML email to Google. And this is where this RSVP opportunity happens, right in your email. So this is not something that Google Calendar has like a monopoly on. You can add metadata right in the HTML email and you'll get stuff like this.

[00:02:01]
If you've been using GitHub a lot, you might see that when you get a notification about a pull request, there's a little view pull request item. So this all comes from additional metadata and schema.org stuff, which is this flavor of metadata I'm talking about. This is the way to go.

[00:02:18]
And the main advantage you get here, so we've gone past like trying to crawl up the search results and make sure that links are shared in its rich away as possible. This this issue here has to do with kind of getting things as correct as they possibly could be, so that things are spelled the way they're supposed to be spelled.

[00:02:38]
If front end masters, maybe some people don't know whether it's one word or two words or the E and and is capitalized, but it's all smushed together. And then, you can have a consistent brand image by being the one that specifies these values in this structured data. So that's why I say you have more control over the way you look in these applications.

[00:03:00]
So it does similar to the social metadata we've been working with, it does end up enriching the way your search result comes up, primarily on mobile devices. So I took some screenshots of the a search result that involves events data. And you can see, you've got the name of the event, the date, and the venue.

[00:03:24]
And you can tap in each of those, those are each sort of addressable items, each with their own URL, so that would be the way that you build this out. On the products example here, you can see we have a rating and a price, and an indication of whether it's in stock or not.

[00:03:40]
And I would, part of me wants to figure out whether how often that's updated, right? That might be a fluctuating value there. Yes, Mark,
>> With the ratings, how does Google verify that those are not just a 100 people rated this five stars and nobody actually did?
>> So you have to point to an authoritative authoritative source for ratings.

[00:04:07]
So you don't just state that your rating is five stars, but you would rather say, I wish to, like this is my official business name. And I'm connecting to this Platform of record for ratings and it could be like Google or Facebook's reviews or the Better Business Bureau.

[00:04:28]
I'm not sure which ones are whitelisted, but there is a whitelist. So that only true like community source ratings are there. And for that matter, you need to be able to tap on that and to see the ratings themselves. So if you really care about Google and search results, I would make sure that you try to make sure your Google ratings are as good as they possibly could be, because that is going to be the easiest one to wire up to.

[00:04:57]
But you can't simply just say like, yeah, five out of five stars, trust me. And down here for reviews, we can see that we've again got ratings. And this one comes from within the app itself. And so, this has probably gone through some sort of approval process where you can tap on that and see 160,000 reads or 160,000 votes.

[00:05:24]
I mean, that's quite a lot. But this is an excerpt of one review you get to see down there. And I think part of this is also that you wanna be able to invite customers to click on their views or tap on their views, and see what what's this all about.

[00:05:45]
And it's sort of a sign that something's off if it's a non-interactive thing. Almost the same way that like an SSL seal that's just an image like, or a Better Business Bureau badge on your site that's like not linking to your actual Better Business Bureau record. When I see that I immediately check to see if I'm on HTTPS or not.

[00:06:06]
I realized that I'm gonna trap and start looking around for other signs. So tomorrow I want to show to you recipes just like Pinterest we get a little bit of that. You see it's far less rich because Google's trying to be more generalized than Pinterest, which is very much oriented towards particular community and recipes are a big part of, where that community has gravitated towards.

[00:06:33]
And then finally, sorry I miss titled this here shouldn't be products it should be courses. Courses is one of the things that Google has provided, like first class support for. And you can see here like these are the Arduino courses that are available on Coursera. And we've got a couple different items here that have to do with this particular query.

[00:06:55]
You see, they haven't done a very good job with their breadcrumbs. That's one thing. But you can see that the producer of each course is listed here, at least the first part of a description and of course, the title is there. And again, these arrows to the right indicate they're each addressable items, meaning they each have a URL, you could visit a page and it is about that course.

[00:07:22]
So these are all things they will typically only show up if you're on a mobile device, right? Because they're trying to make it so that mobile search results are as engaging as possible. And that's why all of these look sort of like mobile things. So one that everyone should be implementing is breadcrumbs.

[00:07:45]
And you notice that Coursera had like a query pram in their little breadcrumb link over here that query equals Arduino, that's not human readable. That's not nice. That's like code surfacing in the UI for the user, which is bad. So here with metadata, we have the ability to control the way we look here.

[00:08:08]
And so you see I've got like three levels here. One is the root of my web application, and then a section for courses and then an individual course. That's a nice human readable breadcrumb there that helps Google understand how my site is structured. And I've given them hints as to like the hierarchy of things that I've built.

[00:08:29]
So this is not an enriched card except for the breadcrumb here. This is not a course card. So you may wonder like, so this is the JSON, this is the first time you're seeing it. Where can I look to see what is required for all of these different entities, and it's not simple.

[00:08:51]
What you're looking at here is just breadcrumbs and it's a lot, like it goes way below this bottom of the slide. It is pretty verbose as JSON of this type tends to be. So there is a source of truth for where you can look to see like exactly how these objects should appear, and it is schema.org.

[00:09:13]
So if we go down this huge list of schemas they provide, provide like a standard shape for. And shape, you can think of that as like the names of the properties and the types expected in the values of those properties. You can see here we've got like, there's course, there's a creative work series.

[00:09:35]
So if you had a series of movies, like Star Wars would be a series of movies that has a bunch of individual movies associated with it. We've got further down a software application. We've got a movie up top there. We've got a publication issue and a publication volume.

[00:09:54]
So lots and lots of different things, events. And you can see there are even subtypes of these events. They have a schema for a festival versus a literary and music event. So it is a really granular and deep. You won't find things that can read all of these different schemas.

[00:10:16]
Even Google has a main contributor to this community effort to define what all of these objects look like. They only support like 10 or 12 of them for now. But they sort of, it's good to have the definition initiative out ahead of like what we need the standard to be.

[00:10:36]
So we've got reservations, which that's used in Gmail for a restaurant reservation, something like that. So they can see like it is at this time at this location. And so on and so on and so on. Place of worship, taxi stand, I bet you didn't know that they needed to be standardized and so on.

[00:10:59]
So if we look at one of these individual schemas, this is the name of the property on the left, the expected type. So everything that is not just text as you see some of these are our text here. Those are expected to be other schema.org objects. So when we see, if we go down a little bit more, if we see like founder is supposed to be an organization or person.

[00:11:22]
That's gonna be a nested object inside your JSON with a complete description of that thing. Now you'll look at organization and you might see that like that even goes deeper in their sub-nested items there. You can just use your discretion as to when you should stop. I don't see really any value in going, unless it's a really important piece of information that I'm trying to proliferate as far as I possibly can.

[00:11:50]
I don't go more than one nested level deep.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now