What are Rich Snippets?
Rich Snippets are the additional information that appears beside the <title> and <meta description> in search engine results. This information can include ratings, prices, images, and much, much more.
For instance, Yelp results include the number of stars, the price range, and the number of reviews on Yelp:
This is what a Yelp review snippet looks like in Google:
And in Bing:
Rich Snippets come in many flavors. These include:
Products & Offers
People
In Google:
In Bing:
Individual Reviews
In Google:
In Bing:
Aggregate Reviews
In Google:
In Bing:
Events
(Bing doesn’t support events yet.)
Recipes
In Google:
In Bing:
Why do we care?
Rich Snippets improve click-thru rate from a search engine ranking page (SERP). They make your blue link stick out from the rest, and give the searcher a better idea of what will be on a page. Google engineers working on the project have confirmed that rich snippets increase CTR:
From our experiments, it seemed that giving the user a better idea of what to expect on the page increases the click-through rate on the search results. So if the webmasters do this, it’s really good for them. They get more traffic. It’s good for users because they have a better idea of what to expect on the page. And, overall, it’s good for the web.
- RV Guha, Rich Snippets Engineer at Google
In numbers released by Yahoo!, rich snippet-like implementations have increased CTR from SERPs by as much as 15%. (Vanessa Fox, SearchEngineLand, August 2008)
It makes sense. If you give a searcher a better idea what they’re going to see, they’re more likely to click.
And you’ll reduce bounce rate. Since the searcher knows what they’re getting, they’re more likely to stick around when they get there. While bounce rate is not an explicit ranking factor (it’s one of those ranking factors that Google is cagey about), some factors around bounce rate (such as the time between searches) are thought to be ranking factors, and either way, a lower bounce rate is better for your site.
Using rich snippets can also improve your rankings on Bing. Bing has confirmed that they use click-thru rate (CTR) as a ranking factor. Therefore, in Bing, Rich Snippets = Higher CTR = Higher Rankings.
And they’re a competitive advantage. There aren’t many sites using ‘em. If you use them, you’ll stand out from the crowd.
So now you know – use rich snippets. But how? Keep reading…
Implementing rich snippets
You can implement rich snippets by marking up your data with a little extra information. Some folks call this extra information semantic markup. We’ll stick with that in this module.
Each type of rich snippet (product, event, person, review, etc.) has a unique set of properties associated with them. Using semantic markup, you encode information about each one of these properties into a webpage.
Properties
Google recognizes a certain number of properties that can be associated with rich snippets. These vary by rich snippet type. You can use properties to mark up events, addresses, product reviews, product data, etc… If you’re a database geek, think of properties as fields in a database. If you’re familiar with Excel, think of properties as individual cells.
For example, for individual reviews of products, for example, the properties are:
| Property | Description |
itemreviewed (item) |
The item being reviewed. In microformats, can include the name of the item reviewed (fn). |
rating |
A numerical quality rating for the item (for example, 4). You can indicate a rating scale by specifying best (default: 5) and worst (default: 1). |
reviewer |
The author of the review. |
dtreviewed |
The date that the item was reviewed in ISO date format. |
description |
The body of the review. |
summary |
A short summary of the review. |
(Reprinted from Google’s Webmaster Central Rich Snippets for Reviews page.)
You can read up on every Google-supported rich snippet type on their site, here: Google Webmaster Documentation on Rich Snippets.
Go take a look and pick out the properties you want to use. I’ll wait…
RDFa, Microformats, and Microdata
Now that you’ve got properties selected, it’s time to use some semantic markup. There are three different mark-up standards currently supported by Google to produce rich snippets:
- Microformats (hCard)
- Microdata
- RDFa (Resource Description Framework in Attributes)
Right now, Microformats appear to be winning. They’re also easier to use (in my opinion) so we’ll go with those.
While I won’t go into great detail about how to code each and every type of rich snippet, let’s go through one example all the way.
Example: the Mountain 3-Wolf Howl Short Sleeve T-Shirt
Say you’re going to mark up a review so it’ll show up in rich snippets. I’m going to use the Mountain 3-Wolf Howl Short Sleeve T-Shirt, as an example. Pretend you run Amazon’s web development team for a minute. Work with me here.
First, map each piece of information on your page to a property per Google’s specification:
- Item: the Mountain 3-Wolf Howl Short Sleeve T-Shirt
- Rating: 4 stars out of 5 stars
- Reviewer: Matthew Gratt
- Date Reviewed: 10/21/2010
- Description: First thing I noticed: the print wasn’t just a picture, it was alive. One wolf’s caribou flesh breath was warming the air around me and the moonlight illuminated the buttons on my sweet Lee overalls. I wasn’t even wearing overalls before that. Second thing: I got completely naked and put it on and almost immediately I felt more in touch with the galaxy. Maybe even the whole universe. All of my senses were heightened. I could smell my sister’s grape jelly sandals downstairs and I could hear her hermit crabs peeing all over the place. All of my back fat melted away and became trouble-free forearm and wrist fat. There was a deep voice coming from heaven, and it was like “Yeah. You’re in charge now.” So I started heart-punching rabbits and I said to hell with vegetables, ALL vegetables whatsoever.
- Summary: Great shirt for self-defense, but somewhat cold in the winter.
Here it is, coded up using Microformats:
<div class="hreview">
<span class="item">
<span class="fn">Mountain 3-Wolf Howl Short Sleeve T-Shirt</span> </span>
Reviewed by <span class="reviewer">Matt Gratt</span> on
<span class="dtreviewed">Oct 21<span title="2010-10-21"></span></span>.
<span class="summary"> Great shirt for self-defense, but somewhat cold in the winter.</span>
<span class="description"> First thing I noticed: the print wasn't just a picture, it was alive. One wolf's caribou flesh breath was warming the air around me and the moonlight illuminated the buttons on my sweet Lee overalls. I wasn't even wearing overalls before that. Second thing: I got completely naked and put it on and almost immediately I felt more in touch with the galaxy. Maybe even the whole universe. All of my senses were heightened. I could smell my sister's grape jelly sandals downstairs and I could hear her hermit crabs peeing all over the place. All of my back fat melted away and became trouble-free forearm and wrist fat. There was a deep voice coming from heaven, and it was like "Yeah. You're in charge now." So I started heart-punching rabbits and I said to hell with vegetables, ALL vegetables whatsoever.</span>
Rating: <span class="rating">4</span>
</div>
That’s not a lot of code – just a few spans with classes attached, and you’re all set.
Save that to your web page, and the next time Google crawls your page, it’ll pick up the marked-up information. It can take some time for the rich snippet to appear, though. Google says to wait as much as a month before you worry.
Testing rich snippets
Waitaminute, you say, if it’s going to take a month for the snippets to appear, how will I know if I did it right? Someone thought of that.
Google has created the Rich Snippet Testing Tool so you can ensure you’ve implemented the semantic markup correctly. Use this tool to test your code once you’ve updated your pages. Once they’re working, you should use the Rich Snippets Interest Form to indicate further interest in Rich Snippets, and to get Rich Snippets to appear for your site.
Rich snippet gotchas
- Don’t use hidden text. Mark up text that already exists on the page. Cloaking is still against the Google Webmaster Guidelines.
- It’s easy to mix up CSS classes with some of the microdata/microformat classes. Be aware of this if you’ve suddenly radically changed the appearance of your pages while implementing rich snippets.
Other resources
You can find code examples for all rich snippet types in Google’s Help Area for Rich Snippets in Webmaster Tools.
You can also find some great examples on the Microformats.org web site.