It is becoming increasingly more apparent that web sites need to leverage rich snippets to help quantify and describe their data for the major search engines. All of our database driven applications typically start with well defined and structured data, and when we format that data into an HTML page it becomes increasingly difficult to recover the original structure. Rich snippets are an attempt to help provide structure to the data in a format that the search engines can understand and define.
There are actually three markup formats that can be chosen to provide rich snippet functionality, they are:
- Microdata (Recommended)
- Microformats
- RDFa
Google, Bing, and Yahoo! and the other search engines recommend using microdata to provide rich snippet functionality. In addition, they all came together to create a shared markup vocabulary that they can understand and to make it easier for webmasters to decide on a markup schema and get the most from their efforts. That shared vocabulary is known as Schema.org.
This short, hopefully informative guide will help get you up to speed on marking up your web site with Schema.org, so that you can start helping search engines understand the structure of your web site’s data.
To implement this rich snippet markup using Schema.org no special knowledge is needed, just a basic knowledge of HTML. All of your rich snippets are added directly into your HTML pages and tags.
Let’s start with an example, of a product review, in some existing HTML code.
<div>
<div>I love this treadmill!</div>
<div>by Drew Harvey on May 2, 2012</div>
<div>Rating: 4.5 / 5</div>
<div>I wasn't expecting much when I bought this treadmill, as it seemed like it was too good to be true; however, I found that as I used it I lost weight, felt better, and was healthier. I would recommend this treadmill to anyone looking for one.</div>
</div>
First, you need to identify the itemscope and the itemtype. The itemscope is the section of page that is ‘about’ the content you’re currently working with. This is the outer most block of its location in your HTML code. With our example, its location is shown below.
<div itemscope>
<div>I love this treadmill!</div>
<div>by Drew Harvey on May 2, 2012</div>
<div>Rating: 4.5 / 5</div>
<div>I wasn't expecting much when I bought this treadmill, as it seemed like it was too good to be true; however, I found that as I used it I lost weight, felt better, and was healthier. I would recommend this treadmill to anyone looking for one.</div>
</div>
By adding itemscope you’re basically saying the information contained in that block is about a particular item, and while it’s nice to know that we’re talking about a particular item, its also important to know what kind of an item it is that we’re talking about. By adding the itemtype attribute immediately after the itemscope, we can specify the type of item we’re working with.
<div itemscope itemtype="http://schema.org/Review">
<div>I love this treadmill!</div>
<div>by Drew Harvey on May 2, 2012</div>
<div>Rating: 4.5 / 5</div>
<div>I wasn't expecting much when I bought this treadmill, as it seemed like it was too good to be true; however, I found that as I used it I lost weight, felt better, and was healthier. I would recommend this treadmill to anyone looking for one.</div>
</div>
Now that we’ve determined what kind of a item we’re working with we can begin to add properties specific to that item to our markup. To label specific properties of an item, you’ll need to use the itemprop attribute. The itemprop attributes that are applicable to your item can be found within the markup’s definition. As we’re working with a Review itemtype, we can find the list of applicable itemprop attributes at http://www.schema.org/Review.
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="name">I love this treadmill!</div>
<div>by <span itemprop="author">Drew Harvey</span> on <span itemprop="datePublished" content="2012-05-02">May 2, 2012</span></div>
<div>Rating: 4.5 / 5</div>
<div itemprop="description">I wasn't expecting much when I bought this treadmill, as it seemed like it was too good to be true; however, I found that as I used it I lost weight, felt better, and was healthier. I would recommend this treadmill to anyone looking for one.</div>
</div>
It is important to note that you can also embed child itemscope and itemtype attributes into your previously defined itemscope. For instance, in our Review itemscope, we have an reviewRating itemprop that takes a Rating itemscope attribute as its value.
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="name">I love this treadmill!</div>
<div>by <span itemprop="author">Drew Harvey</span> on <span itemprop="datePublished" content="2012-05-02">May 2, 2012</span></div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">Rating: <span itemprop="ratingValue">4.5</span> / <span itemprop="bestRating">5</span></div>
<div itemprop="description">I wasn't expecting much when I bought this treadmill, as it seemed like it was too good to be true; however, I found that as I used it I lost weight, felt better, and was healthier. I would recommend this treadmill to anyone looking for one.</div>
</div>
If you want to add an element that doesn’t exist by default in your source or is generally hidden, you can still add it by using a meta element. Take for example the worstRating property in the Rating itemscope. By specifying you can add the worst rating property and value to the markup without having to display it on your page.
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="name">I love this treadmill!</div>
<div>by <span itemprop="author">Drew Harvey</span> on <span itemprop="datePublished" content="2012-05-02">May 2, 2012</span></div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="0.5">
Rating: <span itemprop="ratingValue">4.5</span> / <span itemprop="bestRating">5</span>
</div>
<div itemprop="description">I wasn't expecting much when I bought this treadmill, as it seemed like it was too good to be true; however, I found that as I used it I lost weight, felt better, and was healthier. I would recommend this treadmill to anyone looking for one.</div>
</div>
And there you go, you’re now implementing rich snippets on your web site. To view all available itemtypes available to markup your code, and for further detail on using these definitions please visit Schema.org.
Once you have implemented your rich snippets you can validate them with Google’s Rich Snippets Testing Tool.
** I would also like to encourage you to comment on this post. Please let me know what you found helpful, informative, or what I could have improved upon in my examples. Basically, I’d love some feedback! **
