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

Wednesday, November 2, 2016

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

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 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.

What is JSON-LD?

First, let’s look into what JSON-LD stands for, so we can really 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, which 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 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.
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 into 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:

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

— John Mueller (@JohnMu) August 12, 2016

In fact, in its own documentation, Google often states JSON-LD is the easiest way to add metadata to sites. It’s the option that is least likely to break when you make other changes 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.

Yoast SEO already uses JSON-LD to add information about your site search, your site name, your logo and your social profiles to your web pages.

SEO Company