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

There are many ways to let Google and other search engines know what your page is about. In addition to writing awesome content, which should always be your starting point, we have previously written about structured data with Schema.org. JSON-LD is a way to present Schema.org data about your content to search engines. It has a few major benefits, so let’s dive in and uncover what JSON-LD is and how you can use it for your website.

What is JSON-LD?

First, let’s look into what JSON-LD stands for to understand what it does.

JSON-LD, or JavaScript Object Notation for Linked Data, is a method of encoding Linked Data using JSON. (Wikipedia)

Let’s dissect that:

JSON
JSON is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate.

LD
Linked Data is about using the internet to connect related data.

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

Why use Schema.org?

What we are talking about here is structured data for your website. Schema.org provides 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.
• Site links search boxes, if your site is eligible, a feature already supported by our Yoast SEO plugin.
• 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, optimizing your site using Schema.org is really interesting.

Increase chances of Google showing rich snippets of your site in the search results: learn how to add structured data with our training on structured data and SEO. 

Why JSON-LD?

The methods 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 included the same header everywhere. This made schema.org a pain to implement. For us as plugin (and thus back-end) developers, it pushed it entirely into front-end development.

JSON-LD allows you (and us) to collect all the data about your product and show it in one small piece of JavaScript code that can be pushed anywhere on 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.

In fact, in its own documentation, Google often states that JSON-LD is the easiest way to add metadata to sites. It’s also the option that is least likely to break when other changes are made to your site.

Adding the script to your website

Luckily, JSON+LD is set up in a standardized format. Here’s an example of that format for a random product:

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Yoast SEO for WordPress",
  "image": "https://cdn-images.yoast.com/uploads/2010/10/Yoast_SEO_WP_plugin_FB.png",
  "description": "Yoast SEO is the most complete WordPress SEO plugin. It handles the technical optimization of your site & assists with optimizing your content.",
  "brand": {
    "@type": "Thing",
    "name": "Yoast"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "69.00"
  }
}
</script>

You can use any schema.org schema in JSON-LD. After adding a new JSON-LD script to your website, be sure to validate your code using the Google’s structured data test tool.

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.

The Yoast SEO schema framework uses JSON-LD to add structured data about many parts of your web pages.

Read more: Structured data with Schema.org: the ultimate guide »