Boost Your Search Results with Schema.org and Rich Snippets

Structured data makes it possible to present your search results in a more visually appealing and informative way. According to a Searchmetrics study, the addition of structured data markup to a website leads to a 36% increase in Google search results.

Structured data markup is rendered in Google, Bing, and other search engines as rich snippets. Rich snippets are enhanced search results that add extra information, such as a photo, the price, user ratings, and other characteristics, to search engine snippets.

Structured data leads to better search results for two main reasons:

1. It extends HTML semantics by making the content more understandable for search engines.
2. Rich snippets — the search engine presentation of structured data — have a better click-through rate than regular, less informative search results.

Recommended Reading: A Look Into Proper HTML5 Semantics

Schema.org Vocabulary

If you want to have rich snippets for your own site, you need to add structured data to your HTML markup. Structured data uses the schema.org vocabulary that allows you to inform search engines about the nature of your content.

Schema.org is the initiative of Google, Bing, and Yahoo that aims to provide a set of schemas for describing different kinds of web content so that search engines can better understand it.

The Schema.org vocabulary is organized in a two-level hierarchy:

1. Types: different kinds of web content, they are arranged into their own hierarchy
2. Properties: each type has a certain number of properties

First Level of Types

Thing is the most generic item in the schema.org vocabulary, it’s the ancestor of all other Types.

Second Level of Types

The second level of Types is a little bit more specific, and contains the Event, the Action, the Intangible, the CreativeWork, the Place, the Organization, the Product, and the Person Types. There’s also a separate second-level Thing that’s available as a schema.org extension; it’s the MedicalEntity Type.

Third Level of Types

Each second level Type contains some or many third level Types, for instance one of CreativeWork’s subtype is the Review Type. Note that more specific Types (second and third level) inherit the properties of their parent (and grandparent in case of third level).

The image below was published on the official schema blog, and it visualizes the hiearchy of the schema.org vocabulary.

Find the Schema You Need

Browse the vocabulary in order to find the schema you need. For example, for recipe rich snippets you need to use the Recipe Type which is the child of CreativeWork. It has many properties, such as cookTime, cookingMethod, recipeIngredient, and others, plus it also inherits the properties of its parent (CreativeWork), and grandparent (Thing).

Schema.org is a community project, it’s frequently extended, and new versions are regularly released. If you can’t find the schema you need, you can propose it to the Schema.org Community, and you can also contribute to their Github project.

Add Structured Data to Your Markup

So how do you add your schemas to the front-end code? Schema.org can use three different formats. You need to choose one in order to add structured data markup to your site. Although in theory you can use more than one formats on the same site, it harms code readibility and maintainability, so it’s not a good practice.

The three main formats of structured data markup are the following:

1. Microdata: It’s a web standard that extends HTML by introducing new attributes such as itemprop. The official schema.org website has a great tutorial on how to use microdata, so if you’re already familiar with HTML, this format can be a good choice.
2. RDFa: The long form of RDFa is Resource Description Framework in Attributes, and it’s a W3C recommendation that extends HTML, XML, and SVG documents with the help of a set of specific attributes. Facebook’s Open Graph Protocol is also based on RDFa, so probably you’ve already encountered it. There’s an RDFa Lite version for beginners, and also a full version that gives many options to work with structured data in an elaborate way.
3. JSON-LD: While the two other options extends the HTML markup, JSON-LD uses the JSON syntax. JSON-LD stands for JavaScript Object Notation for Linked Data, and this is the format that Google Developers recommends, as according to their view, "structured data markup is most easily represented in JSON-LD format". You don’t need to be a JavaScript-expert to use JSON, as it’s a simple notation system using name-value pairs.

You can easily compare the three formats with the help of a handy tab at the bottom of each schema.org Type page.

By scrutinizing the examples, you can easily understand how each format works, and use one of them on your own site.

The structured data markup you need to add to your code is based on the schema.org vocabulary. If you choose microdata or RDFa you need to add the extra attributes to regular HTML tags.

For example with microdata, you add the name of the Type to the container by using the itemscope itemtype="" attribute, and each property with the itemprop attribute. Here’s a very simple example:

<div itemscope itemtype="https://schema.org/Recipe">
	<h2 itemprop="name">My Recipe</h2>
	<img itemprop="image" src="image.jpg" alt="Recipe Image">
	<p itemprop="description">Description of Recipe</p>
</div>

And the same example using RDFa, it’s worth paying attention to the different attributes you need to use here:

<div vocab="https://schema.org/" typeof="Recipe">
	<h2 property="name">My Recipe</h2>
	<img property="image" src="image.jpg" alt="Recipe Image">
	<p property="description">Description of Recipe</p>
</div>

If you choose the JSON-LD format, you need to place your code inside the <script type="application/ld+json"></script> tag in the head of your HTML page. The example above will look like this:

<script type="application/ld+json">
{
	"@context": "http://schema.org",
  "@type": "Recipe",
	"name": "My Recipe",
	"image": "image.jpg",
	"description": "Description of Recipe"
}
</script>

Tips to Use Structured Data

Test Your Structured Data Markup

Before adding the structured data markup to your site, you can quickly test it by using Google’s Structured Data Testing Tool. This way you can quickly find the issues if you have any.

Leverage Google Knowledge Graph Cards

Google doesn’t only use structured data for rich snippets, but if you’re an authority for a certain content type, your content may also appear in one of the Knowledge Graph Cards displayed on the right-hand side of some Search Engine Result Pages.

Note that you can’t make Google display a Knowledge Graph Card for your content, but if your structured data markup is properly set up you have the possibility.

Make Use of Google Rich Cards

In May 2016, Google introduced Rich Cards that are "the upgrade of the current Rich Snippets format", and provide engaging mobile search results presented in carousels that can be browsed by scrolling left and right. Google Rich Cards also use structured data markup and the schema.org vocabulary.

Add Structured Data to Your Emails

You can use structured data markup in your emails in order to trigger Google Now Cards for the recipient, Google Developers has a great tutorial on how to do it.

Generate Structured Data Dynamically

It’s possible to use Google Tag Manager to dynamically generate structured data in JSON-LD format, Moz.com teaches you how to do it.