Follow on twitter
Apr 29th, 2019

Improve your SEO using structured data objects (JSON-LD)

How make your content appear in the first results on google search?

That’s the one million dollar question (probably more).

There are a lot of things to do around Search engine optimization (SEO), and probably the use of structured data is one of the most overlooked tools that you’d probably be interred in after reading this article.

Use structured data to help Google understand the content of your site and enable special Search result features for your pages. If you're not sure which feature to add, explore our search gallery. Read more about product-search here

So, how can you use “Structured data” on your website?

We’ll, there are a few options, I’m going to show you how the code looks like using an example for an article page, found on the schema.org website:

  1. Using the right HTML tags:
<!-- A list of the issues for a single volume of a given periodical. -->
<div>
<h1>The Lancet</h1>
<p>Volume 376, July 2010-December 2010</p>
<p>Published by Elsevier
<ul>
<li>ISSN: 0140-6736</li>
</ul>
<h3>Issues:</h3>
<ul>
<li>No. 9734 Jul 3, 2010 p 1-68</li>
<li>No. 9735 Jul 10, 2010 p 69-140</li>
</ul>
</div>
view raw 1.html hosted with ❤ by GitHub

Probably you already are doing this, using <h1> tags for the main title, <p> tags for each paragraph and so on.

  1. Using micro data:
<!-- A list of the issues for a single volume of a given periodical. -->
<div itemscope itemtype="http://schema.org/Periodical">
<h1 itemprop="name">The Lancet</h1>
<p>Volume 376, July 2010-December 2010</p>
<p>Published by <span itemprop="publisher">Elsevier</span>
<ul>
<li>ISSN: <span itemprop="issn">0140-6736</span></li>
</ul>
<h3>Issues:</h3>
<div itemprop="hasPart" itemscope itemtype="http://schema.org/PublicationVolume" itemid="#vol376">
<meta itemprop="volumeNumber" content="376">
<ul>
<li itemprop="hasPart" itemscope itemtype="http://schema.org/PublicationIssue" itemid="#iss9734">No.
<span itemprop="issueNumber">9734</span>
<time datetime="2010-07-03" itemprop="datePublished">Jul 3, 2010</time>
p <span itemprop="pageStart">1</span>-<span itemprop="pageEnd">68</span>
</li>
<li itemprop="hasPart" itemscope itemtype="http://schema.org/PublicationIssue" itemid="#iss9735">No.
<span itemprop="issueNumber">9735</span>
<time datetime="2010-07-03" itemprop="datePublished">Jul 10, 2010</time>
p <span itemprop="pageStart">69</span>-<span itemprop="pageEnd">140</span>
</li>
</ul>
</div>
</div>
view raw 2.html hosted with ❤ by GitHub

This is more specific, as you can see, there are a few new properties in the content like itemprop="issueNumber" or itemtype="http://schema.org/Periodical".

This is hard to maintain especially when you have dynamic content.

  1. RDFa:
<!-- A list of the issues for a single volume of a given periodical. -->
<div vocab="http://schema.org/" typeof="Periodical">
<h1 property="name">The Lancet</h1>
<p>Volume 376, July 2010-December 2010</p>
<p>Published by <span property="publisher">Elsevier</span>
<ul>
<li>ISSN: <span property="issn">0140-6736</span></li>
</ul>
<h3>Issues:</h3>
<div property="hasPart" typeof="PublicationVolume" resource="#vol376">
<meta property="volumeNumber" content="376">
<ul>
<li property="hasPart" typeof="PublicationIssue" resource="#issue9734">No.
<span property="issueNumber">9734</span>
<time datetime="2010-07-03" property="datePublished">Jul 3, 2010</time>
p <span property="pageStart">1</span>-<span property="pageEnd">68</span>
</li>
<li property="hasPart" typeof="PublicationIssue" resource="#issue9735">No.
<span property="issueNumber">9735</span>
<time datetime="2010-07-03" property="datePublished">Jul 10, 2010</time>
p <span property="pageStart">69</span>-<span property="pageEnd">140</span>
</li>
</ul>
</div>
</div>
view raw 3.html hosted with ❤ by GitHub

