google-rich-snippets-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m (fix heading levels on common mistakes and implied microformats feedback)
Line 49: Line 49:
<span class="hreview">
<span class="hreview">
   <span class="item vcard">
   <span class="item vcard">
       <span class="fn">Komala Vilas</span>
       <span class="fn org">Komala Vilas</span>
       (<span class="category">Restaurant</span>)
       (<span class="category">Restaurant</span>)
   </span>
   </span>

Revision as of 17:09, 19 May 2009

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:

  • non-wellformed (invalid) (X)HTML. e.g. used to close
  • root class name miscapitalized. e.g. wrong: hReview. right: hreview.

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="dtreviewd">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:

  • class name miscapitalized. e.g. wrong: hReview-aggregate. right: hreview-aggregate.
  • numerical values should not include any locale-specific digit grouping (e.g. "," after thousands digit)

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:

  • Hyperlink names for more typical and concise market. In practice, names of people are often hyperlinked to the pages that represent them.
  • Links to a user's home page should also be hyperlinked with rel="me":

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:

  • root class name miscapitalized. e.g. wrong: hProduct. right: hproduct.

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><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>
      </span>
   </p>
</div>

Common mistakes noted:

  • misordered close tags (invalid) in (X)HTML. e.g. <p><span>...</p></span> instead of <p><span>...</span></p>
  • unecessary empty paragraph element. e.g. <p><p>...</p> instead of simply <p>...</p>
  • <img> tag missing alt attribute.
  • mixed use of XHTML and HTML4 empty elements. e.g. using both <img ... /> and <br>.

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:

  • duplicated words. e.g. "by by"
  • disallowed (X)HTML nesting, e.g. putting a <p> inside a <span>

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

  • duplicated words. e.g. "by by" or "the the", often across a line break or in two adjacent or parent/first-child elements.

HTML mistakes

  • non-wellformed (invalid) (X)HTML. e.g. used to close
    • caught by W3C Validator
  • misordered close tags (invalid) in (X)HTML. e.g. <p><span>...</p></span> instead of <p><span>...</span></p>
    • caught by W3C Validator
  • disallowed (X)HTML nesting, e.g. putting a <p> inside a <span>
    • caught by W3C Validator
  • <img> tag missing alt attribute.
    • caught by W3C Validator
  • mixed use of XHTML and HTML4 empty elements. e.g. using both <img ... /> and <br>.
    • might be caught by HTML validator - results depend on DOCTYPE used.
  • unecessary empty paragraph element. e.g. <p><p>...</p> instead of simply <p>...</p>
    • warning provided by HTML validator
  • missing http in URL attribute value. e.g. www.example.com instead of http://www.example.com
    • could be caught by an HTML validator that checked for unlikely relative URL starting with "www." with directory name ending in ".com".

microformats class name mistakes

  • class name miscapitalized. e.g. wrong: hReview hReview-aggregate. right: hreview hreview-aggregate.
    • microformats class names are always all lower case, (apparent) words separated with dash characters, e.g. "family-name", per Semantic XHTML naming principles.
    • TODO Optimus: this is probably worth adding to Optimus - to check for mis-capitalized microformats root and property class names.

microformats property value mistakes

  • integer values with punctuation. numerical values should not include any locale-specific digit grouping (e.g. "," after thousands digit)
    • TODO Optimus: Optimus could also validate the values of numeric properties


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.

  • Even simpler is better. In the common case where the entirety of the "item" of an hReview (or hReview aggregate) is its "fn", then perhaps the "fn" subproperty markup could be omitted, e.g.:
    • interpret <span class="item">L'Amourita Pizza</span> as:
    • <span class="item"><span class="fn">L'Amourita Pizza</span></span>
  • Permit human friendlier values when possible. In some cases the type of a property is sufficiently constrained as to permit the use of punctuation that makes the values more human readable, better matching existing content. e.g. for the count property which is a whole number:
    • interpret <span class="count">1,313</span>
    • or <span class="count">1.313</span>
    • as <span class="count">1313</span>

see also

Retrieved from "http://microformats.org/wiki/index.php?title=google-rich-snippets-examples&oldid=38765"