Quick Guide to Rich Snippets & Schema Markup

Rich snippets allows webmasters to mark up different types of content in a way that search engines can easily understand.

That’s why Google, Bing, Yahoo and Yandex banded together to bring unity and ease of use to rich snippets through their online documentation at schema.org.

Over the last few years we’ve seen rich snippets and microdata showing up more and more in the serps. This markup is gaining popularity as users are seeing some pretty awesome results by including it on their websites.

One study showed a 30% increase in organic traffic for sites using rich snippets. Other studies have shown as much as a 150% increase in click through rate (CTR)!

In this guide, we’ll explore how to incorporate rich snippets into your SEO strategy.

Let’s get into it!

What Are Rich Snippets?

Rich snippets are a form of structured data markup that let’s search engines better understand what a section on your page is about. It goes beyond keywords to help a search engine put certain data into context.

After you markup the data, search engines can display the information in more helpful ways.

For example, instead of this normal looking result with no markup:

You can instead show up like this product result that includes a picture and a price:

Or like this one that also includes schema review stars:

Google can display this information in a much more meaningful way on the search engine results page (SERP) and the user is more likely to click on that result.

Rich snippets, like other structured data markups, are added within the HTML code and you can add them to your website to start benefitting from the higher CTRs!

Who Can Use Rich Snippets?

Anyone can add rich snippets to their website. But, your rich snippets will usually only display if you hold one of those coveted first 5 spots or so on Google.

Not all markup gets used however – Rich snippets will only display if you’re providing relevant and helpful information in response to that query. Google monitors rich snippets and requires that you follow certain Google guidelines.

For example, the below image shows some of the guidelines that Google has for displaying business reviews.

What Types of Information Can Be Displayed As Rich Snippets?

Rich snippets take on several forms to visually align with the information. Each form (template) will include certain relevant data.

Some common examples are:

• Restaurant — Displays average reviews and price range
• Music Album — Lyrics and a link to play one or more songs
• People — Phone number and photo
• Local business — Location and customer review
• Author — Author photo, name and link to other articles/works
• Recipe — Photo, recipe, rating and time to complete the dish
• Video — Video image with play button and time
• Products — Ratings, picture and price range
• Events — Event, date, location, time (future events only)

You can see the full documentation at schema.org

How to Create Rich Snippets

You can apply schema tags to your website in a few different ways:

• You can add the markups yourself by adding content tags to the existing HTML code.
• You can use the Google Structured Data Markup Tool that allows you to pull a section of code off your website. You then mark it up by selecting what each element is in a drop down. The tool then generates a new “marked up” code.
• You can use a plugin that will allow you to fill in blanks and then generate the code for you.

Regardless of which method of implementation you use, it will be helpful to understand what’s going on behind the scenes, so we’ll walk you through adding the markups yourself.

There are 3 main facets of schema code that you’ll need to understand:

1. Itemscope
2. Itemtype
3. Itemprop

For this example we’ll use the local business schema. Not a local business? Don’t sweat it. We’re giving you what you need to know so that you can apply it across different types of rich snippets.

1) Itemscope

Add this to the code to tell Google where your rich snippet begins and ends. We’ll also add “div” to the section of code at the beginning and end if it’s not already there to state that this a block of text set apart from the rest of the page.

For example:

<div itemscope>
Your Other HTML CODE Here
</div>

Now Google knows exactly where your rich snippet begins and ends.

2) Itemtype

Add this to the code to tell Google what type of “template” you’re using off schema.org. Templates can be for anything from a local business, to a movie, to an event, to a product, etc.

Since we’re a local business in this example, we’re using localbusiness. We know the URL for the local business template by visiting schema.org

We’ll markup our code like this:

<div itemscope itemtype=“http://schema.org/LocalBusiness”>
Your Other HTML CODE Here
</div>

Now Google understands that the type of code we’re marking up is about a local business. Everything else that you include in this section will now have more context and this helps with error handling as well when you test your snippets.

