Implementing JSON-LD structured data in markup

06 Nov 2017 - Graham Campbell

As we discussed in our previous article on *How to enhance your SERPs with JSON-LD* this rich data snippet can be added to our markup to provide Google and other syndication providers with a more easily digestible view of our data.

Visit our previous article on Enhancing your SERPS with JSON-LD.

There are two ways that we can provide this:-

  • Direct injection of a JSON-LD javascript snippet into our markup inside the HEAD or BODY element.
  • Provide a JSON-LD API for your content which can then be embedded into pages and served up separately to your actual HTML pages.

Today we’ll discuss the first of these options, and provide a snippet that can be simply dropped into an existing site, be that static, or CMS driven.

How this will modify our SERPs

We might expect to see something like the following search listing with the snippet described later on in this article with perhaps some further additional attributes to describe the actual type of product (see Schema.org for further info on these attributes).

As we can see, Rating does quite a lot to draw the eye to individual results in listings so if you do have access to your own ratings data, working that in can have a positive effect on increasing organic footfall.

How do I do that…?

The following code snippet describes a product from an e-commerce website. It can be embedded into any webpage and could be either static, or driven by data from a CMS or CRM.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "name": "New Balance - 574 Retro Surf",
  "description": "ENCAP midsole technology provides support and maximum durability. EVA (Ethyl Vinyl Acetate) foam midsole for cushioning. Rubber outsole. Textile upper.",
  "color": "Red with White",
  "image": "http://nb.scene7.com/is/image/NB/ml574rtc_nb_02_i",

  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "reviewCount": "1"
  },

  "offers": {
    "@type": "Offer",
    "availability": "http://schema.org/InStock",
    "price": "56.00",
    "priceCurrency": "GBP"
  },

  "review": [
    {
      "@type": "Review",
      "author": "Graham",
      "datePublished": "2017-07-14",
      "name": "Loved em",
      "description": "Great trainers. Love them to bits."
    }
  ]

}
</script>

As we can see, the self-contained snippet above doesn’t need anything extra in the page. this is literally all you need to provide. You could even paste this into your CMS.

NB: Please DO NOT paste random snippets of Javascript from the internet directly into the WYSIWYG editor of your CMS.

That was just a test. Hopefully you passed.

Testing the snippet is working

You can easily test whether the data that you’ve injected has had an impact on what structured data is visible by using the Structured Data Testing Tool from Google. This allows you to provide either a URL to your content, or you can copy/paste in a snippet of markup so that you can validate your efforts (code snippet above).

The image above shows the data from our JSON-LD that Google will likely display for this product, for Rating, Price, Currency and Availability so that our customer can see what our product proposition is before ever visiting our website.

How long will it take for SERPs to change

As with anything SEO related, immediate effects aren’t always entirely obvious. You could try some or all of the following to ensure you have at least some control over how, or more importantly when, Google re-indexes your content.

  • Ensure your site has an up to date or dynamic sitemap.xml.
  • Make sure you submit this sitemap to Google Search Console. You can then hint Google to crawl your sitemap whenever you do a large content publish.
  • Ensure all of your pages can be found with thoughtful site hierarchy.

Further Reading

How can we help?
Get in touch with the innovators at Orange Bus

Thank you, your message has been submitted.