Structured Data And SEO: How To Implement It?

by | Apr 8, 2018 | Blog, How To, Website Platforms

Structured data is a tool that search engines use to better understand and get easier access to information on a website. Google, in particular, uses structured data to enhance search results pages, and other search engines follow suit to a lesser degree. Google also uses this information in Android search and location based notifications for mobile users.

This article is a technical one. It starts by going deeper in to structured data and what it is for, then it gets in to the technical details of how to implement various structured data techniques on a website so that search engines can pick it up. If you start glazing over, it is time to move to the next article 🙂 Just know that when you work with a company like AssetLab or when you're ready to dig in to this level of detail... it's here.

An Overview

In 2011 the largest of the big when it comes to Internet indexing Google, Bing, Yahoo! and Yandex got together to standardize Structured Data and create list of attributes, entries and entities which they agreed to support and is known as Schema.org ever since. Even though it has been around for quite some time, not a lot of marketers and SEO experts have decided to implement it. There is not a lot of clarity on some crucial information about Structured Data and this has kept experts wondering how, when and why Structured Data is important for themselves and their clients. A survey organized by Microsoft's Bing showed that only 17% of the marketers are using Structured Data for their websites and clients.

What is Structured Data?

As the name implies it is indeed creating a structure and its intention is organizational. If you check the data on your website and try to go through it fast, you will end up being confused not knowing which data is trully important. People might be able to understand structure by just leaving empty spaces, lines, capitalization of letters, creating of paragraphs and images, but computers need an indicator.

This is where Structured Data is intended to be very helpful of course for different purposes not generally. For example: cooking recipes can be displayed as cards on Google, Bing, Yahoo! or Yandex and it will look natural and important to the person searching for that recipe. Structured Data is created to indicate which data is important enough and should take a part of the SERPs.

Cooking and Recipe industries are not the only ones affected. Rich Snippets, Cards, Bio boxes etc. can be implemented by websites from a long range of industries having different but very specific purpose.

Is Structured Data the way you should go?

In general everything that can be done to improve your SEO is the way you should go and it's worthwhile for most people that have the time, the resources and the knowledge to implement it. However sometimes marketers wonder if it's worth prioritizing. If any of the following cases are true for your website then implementing Schema.org Structured Data is very important for you.

Here are some of the cases where Structured Data would have the biggest impact:

  • Search is a key value-driving channel for your business
  • You’ve recently audited your site for basic optimization issues and you know that you’ve achieved a competitive baseline with your keyword targeting, backlinks profile, site structure, and technical setup
  • You’re in a competitive vertical and need your results to stand out in the SERPs
  • You want to use AMP (Accelerated Mobile Pages) as a way to show up in featured areas of the SERP, including carousels
  • You have a lot of article-style content related to key head terms (e.g. 10 chicken recipes) and you’d like a way to display multiple results for those terms in the SERP
  • You’re ranking fairly well (position 15 or higher) already for terms with significant search volume (5000–50,000 searches/month)*
  • You have solid development resources with availability on staff and can implement with minimal time and financial investment
  • You’re in any of the following verticals: e-commerce, publishing, educational products, events/ticketing, creative production, TV/movie/book reviews, job listings, local business

How to implement Schema.org Data Structure?

Schema.org instances are structured with different types of data, Recipe, Product, Article, Person, Organization, etc, that represent different entities or content types.

Each entity has its own properties which represents the identifying indicator for the attributes of that entity or content type. For example, a “Recipe” Type includes properties like “image,” “cookTime,” “nutritionInformation,” etc. If you mark up a recipe on your site using those properties, Google will be able to read them and display those details visually in the SERP, like so:

When you want to mark your content using Schema.org vocabulary, you’ll need to define the specific properties for the Type you’re indicating.

If you’re marking up a recipe page, you need to include the title and at least two other attributes. These could be properties like:

  • aggregateRating: The averaged star rating of the recipe by your users
  • author: The person who created the recipe
  • prepTime: The length of time required to prepare the dish for cooking
  • cookTime: The length of time required to cook the dish
  • datePublished: Date of the article’s publication
  • image: An image of the dish
  • nutritionInformation: Number of calories in the dish
  • review: A review of the dish
  • ...and more.

Each Type has different “required” properties in order to work correctly, as well as additional properties you can include if relevant. (You can view a full list of the Recipe properties at Schema.org/Recipe, or check out Google’s overview of Recipe markup.)

Next step after knowing your types, properties and attributes you can start generating your code.

Code: Microdata vs JSON-LD

There are two common approaches to adding Schema.org markup to your pages: Microdata (in-line annotations added directly to the relevant HTML) and JSON-LD (which uses a Javascript script tag to insert the markup into the head of the page).

JSON-LD is the recommended approach by Google, and it is generally cleaner, simpler to implement... but it is worth noting that Bing does not yet officially support JSON-LD. Also, if you have a WordPress site, you may be able to use a plugin (although be aware that not all of WordPress' plugins work they way they’re supposed to, so it’s especially important to choose one with good reviews, and test thoroughly after implementation).

Whatever option you choose to use, always test your implementation to make sure Google is seeing it show up correctly.

What does this code look like?

Let’s look at an example of marking up a very simple news article (Schema.org/NewsArticle).


Here’s the article content (excluding body copy), with my notes about what each element is:

[posted by publisher ‘Google’]
[headline]Article Headline
[author byline]By John Doe
[date published] Feb 5, 2015
[description] A most wonderful article
[image]
[company logo]

And here’s the basic HTML version of that article:

<div>
  <h2>Article headline</h2>
  <h3>By John Doe</h3>
    <div>
    <img src="https://google.com/thumbnai1.jpg"/>
    </div>
  <div>
      <img src="https://google.com/logo.jpg"/>
      </div>

If you use Microdata, you’ll nest your content inside the relevant meta tags for each piece of data. For this article example, your Microdata code might look like this (within the <body> of the page):

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

The JSON-LD version would usually be added to the <head> of the page, rather than integrated with the <body> content (although adding it in the <body> is still valid).

JSON-LD code for this same article would look like this:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

This is the general style for Microdata and JSON-LD code (for Schema.org/Article). The Schema.org website has a full list of every supported Type and its Properties, and Google has created “feature guides” with example code for the most common structured data use cases, which you can use as a reference for your own code.

Other resources:

Next
There are so many components to making money through marketing…