google-rich-snippets-examples

Jump to: navigation, search

Contents

intro

On 2009-05-12, Google launched a "rich snippets" feature in their search engine which shows extra information in their search results based on information indexed from hCard, hReview, hReview aggregate, and hProduct. As part of that launch Google documented their support with microformats markup examples. This page documents those examples with corrections and improvements (in the hopes that Google will incorporate the fixes).

Reviews

Reviews Example Microformat

Google review example 2009-05-12

Google example on 2009-05-12 from http://google.com/support/webmasters/bin/answer.py?answer=146645

<div class="hReview">
   <span class="item">
     <span class="fn">L'Amourita Pizza</span>
   </span>
   <span class="rating">3.5</span>
   <span class="reviewer">Ulysses Grant</div>
   <span class="dtreviewed">2009-01-06</span>
   <span class="summary">"Delicious, tasty pizza in Eastlake."</span>
</div>

review example corrected

<div class="hreview">
   <span class="item">
     <span class="fn">L'Amourita Pizza</span>
   </span>
   <span class="rating">3.5</span>
   <span class="reviewer">Ulysses Grant</span>
   <span class="dtreviewed">2009-01-06</span>
   <span class="summary">"Delicious, tasty pizza in Eastlake."</span>
</div>

Common mistakes noted:

more information review example

This example demonstrates additional features of hReview with hCard that provides the same features and functionality as the second RDFa example, with visible data (e.g. category property, hyperlink for reviewer URL) rather than invisible metadata ('typeof' attribute, 'about' attribute).

"You can use the additional expressiveness of hReview with hCard to provide more information about the subject of your review."

<span class="hreview">
   <span class="item vcard">
      <span class="fn org">Komala Vilas</span>
      (<span class="category">Restaurant</span>)
   </span>
   <span class="reviewer vcard">
      <a class="fn url" href="http://example.com/person/meenakshi_ammal"> 
        Meenakshi Ammal
      </a>
   </span>
   <span class="rating">3.7</span>
   <span class="dtreviewed">2005-04-01</span>
   <span class="summary">Best south Indian vegetarian food in the bay area</span>
</span>

Aggregated Review Example Microformats

Google review example 2008-05-12

Google example on 2008-05-12 from http://google.com/support/webmasters/bin/answer.py?answer=146645

<div class="hReview-aggregate">
   <div class="item">
      <span class="fn">L'Amourita Pizza</span>
   </div>
   <div class="rating">
      <span class="average">4.4</span>
   </div> 
   <span class="count">1,313</span>
</div>

aggregated review example corrected

<div class="hreview-aggregate">
   <div class="item">
      <span class="fn">L'Amourita Pizza</span>
   </div>
   <div class="rating">
      <span class="average">4.4</span>
   </div> 
   <span class="count">1313</span>
</div>

Common mistakes noted:

People

People Example Microformat XFN

Google people example 2008-05-12

Google example on 2008-05-12 from from http://google.com/support/webmasters/bin/answer.py?answer=146646

<div class="vcard">
   <div class="fn">John Smith</div>
   <span class="nickname">Smithy</span>
   <span class="url">http://www.example.com</span>
   <span class="org">ACME</span>
   <span class="adr">
     <span class="locality">Albuquerque</span>
   </span>
   <span class="title">Engineer</span>
   <a href="http://darryl-blog.example.com/" rel="friend">Darryl</a>
</div>
Note: We'll also accept class="friend". The friend property is imported from XFN.

people example improved

No actual problems were found in the Google people example code from 2008-05-12, however a few improvements can be made:

And the prose comment following the example is flawed however, as XFN only defines rel values, not class values, thus class="friend" is invalid and should not be explicitly supported.

<div class="vcard">
   <a class="fn url" rel="me" href="http://john-smith.example.com/">
    John Smith
   </a>
   "<span class="nickname">Smithy</span>"
   <span class="url"></span>
   <span class="org">ACME</span>
   <span class="adr">
     <span class="locality">Albuquerque</span>
   </span>
   <span class="title">Engineer</span>
   <a href="http://darryl-blog.example.com/" rel="friend">Darryl</a>
</div>
Note: The rel values of "me" and "friend" are both from XFN.

more information people example

For the structured data geeks out there, you can also use hCard's ability to express additional structure using nesting.

<div class="vcard">
   <a class="fn url" rel="me" href="http://john-smith.example.com/">
    John Smith
   </a>
   <span class="nickname">Smithy</span>
   <span class="org vcard">
      <a class="fn org url" href="http://en.wikipedia.org/wiki/Acme_Corporation">
       ACME
      </a>
   </span>
   <span class="adr">
     <span class="locality">Albuquerque</span>
   </span>
   <span class="title">Engineer</span>
   <span class="vcard">
     <a class="fn url" href="http://darryl-blog.example.com/" rel="friend">
      Darryl
     </a> 
   </span>
