Enrich your website with Rich Snippets

Why?

For details see the Google info page.

One nice effect is the rating (displayed as yellow stars) in the search result:

Microformat, Microdata, RDFa, …?

Many new formats, many different styles.
There are so many because they have been developed independently for many years.

Microdata (the "HTML5" way)
event, organization, person, product, review(aggregate), offer(aggregate), rating, address, geo, breadcrumb

Example:

<div itemscope itemtype="http://data-vocabulary.org/Review">
    <span itemprop="itemreviewed">L’Amourita Pizza</span>
    Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
    <time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
    <span itemprop="summary">Delicious, tasty pizza in Eastlake!</span>
    <span itemprop="description">L'Amourita serves up traditional wood-fired Neapolitan-style pizza, 
      brought to your table promptly and without fuss. An ideal neighborhood pizza joint.</span>
    Rating: <span itemprop="rating">4.5</span>
  </div>

This is the Google standard and already well implemented. I like the syntax and the clear structure.
I like to use it for products, ratings and reviews. This way it can easily be integrated into the Google search results.

It has one small bug, though. Prices will have to entered in the local language (not as documented as 0.xx). E.g. in German it is "0,xx". Ugly – but OK for right now (if you know it)…

Their breadcrumb snippet is noteworthy by the way. It will also show in the Google results.

And "data-vocabulary.org" is also from Google 🙂 In case someone wondered.

Microformat
hCard, hCalender, hMedia, hAudio, hGeo, hAdr, hNews, …

Example:

<div class="vcalendar">
<span class="vevent">
 <span class="summary">The microformats.org site was launched</span>
 on <span class="dtstart">2005-06-20</span> 
 at the Supernova Conference 
 in <span class="location">San Francisco, CA, USA</span>.
</span>
</div>

I dislike the microformat because it miss-used class attributes (which are usually used for css and js dom access) for its own purposes. But right now, it supports a few more rich snippets. So it might be useful in some areas as long as the other standards lack those. So I use it for calendars and contact cards, address and geo data as well as some media snippets.

Interesting: hCard’s class attribute is "vcard" and hCalender’s is "vCalendar (and "vevent"). This is not a spelling mistake. Other formats’ class names usually stay the same or simply omit the h.

RDFa
It bloats the source code of the html due to the namespaces. It is not as flexible as the Google markup and needs a modification in the <html> tag. So I disregard it at the moment.
Originally proposed by the W3C it is still not very popular I suppose.

Others
eRDF (an alternative to RDFa), GRDDL

Last remarks

Especially Google claims to only respect visible content. So instead of adding boxes with ‘display="none"’ containing rich content you should simply add the attributes to the already visible markup.

I use – for example – a helper to take care of special cases and the namespaces:

<div class="box" <?php echo $this->DataVocabulary->scopeProduct();?>>

<h1><span <?php echo $this->DataVocabulary->propBrand();?>><?php echo $product['Brand']['name'];?></span> <span <?php echo $this->DataVocabulary->propName();?>><?php echo $product['Product']['name']; ?></span></h1>
<?php echo $this->DataVocabulary->meta('category', 'Game');?>

<div class="box_s" <?php echo $this->DataVocabulary->propOffer(false);?>>
<span <?php echo $this->DataVocabulary->propPrice($product['Product']['price']);?>><?php echo number_format($product['Product']['price'], $accuracy');?></span> <span <?php echo $this->DataVocabulary->propCurrency('EUR');?>>€</span>
</div>
...
</div>

Using Microdata and "Product" + "Offer"

To test the outcome of your snippet and how google search might display it, use the Rich Snippets Testing Tool. It will also show errors and bugs (like the price problem described above).

3.50 avg. rating (75% score) - 2 votes

1 Comment

  1. Great info. I found your site when searching for how Google treats hidden content with rich snippets. Since they only honor the rich snippets that are within visible code, that could cause a problem for people that do fancy things with their reviews like put them in javascript and allow for paging through reviews. They could put the reviews in simplet HTML in a hidden div but Google won’t use those even though they are legitimately visible to users. I guess it’s a tradeoff but they make but I won’t be able to do what I was planning.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.