How To Implement Schema Mark-Up (Structured Data)

In this video our CTO, Jamie, discusses the origins of schema mark-up (structured data) and how to implement it effectively on your website. For more videos like this why not subscribe to our YouTube channel?

See below for a full video transcription.

VIDEO TRANSCRIPTION:

Hi I’m Jamie, I’m the CTO at Flaunt Digital. Today we’re going to be covering including structured data in your website.

What Is Structured Data?

So to start, just a quick history lesson on where structured data on the web came from. So, about 15 years ago there was a bit of buzz around the Semantic Web. This was all about changing the way websites were tagged, in terms of the HTML, and making them more obvious as to what data is within the tags. Because you’ll see in a website with HTML tags, you get H1s, P tags, etc., but there’s no semantics behind those. So there was a big push towards driving semantics on the web. And the reason for this was to help things like screen readers, and to obviously help search engines, too, so they could apply a bit of context to the web, and then essentially they can create a database there of things that are defined on the web, whether that be an event or something else.

Now, fast forward 10 years later, and there’s still a lot of accessibility guidelines around screen readers, and they’re still a big help for people who are wanting to parse websites and pull context out of them, which is like scraping, basically. But the big reason that people are including Schema in their websites is for search engines. So, Google is pretty much at the forefront of this, as you can imagine, and they have a big focus on encouraging website developers to include these Schema tags. And what they do in return for when developers do this is they give them more prominence in the search engine results pages (SERPs). So you’ll have seen this for things like products, or people, or places, or events, and there’s tons and tons of these little things that are defined that you can mark up in your website. And there’s a website called schema.org, and they essentially have a library of things that you can…that are definable, basically, and these go really far and wide. But like I said, the most popular ones that people are often using are events, people, places, things for articles as well. So, publishers like to include things like publish date, author, etc. And then they come in to the SERPs, and if it’s a news reader piece of software, like Google News or Apple News, for example, they’ll pull out this metadata, and obviously, they’ll be able to style it accordingly.

How Can I Implement Structured Data?

Now, in terms of implementation in your website, there’s a few different ways to do this, and this has sort of evolved over time. But there’s two main ways that I see nowadays; microdata, which you’re essentially adding attributes to existing HTML tags. So you’ll define a scope around a block, and then what you’ll do is you’ll add an attribute. So let’s say, for example, you’ve got a H1 in there, or H2, you might have an attribute in there to add context. So, this is the title of the film, or the event, or the person, for example. And then you can do this with other…so if you’ve got other HTML tags that are in that container, say for example, if it’s an event, you might have a location or you might have a date, you can tag these up with attributes directly in your HTML. So that’s quite easy to manage.

Another option which is widely used as well is JSON-LD. So, here you put a script block in, it’s essentially a JavaScript block, and from there you can add some JSON, or JSON within that block. And JSON’s just a really simple structure for defining data, basically. So it’s pretty much the same principles apply, you still get the things and the definitions from schema.org. Instead of embedding it directly into your HTML tags, you have a separate block for this. And this is slightly more widely used because it’s probably easier for developers to maintain outside of the content. If you’ve got a CMS, for example, H1 tags might be entered by a user that’s oblivious to things like Schema, so you can build the JSON-LD block outside of the CMS-managed block. So this just separates things out, and it depends on exactly what content you’re showing, of course. But yeah, two ways to go about it. They achieve the same thing.

So, in terms of getting these tags, or this context or data into your website, there’s obviously a few different ways to do it. And it obviously depends on the type of website that you’ve got. But if it’s a CMS or a WordPress website, for example, you can either paste these tags directly into the content block. Obviously, you’ve got to write them by hand or use a tool that’s going to help you. So, that’s basically the quickest way to do this. But if you’ve got any auto-generated content, so you’ve got a CMS, or an e-commerce site, for example, and it’s outputting loads of products, you want to code them into the template so these things are generated automatically. And then you can choose whichever implementation method you like.

There’s also a few quick wins for this. So if you use Yoast SEO plugin on your WordPress website, just by enabling that, I think with the default features, it’ll pump out some generic sort of website-related Schema tags straight into the head of your website. So these are things that might define your business, or what type of business you’ve got, author tag, things like that. So these are generic ones that you see on pretty much every website, and you get SEO plugins, like Yoast on WordPress, that’ll take care of that for you. You just enter a few simple pieces of data, it’ll generate the tags for you. So that’s a really quick win, if you want to get started.

How Do I Know If I Have Implemented It Right?

Now, testing these tags and this data is another key point. So there’s a few tools that Google offer that help you do this. There’s one called the structured data testing tool, this is similar to the other tools that Google have got that help you test your website. You can either give it a link, if it’s, obviously, a live website, or you can paste your HTML directly into a big box in there. And it’ll run through it, and it’ll not only tell you if you’ve got errors or warnings, but it will show you which specific piece of data it’s pulled out, and how it would use it. So if it’s an event, for example, it’ll say, ah, yeah this is the location, this is the title, this is the date. And you can just double check that and make sure it’s all been read in correctly. So that’s a great, great thing to do before you put your website live, and like I said, you can paste in your staging website HTML and run it through there. And then once your website’s live, Search Console…it used to be Webmaster Tools, will run checks on your site, and it’ll pick this stuff up automatically. You can trigger a re-index if you want to get it a bit quicker, but it’ll come up automatically, and it’ll email you as well if there’s any problems. And it’ll flag warnings and errors, essentially the same things that the testing tool will flag to you. And it’ll usually link you back across that tool, so if you use that first, before you put it live, you won’t have these issues, really. But if it’s auto-generated stuff you might find, I don’t know, weird things that might break it, whether it’s a line break or a quote mark, something like that might break it. So these’ll flag these up as and when they happen, if it’s auto-generated content.

And that’s it. Obviously, there’s a lot more to this topic, there’s loads of great resources out there on the web about it. But essentially, if you want to get started with Schema on your website, there’s loads of quick wins. Like I said, a couple of plugins, like Yoast SEO, will help you do this, and help you with your blog posts as well, in terms of tagging for that. So that’s a really quick win, if you just install that, run some testing tools, and see what Search Console says. And then you’ll be able to see some stuff in the SERPs, in the search engine pages pretty soon, hopefully, and that’ll stand out a bit more to your users, and hopefully, get you a bit more traffic.