Schema.org came about as the result of a collaboration between Google, Microsoft (Bing), Yahoo!, and Yandex, who started working at it way back in 2011 with a mission to "create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond."

Schema is essentially a form of microdata; it’s code that you add to a website which helps provide search engines with better descriptions of the content on the page. This helps search engines better understand it and provide more informative results to users.

An example of what an implementation of Schema looks like in SERPs (search engine results pages) is the review score. If you go to Google right now and search for a product, chances are you’ll have an online store in the search results selling that product and you can see the rating it has and the number of reviews for the product on that site straight from the SERP. That’s called a rich snippet and it’s thanks to the website owners implementing Schema markup on their online store.

These types of rich snippets set your website apart in search results as the extra information draws more attention, and results with rich snippets also tend to have a higher clickthrough rate than those without. Rich snippets also make your website look more trustworthy to potential customers by virtue of simply being different and more comprehensive than the rest of the results.

Will schema help with SERP ranking?

While schema won’t necessarily help your website rank better in search results since there is no conclusive evidence that microdata impacts organic search rankings, it does have an impact on your website’s visibility in SERPs, as mentioned above. The type of rich snippets mentioned above increase your visibility on the results page and it has been proven that this leads to a higher clickthrough rate. As such, while you might not see a boost in your website’s organic ranking by adding schema markup, you may still see an increase in traffic from searches, which, in the end, is what you are really after.

Adding structured data to your website also means future-proofing your content as search-related technology continues to evolve. For example, voice activated devices such as those using Google Assistant, Alexa, or Siri, are relying more and more on structured data to identify relevant information when answering to spoken queries. This means that the more structured data you include on your website, the higher the chance that search engines will better understand your content’s context and offer it to users more readily. This trend of implementing more and more structured data is known as “semantic SEO.”

Fortunately for you, Schema markup isn’t that widely implemented as other SEO techniques are, so if you’re looking to one up the competition in your SEO efforts, Schema might be the way to go. It is most widely used for:

  • Businesses and organizations
  • Products
  • Events
  • People
  • Reviews
  • Recipes
  • Videos

Before we get into the nitty-gritty, there are three encoding types you can use for Schema markup:

  • Microdata
  • RDFa (Resource Description Framework in Attributes)
  • JSON-LD (Javascript Object Notation for Linked Objects)

All three of these are languages of code which can be added to an HTML document in order to embed metadata (such as schema.org).

Microdata and RFDa are the older ways of implementing Schema and the least preferred for two reasons:

  • they involve writing the additional code right into a page’s HTML, which is a bit more complicated and riskier because if you make any typos and write incorrect HTML syntax, your page may not load properly
  • they are much more tedious and time consuming

JSON-LD is the preferred method because it is easier to understand and implement. Not all search engines supported this type of language until recently which is why it’s only now growing in popularity.

Let’s go ahead and take a look at each method and understand how they work.

Microdata

Microdata is a great place to start if you’re a beginner since it’s fairly easy to use. It refers to a set of tags which serve to annotate HTML elements in a way that search engines understand and know how to interpret. The downside to using microdata is that you have to manually mark each element on your page. Depending on the complexity of your page, there may be quite some grind involved.

Microdata includes the following attributes:

  • itemscope – creates an item and tells the search engine that the rest of the element contains information about this item
  • itemtype – describes the item and its properties
  • itemprop – assigns a property to the containing tag
  • itemid – indicates the item’s unique ID
  • itemref – references the properties of an element which isn’t contained in the itemscope (this requires your document to contain a list of element IDs with more properties)

Let’s say for example your business sells computer hardware. You go to your homepage and you find the portion that talks about what you do.

<div>
<h1>Business Name</h1>
<h2>Tagline</h2>
<p>Address:</p>
<p>123 Address Road</p>
<p>City, State</p>
<p>Phone No.: 123 456 7890</p>
<p>We’re open:</p>
<p>Mon-Sat 9am – 5pm</p>
<p>Sun: 10am – 3pm</p>
</div>

In the opening <div> block, you add the itemscope tag, so now it looks like this:

<div itemscope>

This tells the search engine that you are identifying a specific item between those <div> blocks. Now you want to define this item type with itemtype:

<div itemscope itemtype=”https://schema.org/ComputerStore”>

You pick the item type by browsing the full list available on the Schema.org website. Extensions like “ComputerStore” will help you narrow down your business type. Naturally, the list can’t be 100% inclusive, so if you’ve got a very niche business type, you may not find it in the extended list, so you might just stick with “LocalBusiness,” for example.

Next up you’ll want to point out the business name, so you’ll add markup to the opening <h1> tag, like so:

<h1 itemprop=”name”>Business Name</h1>

Now that you get the general idea, you can go ahead and add markup to the other details on your page. Remember that you don’t have to tag entire lines, though, just the actual information itself. For example, if you have a line that says “Address: 1234 Pink Street”, you only need to add tags around the address itself, like so:

<p>Address: <span itemprop=”streetAddress”>123 Address Road</span></p>

Here’s how all the above details should look with Schema markup added:

<div itemscope itemtype=”https://schema.org/ComputerStore”>
<h1 itemprop=”name”>Business Name</h1>
<h2 itemprop=”description”>Tagline</h2>
<p>Address:</p>
<span itemprop=”address” itemscope itemtype=”https://schema.org/PostalAddress”>
<p itemprop=”streetAddress”>123 Address Road</p>
<p itemprop=”addressLocality”>City, State</p>
</span>
<p>Phone No.: <span itemprop=”telephone”>123 456 7890</span></p>
<p>We’re open:</p>
<p itemprop=”openingHours”>Mon-Sat 9am – 5pm</p>
<p itemprop=”openingHours”>Sun: 10am – 3pm</p>
</div>