</div>


Products

Products Example Microformats

Google product example 2009-05-12

Google example on 2009-05-12 from from http://google.com/support/webmasters/bin/answer.py?answer=146750

<div class="hProduct">
   <span class="brand">ACME</span>
   <span class="category">Heavy objects</span>
   <span class="fn">Large all-purpose anvil</span>
   <span class="description">If you need an object to drop from a height, the classic 
A23859 anvil from ACME is the way to go.</span>
   <span class="url">http://anvil.example.com</span>
</div>

product example corrected

<div class="hproduct">
   <span class="brand">ACME</span>
   <span class="category">Heavy objects</span>
   <span class="fn">Large all-purpose anvil</span>
   <span class="description">
     If you need an object to drop from a height, the classic 
     A23859 anvil from ACME is the way to go.</span>
   <span class="url">http://anvil.example.com</span>
</div>

Common mistakes noted:

Businesses and organizations

Business Example Microformats

Google business example 2009-05-12

Google example on 2009-05-12 from http://google.com/support/webmasters/bin/answer.py?answer=146861

<div class="vcard">
   <span class="fn org">L'Amourita Pizza</span>
   <span class="tel">(206) 555-7242</span>
   <div class="adr">
     <span class="street-address">2040 Any Street</span>
     <span class="locality">Springfield</span>
     <span class="region">WA</span>
     <span class="postal-code">98102</span>
   </div>
</div>

This example has no known problems.

About microformats

Marking up data using microformats

Google hCard example 2009-05-12

Google example on 2009-05-12 from http://google.com/support/webmasters/bin/answer.py?answer=146897

<div class="vcard">
   <img class="photo" src="www.example.com/bobsmith.jpg" /><p>
   <p><strong class="fn">Bob Smith</strong></p>
   <p><span class="title">Senior editor</span> at <span class="org">ACME Reviews</span></p>
   <p><span class="adr">
      <span class="street-address">200 Main St</span><br>
      <span class="locality">Desertville</span>, <span class="region">AZ</span> 
      <span class="postcode">12345</span></p>
   </span>
</div>

hCard example corrected

<div class="vcard">
   <img class="photo" src="http://www.example.com/bobsmith.jpg" alt="Photo of Bob">
   <p><strong class="fn">Bob Smith</strong></p>
   <p><span class="title">Senior editor</span> at <span class="org">ACME Reviews</span></p>
   <p class="adr">
       <span class="street-address">200 Main St</span><br>
       <span class="locality">Desertville</span>, <span class="region">AZ</span> 
       <span class="postcode">12345</span>
   </p>
</div>

Common mistakes noted:

Nested microformats example

Google nested example 2009-05-12

Google example on 2009-05-12 from http://google.com/support/webmasters/bin/answer.py?answer=146897

<div class="hreview">
   <p><span class="item"><strong>Blast 'Em Up Review</strong></span></p>
   <p>by <span class="reviewer vcard">
      <p>by <span class="fn">Bob Smith</span>, <span class="title">Senior Editor</span> 
      at <span class="org">ACME Reviews</span>
   </span><p>
   <p><span class="description">This is a great game. I enjoyed it from the 
   opening battle to the final showdown with the evil aliens.</span></p>
   <p><span class="rating">4.5</span></p>
</div>

nested example corrected

<div class="hreview">
   <p><span class="item">
        <strong class="fn">Blast 'Em Up Review</strong></span>
   </p>
   <p>by <span class="reviewer vcard">
      <span class="fn">Bob Smith</span>, 
      <span class="title">Senior Editor</span> 
      at <span class="org">ACME Reviews</span>
   </span><p>
   <p><span class="description">This is a great game. I enjoyed it from the 
   opening battle to the final showdown with the evil aliens.</span></p>
   <p><span class="rating">4.5</span></p>
</div>

Common mistakes noted:

common mistakes

These mistakes were noted from the Google examples but have nearly all been seen in examples of documentation or markup on other sites as well. Some of these items should be incorporated into debugging-tools such as the Optimus microformats validator. This section could probably be moved to its own article. Tantek 08:48, 19 May 2009 (UTC)

English mistakes

HTML mistakes

microformats class name mistakes

microformats property value mistakes


implied feedback on microformats

From analyzing the examples provided by Google, the following improvements could be made to microformats. These should be recorded additionally in hreview-issues + hreview-aggregate-issues, resolved accordingly and incorporated into the specification pages.

see also

google-rich-snippets-examples was last modified: Monday, June 14th, 2010

Views