Use JSON-LD to add schema.org data to your website

Michiel is a partner at Yoast and our COO. Internet veteran. His main goal with most of his articles is to kick-start your site optimization. So much to do!

In this post, we’ll shed some light on Schema.org and JSON-LD. What is it and how can you put it to use for your website?

There are many ways to let Google and other search engines know what your page is about. Next to writing awesome content, which should always be your starting point, we have also written about structured data with Schema.org before. JSON-LD is a (relatively) new way to present Schema.org data about your content to search engines. It comes with a few major benefits, so let’s dive in.

JSON-LD is a combination of both. So it’s a code snippet that tells you what price belongs to what product, or what zip code belongs to what company. Basically, instead of adding schema.org attributes to individual elements on a page, you’re providing a small block of JavaScript code that has all that info.

Why use Schema.org?

What we are talking about here, is structured data for your website. Schema.org provide ways to present your information to Google in a machine-readable way. With that structured data, you create the option for Google to show your content in two Google Search categories:

Rich results, which means your added content, like the price of your product, its rating and/or its availability, is literally shown in the search results as additional information in your snippet.

Knowledge Graph cards. This one is a bit harder, as you’ll have to prove first that you are the authority for certain content. After you have done so, Google might include your data in the Knowledge Graph.

As you can see, it’s really interesting to optimize your site using Schema.org.

Why JSON-LD?

The methods that were used to implement schema.org before JSON-LD was available, were cumbersome. You had to add schema.org attributes to pieces of code in your markup. The markup might have to change from page to page, even though you were including the same header everywhere, for instance. This made schema.org a pain to implement. For us as plugin (and thus back-end) developers, it pushed it entirely into the realm of front-end development.

JSON-LD allows you (and us) to collect all the data about your product and show them in one, small, piece of JavaScript code, that can just be pushed anywhere into the page. This allows you to work on a schema.org implementation using JSON-LD, independently of your theme development.

You can add basically any schema to your JSON-LD block, even breadcrumbs:

We support JSON-LD breadcrumbs. The docs should be updated at some point too :)

As you can see, this can easily be templated in your theme. There are generators like this one, which can be useful in setting up a template for that. If you are using WordPress, there are obviously plugins that can help you out as well.

10 Responses to Use JSON-LD to add schema.org data to your website

Do you know of any plugins or something that works with Yoast that can help automate JSON-LD? At least adding article schema so you don’t have to construct the markup for every single page?

^&nbsp Post author

Michiel Heijmans • 2 years ago

You can find a number of plugins in WordPress.org’s plugin repo that you could test, like this one. Disclaimer: haven’t tested that one, it’s just one I can across.

But using functions, you could also construct a code snippet yourself and add that to your single.php file?

Zach Jenkins • 2 years ago

Thanks Michiel, I’ll take a look at both options and give them a shot. I can’t wait for more of this to be integrated into things going forward.

SEO Lady Nina • 2 years ago

I came to the comments to ask about a WordPress plugin recommendation then I spotted your link at the end of the article. Perfectly explained thank you.

Vincenzo Coppolecchia • 2 years ago

Hey there, hi and thank you!
I’m working on a website that shows dairy products with WooCommerce and I’d like to extend the basic schema.org available with the informations I have in the nutritional tables. available in the single product page.
This seems not strictly appropriate: https://schema.org/NutritionInformation

Which schema should I use? Thanks!

^&nbsp Post author

Michiel Heijmans • 2 years ago

The nice thing about schema is that you really don’t have to include all the elements of a schema. It’s not that strict in terms of validation. You can easily use the elements that apply and leave the rest out. Just be sure to add the right itemtype everytime you add another.

Hello! This is a big question in the food blogging world right now. Many bloggers want to be using JSON-LD for their recipe markup but don’t want to lose their rich pins since Pinterest does not yet support JSON-LD. Some bloggers are getting around this by using both schema.org and JSON-LD markup. Do you see any issue with this setup as it creates duplicate content? Is it safer to stick with scheme.org until Pinterest adds the support needed for rich pins?

^&nbsp Post author

Michiel Heijmans • 2 years ago

I would for sure add both, to be honest. Bing still doesn’t mention JSON-LD in its webmaster tools, for instance, so Pinterest isn’t the only one that’s not (fully) using it.