Blog

What Are Rich Snippets?

What Are Rich Snippets?

Rich snippets are a way to tell the search engines more about your web pages.  They’re pieces of code that you put on to your website to communicate additional details about certain types of things on the internet.

In particular, standards have been set for:

Google accepts different types of markup in the code for rich snippets, but you probably want to use the markup from schema.org, as it was agreed upon as a standard by Google, Bing and Yahoo.

Rich Snippets Make a Difference in Search Results

Let’s look at an example for a product.  Normally, a search result looks like this:
product without rich snippets

Compare that to a search result with rich snippets:
product result with rich snippet

As you can see from the listing with rich snippets, it shows additional info:

  • rating
  • number of reviews
  • price
  • in stock

It also shows the URL a little differently.  It uses breadcrumbs instead of a URL, which allows you to go to different pages based on what you click on.  “Perfumes & Fragrances” will take you to that section of the site, while “Gift Sets” will take you to that page.

The rich snippets increase the likelihood someone will click on the search result by giving them additional details of the product, as well as giving them more options to click on.  For example, the viewer may not like the price if this particular search result, but they want to see what else Overstock has in their Perfume Department.

How Do I Add Rich Snippets to My Site?

To add rich snippets to your site, you have to add code from schema.org on the relevant pages. For product pages, you would use add the code from the Product schema.  The schema pages have good examples of where to add the code, but what you essentially do is add <div> and <span> tags on your pages which don’t impact anything visible on the page, but do tell the search engines additional details for these pages.

First you tell the code what kind of schema it is by indicating a “itemType”, and then you tell it the properties of the item with the “itemProp” tag surrounding the value of the property.

Here’s an example from schema.org:

Original Code-

Kenmore White 17″ Microwave
<img src=”kenmore-microwave-17in.jpg” alt=’Kenmore 17″ Microwave’ />
Rated 3.5/5 based on 11 customer reviews

$55.00
In stock

Product description:
0.7 cubic feet countertop microwave. Has six preset cooking categories and
convenience features like Add-A-Minute and Child Lock.

With the addition of tags for rich snippets (new code in blue):

<div itemscope itemtype=”http://schema.org/Product”>
<span itemprop=”name”>Kenmore White 17″ Microwave</span>
<img src=”kenmore-microwave-17in.jpg” alt=’Kenmore 17″ Microwave’ />
  <div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
Rated <span itemprop=”ratingValue”>3.5</span>/5
based on <span itemprop=”reviewCount”>11</span> customer reviews
</div>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>
<span itemprop=”price”>$55.00</span>
<link itemprop=”availability” href=”http://schema.org/InStock” />In stock
  </div>

Product description:
  <span itemprop=”description”>
0.7 cubic feet countertop microwave.  Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.
</span>
</div>

Ahead of the Curve

The nice part about rich snippets is that even though they have been around for a few years, not a lot of people are using them.  If you have reviews, people, products, recipes, events or music on your site, you could gain a competitive advantage by implementing rich snippets.  The listings stand out in search results and could serve as a nice boost to your traffic and search rankings.

Get a Free Web Consultation

We'll analyze your website and provide you recommendations on how to increase your online sales and leads for free.