For example, if you selected local business, but included a menu in your rich snippet, Google would flag it during testing (which we’ll discuss). As far as it’s concerned, a menu goes with restaurant (a different template), not local business.

3) Itemprop

In addition to a primary template (itemtype), we’ll have sub-sections of information within our rich snippet with different properties.

For example, you will need to declare which parts are the name, date, street address, star rating, etc.

The search engine now knows that the code to follow should be formatted as an address within the rich snippet rather than a price list or something else.

To determine what term to use for that information, visit the schema.org template that you’ve chosen.

Our code for a local business might now look something this:

<div itemscope itemtype=”http://schema.org/LocalBusiness”>
<h1><span itemprop=“name”>ABC Company</span></h1>
<span itemprop=”description”> We’re the place to find everything you need from A-Z.</span>
<div itemprop=”address” itemscope itemtype=“http://schema.org/PostalAddress”>
<span itemprop=“streetAddress”>101 Main Street</span>
<span itemprop=“addressLocality”> Chicagoland</span>,
<span itemprop=”addressRegion”>IA</span>
</div>
Phone: <span itemprop=“telephone”>000-000-0000</span>
</div>

Test Your Rich Snippet

Before going live, you’ll want to test your rich snippet with Google’s structured data testing tool.

You’ll be able to review any errors, omissions or recommendations.

How long does it take for rich snippet markup to appear in the search engines?

Even if your site is holding top positions on SERP, it may take a little while for your rich snippets to appear.

In this video Google says, it may take “a month or so” however there are no guarantees, and Google says they are working to display them quicker.

Remember that ultimately Google decides which rich snippets to display. Make sure that you test your snippets to make sure they are working correctly!

Plugins & Tools For Microdata Markup

There are a few tools available to make creating rich snippets easier for those wither varying levels of coding ability.

Schema Creator for WordPress

Schema Creator gets you started quickly so that your rich snippets can go live faster. You’ll start by answering some basic questions to help customize the experience. Next you’ll choose a form. The fields below will depend on the form you select. Fill it out and the behind the scenes coding is done for you. But always do your testing as we discussed above.

WP Rich Snippets

WP Rich Snippets offers many flexible features that allow you to markup content and experience the benefits of rich snippets on your site. Similar to Schema Creator above, you’ll simply fill out the fields and let the plugin do the rest.

Google Markup Helper

Google Structured Data Markup helper will help you create the necessary code to put on your website.

Here’s how it works:

1. First you’ll choose a template and a page on your site.
2. Your site will then appear and you can highlight the data to create a tag
3. Google will give you the code with your microdata highlighted
4. You can test your rich snippet to make sure that it looks the way you’d expect.

Common Mistakes

There are a few common mistakes with rich snippets, here are the most common:

Content Is Not Human Readable

All content in the rich snippet should be human-readable.

That includes font sizes, colors, styles, overlapping elements and anything else that could make the content hard to read.

Content Is Low Quality

In alignment with writing content for humans, content on your page should be high quality content and the rich snippet itself should appear high quality with no:

• Strange spaces
• Extraneous information
• Weird capitalizations
• Unprofessional images
• Wrong spelling
• Bad grammar
• Inaccurate Information

Rich Snippet Is Not Representative of Page Content

Rich snippets that appear to mislead someone who clicks on them will be rejected. In other words, your rich snippet shouldn’t oversell the page and then under-deliver.

Content Is Inaccurate

Check your sources and check them again. Make sure that the information in your rich snippet is 100% accurate.

Conclusion

By adding schema markup to your website you can help search engines understand your website better and get more traffic!

Do you have any other tools you like? Let us know in the comments!

Clayton Johnson

Clayton Johnson is the CMO of The HOTH SEO company. He has over 8+ years experience in the SEO industry and has spoken at events like SEJ Summit. The HOTH has been featured in Inc 5000, Forbes, SMX, Pubcon, Content Marketing World, Affiliate Summit, Brighton and more.