JSON-LD for your website

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

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

November 02nd, 2016 – 10 Comments

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.

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)

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

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:

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.

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


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

  1. SL Blogger
    By SL Blogger on 8 November, 2016

    thank for your informations..but, how to cut into struktured blog?

  2. Zach Jenkins
    By Zach Jenkins on 4 November, 2016

    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?

    • Michiel Heijmans
      By Michiel Heijmans on 4 November, 2016

      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
        By Zach Jenkins on 4 November, 2016

        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.

  3. SEO Lady Nina
    By SEO Lady Nina on 3 November, 2016

    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.

  4. Vincenzo Coppolecchia
    By Vincenzo Coppolecchia on 3 November, 2016

    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!

    • Michiel Heijmans
      By Michiel Heijmans on 4 November, 2016

      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.

  5. Rich Owings
    By Rich Owings on 3 November, 2016
  6. Shay Bocks
    By Shay Bocks on 2 November, 2016

    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?

    • Michiel Heijmans
      By Michiel Heijmans on 3 November, 2016

      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.


Check out our must read articles about Technical SEO