Using Rich Snippets

In the increasingly crowded Internet world, webmasters need to use all the tools at their disposal to rise above the competition.  One way to do that is to use rich snippets; that is, the searcher gets a little snippet of your content.  This has been shown to increase click-through rates and has been a great tool for a variety of sites, particularly for local SEOs.  Do you need to be a developer or know HTML code in order to insert rich snippets?  While it certainly couldn’t hurt, you really just need time, patience, and Schema.org.

Schema.org is a repository of HTML tags with which webmasters can markup their text.  This is like highlighting it so Google, Bing, and Yahoo can index and display relevant data on the SERPs.  Many times, reviews, ratings, snippets of recipes, or local business’s addresses or contact information is highlighted.  A recipe site will typically have, for instance, the name of the dish, a photo, prep/cook time, and oftentimes a star rating.  Schema offers over 100 different markup types so you can categorize your data accurately and help visitors find you.

So how do you produce those snippets that searchers will see?  This is where Schema’s vocabulary comes in.  So let’s use our recipe example.  You want your rich snippet to include the information that it is a recipe, the name of the dish, the contributor, publish date, image, and description.  You can mark up other text, but let’s start with this.

In regular HTML, your recipe would look like this:

<div>

<h1>artichoke dip</h1>

<img src=”artichoke-dip.jpg”/>

By Bill Smith

Published: September 25, 2011

This is a great dip for parties.  Easy to make and even easier to eat, it is creamy, hot, and delicious.

Great with chips, bread, or veggies.

5.0  stars based on 100 reviews
That’s basic, with coding only necessary to indicate the heading <h1> and image <img>.  Here is the markup for a rich snippet:

<div itemscope itemtype=http://www.xys.uk/Recipe”>

<h1 itemprop=”name”>Artichoke Dip</h1>

<img src=”artichoke-dip.jpg” itemprop=”photo”/>

By <span itemprop=”author”<Bill Smith</span>

Published: <time itemprop=”published” datetime=”2011-09-25”>September 25, 2011</time>

<span itemprop=”summary”>This is a great dip for parties.  Easy to make and even easier to eat, it is creamy, hot, and delicious.  Great with chips, bread, or veggies.</span>

<span itemprop=”review” itemscope itemtype=”http://www.xys.uk/Recipe/Review-aggregate”>

<span itempropr=”rating”>5.0</span> stars based on

<span itemprop=”count”>100</span> reviews

All that work?  But it is worth it because of the snippet that will appear and highlight your content. Hopefully, readers will be enticed by your artichoke dip.  Once you get the basic idea and are more familiar with how the markup works, it goes faster.  And to help you until you are a Schema pro, Google has a testing tool that allows you to see how your snippets look and there is a Troubleshooting page that can help as well.

Rich snippets are expected to play an increasingly important role in the coming year.  Be ready and happy marking.