Now let’s look at another example of the “Book” markup type and see how it would look on a web page if we used Microdata.

This is how the HTML would look without markup:

<div>
<h3>Harry Potter and the Chamber of Secrets</h3>
<table summary="Bibliographic Details">
<tr>
<th>Main Author: </th>
<td>Rowling, JK</td>
</tr>
</table>
</div>
<table summary="Holdings details">

Now let’s see it with Microdata markup:

<div itemscope itemtype="http://schema.org/Book">
<h3 itemprop="name">Harry Potter and the Chamber of Secrets</h3>
<table summary="Bibliographic Details">
<tr>
<th>Main Author: </th>
<td itemprop="author">Rowling, JK</td>
</tr>
</table>
</div>
<table summary="Holdings details">

It may look a bit complicated at first, but you’ll get the hang of it, especially with Schema.org’s helpful examples of how to use item types. They’ve also got a page to help newcomers get started with Schema and Microdata which holds a lot of valuable information. Google’s Structured Data Markup Helper can also be of great help: you just select your item type, input the URL or the targeted content, and highlight the different elements so you can easily tag them.

RDFa

RDFa is essentially an extension of HTML5 meant to help with marking up structured data. Since it is recommended by the World Wide Web Consortium (W3C), it is a web standard, and you can use it to chain structured data vocabularies together. It is particularly useful for when you are adding structured data which goes beyond Schema’s limits.

RDFa includes the following attributes:

  • about – specifies what resource the metadata is about
  • rel, rev – specify relationships and reverse relationships with other resources
  • src, href, resource – specify a partner resource
  • property – assigns properties to an element
  • content – overrides an element’s content when using the “property” attribute
  • typeof – specifies the subject or partner resource’s RDF type

Fortunately, RDFa really isn’t that different from Microdata. Let’s look at the same details from above:

<div>
<h1>Business Name</h1>
<h2>Tagline</h2>
<p>Address:</p>
<p>123 Address Road</p>
<p>City, State</p>
<p>Phone No.: 123 456 7890</p>
<p>We’re open:</p>
<p>Mon-Sat 9am – 5pm</p>
<p>Sun: 10am – 3pm</p>
</div>

First, you’ll want to use Schema.org vocabulary and ensure that you’re referencing a store page – in our case, a computer store. You combine the vocab tag with the https://schema.org URL to identify the markup vocabulary. Then you use the typeof tag to identify the page type, like so:

<div vocab=”https://schema.org” typeof=”ComputerStore”>

Properties (such as address) can be expanded by using the typeof tag as well:

<div property=”address” typeof=”PostalAddress”>

The typeof tag is basically the RDFa equivalent of itemtype, and the property attribute is the equivalent of the itemprop attribute.

Let’s see how our business details should look now:

<div vocab=”https://schema.org” typeof=”ComputerStore”>
<h1 property=”name”>Business Name</h1>
<h2 property=”description”>Tagline</h2>
<p>Address:</p>
<span
property=”address” typeof=”PostalAddress”>
<p property=”streetAddress”>123 Address Road</p>
<p property=”addressLocality”>City, State</p>
</span>
<p>Phone No.: <span property=”telephone”>123 456 7890</span></p>
<p>We’re open:</p>
<p property=”openingHours”>Mon-Sat 9am – 5pm</p>
<p property=”openingHours”>Sun: 10am – 3pm</p>
</div>

JSON-LD

This type of implementation allows for the code to be inserted in either the <head> or <body> tag of a webpage. It uses “@context” and “@type” attributes to specify the vocabulary (in this case schema.org) and because it can be placed within the <head> tag, JSON-LD is widely accepted as the easiest method for implementing schema.org, especially for beginners.

Let’s look at how the same details from above would look like with this method:

<script type=“application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “ComputerStore”,
“name”: “Business Name”,
“description”: “Tagline”,
“address”: {
“@type”: “PostalAddress”,
“streetAddress”: “123 Address Road”,
“addressLocality”: “City, State”
},
“telephone”: “123 456 7890”,
“openingHours”: [“Mon-Sat 9am – 5pm”, “Sun: 10am – 3pm”]
}
</script>

And the example with the “Book” markup type:

<script type="application/ld+json">
{"@context":"http://schema.org/",
"@type": "Book",
"name": "Harry Potter and the Chamber of Secrets",
"author": "Rowling, JK",
"offers":{"itemOffered": "#record"}}
</script>

As I mentioned earlier, a huge advantage of JSON-LD is that you don’t have to go through the whole document and wrap each HTML element in markup, and any typos you may make won’t break your page. Not only is JSON-LD simpler, but it is also easier to implement and safer, too.

Merkle has a great tool for generating JSON-LD markups so you don’t manually type everything. It does only cover some basics, but it is perfect for getting you started.

Let’s look at a few other schema generators which can be of great help if you are just starting out:

  • Hall Analysis JSON-LD Schema Generator for SEO – this will allow you to input information about a person, product, event, local business, organization, or website, and then create a JSON-LD code snippet which you can paste into your page’s HTML. It is a very simple and easy to use generator that can be used by both novice and more experienced users.
  • Google Structured Data Markup Helper – we’ve already mentioned this tool above and what’s great about it is that you can simply use it to click around your webpage and select and label the items that you want to mark up.
  • Microdata Generator – a simple and easy to use tool that is especially helpful for local businesses.

After you have your code, you’ll need to test it for errors, which you can do using Google’s Structured Data Testing Tool.

Final thoughts

Now that you’ve learned the basics, you should be good to go for a more in-depth learning experience as you begin implementing Schema on your website. Once you understand how it works, you’re already half-way there to mastering it. It may seem tedious at times, and it definitely can be if you use Microdata or RDFa, but the SEO advantages are worth the hassle.