Improve Your Search Results with Rich Snippets & Schema.org Vocabulary
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:
It extends HTML semantics by making the content more understandable for search engines.
Rich snippets — the search engine presentation of structured data — have a better click-through rate than regular, less informative search results.
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:
Types: different kinds of web content, they are arranged into their own hierarchy
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.
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:
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.
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.
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:
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:
"name": "My Recipe",
"description": "Description of Recipe"
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.