Similar to the previous example, but with a different specification. I won’t get in too much detail here, but if you are interested you can learn more about it by visiting the following link: RDFa

  1. JSON-LD: This is something that we all developers know: valid JSON objects.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Periodical",
"issn": "0140-6736",
"hasPart": {
"@id": "vol376",
"@type": "PublicationVolume",
"volumeNumber": "376",
"hasPart": [
{
"@id": "issue9735",
"@type": "PublicationIssue",
"datePublished": "2010-07-03",
"pageEnd": "140",
"pageStart": "69",
"issueNumber": "9735"
},
{
"@id": "issue9734",
"@type": "PublicationIssue",
"datePublished": "2010-07-03",
"pageEnd": "68",
"pageStart": "1",
"issueNumber": "9734"
}
]
},
"name": "The Lancet",
"publisher": "Elsevier"
}
</script>
view raw 4.html hosted with ❤ by GitHub

As you can see, it is just a JSON object, with a specific structure that you can add at the top of each page.

Following the schema

Depending on the content of each page (review, events, post, article, person, organization), You’ll have to use a different data structure.

If you go to schema.org, you will see the documentation to each schema you may want to implement in your site.

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Another excellent resource is JSON-LD - JSON for Linking Data

How to validate your JSON-LD schema?

There is a testing tool developed by Google that you can use to either crawl a public website to validate or paste any HTML code (useful during development) to test the JSON object.

Structured Data Testing Tool

What are the benefits of using this structured data objects?

As mentioned before on this article Use structured data to help Google understand the content of your site, so this is in fact, a ranking factor doesn’t use it won’t bring any harm, but using it may give you some extra value.

The following are search results for “captain America civil war review.”

SEO - json ld search results

Now, let’s take a look at the code of some of those articles listed on the box at the left of the screen. Taken from: Captain America: Civil War Review | Movie - Empire

{
"@context":"http://schema.org",
"datePublished":"2016-04-29T16:20:00+01:00",
"dateModified":"2017-01-14T13:16:40+00:00",
"description":"Matching its blockbuster scale and spectacle with the smarts of a great, grown-up thriller, Captain America: Civil War is Marvel Studios’ finest film yet. There. We said it again. ",
"inLanguage":"en",
"@type":"Review",
"itemReviewed": {
"image": {
"@type": "ImageObject", "url": "https://cdn.empireonline.com/jpg/80/0/0/1000/563/0/north/0/0/0/0/0/t/films/271110/images/imSjsW6QRkH7fvhnqhQgjnbBBtd.jpg", "width": "1000", "height": "563"
}
,
"@type":"Movie",
"name":"Captain America: Civil War",
"sameAs":"https://www.themoviedb.org/movie/271110",
"datePublished":"2016-04-27T00:00:00+01:00"
}
,
"reviewRating": {
"@type": "Rating", "worstRating": 1, "bestRating": 5, "ratingValue": 5
}
,
"author": {
"@type": "Person", "name": "Dan Jolin"
}
,
"publisher": {
"@type":"Organization",
"name":"Empire",
"sameAs":"https://www.empireonline.com",
"logo": {
"@type": "ImageObject", "url": "https://www.empireonline.com/assets-legacy/img/empire.png"
}
}
,
"url": "https://www.empireonline.com/movies/captain-america-civil-war/review/",
"mainEntityOfPage": "https://www.empireonline.com/movies/captain-america-civil-war/review/"
}
view raw 5.json hosted with ❤ by GitHub

Some easy examples you can copy to use

  • In the Google developers website You’ll find a lot of well-documented cases that you can use.
  • Steal Our JSON-LD is another useful resource that will show you a few screens captures of how your content might look like in the google results if you use the right data structure there.

Wrapping up

Looking for documentation about how to use structured data on a website could be overwhelming.

You have too many resources to look at, and the information isn’t that straight forward at the first look, so I’d recommend you to be patient, and start as small as you can, then depending on the needs of your site, you can add or change more things to your schema.

As thumbs up rule here, I recommend starting as small as you can first.

Jeff
6 months ago
Share: