JSON-LD: A more effective way to writing structured data

Unfamiliar with linked data or structured data? Have a look at this short understandable video.

PRO TIP! Test your structured data with Google's Structured Data Tesing Tool.

Structured data

A couple of years ago when I first came across structured data markup such as RDFa, Microformat and Microdata, it was implemented is such a fashionable manner.

You defined everything in your HTML tags one way or another.

Microdata

In this example we use Microdata. First you define your itemtype and itemscope, maybe on a <section> element.

<section itemscope itemtype="http://schema.org/Person">

  <h2 itemprop="name">Tobias Skarhed</h2>

  <div class="bio">
  ..."Insert very information information about person here"...
  </div>
</section>  

You make a reference to the Schema.org definition and define the itemscope of that particular item. Then you go on to create itemprops, which defines properties for that particular itemtype. This is all nested in the HTML, which means that all properties takes the content of the element and assign it as the property value. Neat.

But wait. What if I want to define ALL properties that are mentioned in the Schema specification? I would ideally want to define myself in structured data all in the same place, not to have a lot of properties spread out on different pages. Not only that I have very bloated HTML code, but I can easily lose track of the structure, which results in a lot of debugging of the structured data. Could be somewhat painful!

Welcome JSON-LD!

Okay. Screw it. HTML/Microdata is not the easiest way to display machine-readable data. Machines like to read computer language. I heard they liked reading JSON objects. So that's what we will do. Create a JSON object with the help of JSON-LD.

Let us start by defining the part of our site where we want to create the JSON object. You define it by creating a regular <script></script> element. I prefer doing it in the <head> of the document, but depending on where you are able to generate your data, you might need to put it elsewhere.

<script type="application/ld+json">  
...
</script>  

We define the type attribute to make the machines understand that there is an object to be fetched here, and not some other stuff (scripts etc.).

We still make use of the same definitions which are defined by Schema. The only difference is that this time we do it in a purer way. As a JSON object. Yay!

(In this example we define a Person)

<script type="application/ld+json">  
  {
  "@context": "http://schema.org", //We define Schema as the context for fetching the different types.
  "@type": "person",
  "name" : "Tobias Skarhed",
  "birthDate" : "1912-02-23",
  "deathDate" : "2009-07-21",
  "description": "Tobias is described as a mythical person. He has always lived until he died. Some say he might be Bigfoot.",
  "sameAs" : "https://en.wikipedia.org/wiki/Bigfoot",
  "brand" : {
     "@type": "Organization",
     "name" : "BigFoot Fanclub"
     "url" : "http://bigfootfanclub.com"
     }
  }

</script>  

Now all the big search engines will know that Tobias Skarhed is Bigfoot. Wonderful!

Summary

Microdata or other inline markup

  • Good if you like semantics
  • Might even make your code more understandable
  • With a lot of moving parts in an application, some properties might easily get lost

JSON-LD

  • Good if you just want to get the job done
  • Everything in the same place
  • Completely ignores semantics and HTML structure

I believe the choice of defining structured/linked data is personal. Choose whatever method that fits your workflow and what you feel like doing. My choice is JSON-LD until proven otherwise!

comments powered by Disqus