google-rich-snippets-examples - Revision history

Tantek: Reverted edits by Vsimon213 (Talk) to last version by Tantek

2010-06-14T15:57:04Z

Reverted edits by Vsimon213 (Talk) to last version by Tantek

← Older revision		Revision as of 15:57, 14 June 2010
Line 372:		Line 372:
	* [[search-engines]]		* [[search-engines]]
	* [[implementations]]		* [[implementations]]
	* [http://www.freesampleagent.com/'''free samples''']

Vsimon213 at 04:03, 14 June 2010

2010-06-14T04:03:51Z

← Older revision		Revision as of 04:03, 14 June 2010
Line 372:		Line 372:
	* [[search-engines]]		* [[search-engines]]
	* [[implementations]]		* [[implementations]]
			* [http://www.freesampleagent.com/'''free samples''']

Tantek: /* more information review example */ typo

2009-08-12T05:36:12Z

more information review example: typo

← Older revision		Revision as of 05:36, 12 August 2009
Line 58:		Line 58:
	</span>		</span>
	<span class="rating">3.7</span>		<span class="rating">3.7</span>
	<span class="~~dtreviewd~~">2005-04-01</span>		<span class="dtreviewed">2005-04-01</span>
	<span class="summary">Best south Indian vegetarian food in the bay area</span>		<span class="summary">Best south Indian vegetarian food in the bay area</span>
	</span>		</span>

Adactio: /* removing a superfluous span from Google's example */

2009-05-19T17:17:11Z

removing a superfluous span from Google's example

← Older revision		Revision as of 17:17, 19 May 2009
Line 267:		Line 267:
	<p><strong class="fn">Bob Smith</strong></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="title">Senior editor</span> at <span class="org">ACME Reviews</span></p>
	<p~~><span~~ class="adr">		<p class="adr">
	<span class="street-address">200 Main St</span><br>		<span class="street-address">200 Main St</span><br>
	<span class="locality">Desertville</span>, <span class="region">AZ</span>		<span class="locality">Desertville</span>, <span class="region">AZ</span>
	<span class="postcode">12345</span>		<span class="postcode">12345</span>
	~~</span>~~
	</p>		</p>
	</div>		</div>
Line 281:		Line 280:
	* <code><img></code> tag missing <code>alt</code> attribute.		* <code><img></code> tag missing <code>alt</code> attribute.
	* mixed use of XHTML and HTML4 empty elements. e.g. using both <code><img ... /></code> and <code><br></code>.		* mixed use of XHTML and HTML4 empty elements. e.g. using both <code><img ... /></code> and <code><br></code>.
			* Instead of using an extra <code>span</code> element to wrap <code>adr</code>, the class can simply be put on the containing paragraph element.

	=== Nested microformats example ===		=== Nested microformats example ===

Adactio: /* adding org to the same element as fn */

2009-05-19T17:09:49Z

adding org to the same element as fn

← Older revision		Revision as of 17:09, 19 May 2009
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>

Tantek: fix heading levels on common mistakes and implied microformats feedback

2009-05-19T17:04:16Z

fix heading levels on common mistakes and implied microformats feedback

← Older revision		Revision as of 17:04, 19 May 2009
Line 325:		Line 325:
	* disallowed (X)HTML nesting, e.g. putting a <code><p></code> inside a <code><span></code>		* disallowed (X)HTML nesting, e.g. putting a <code><p></code> inside a <code><span></code>

	==== common mistakes ====		== 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. [[User:Tantek\|Tantek]] 08:48, 19 May 2009 (UTC)		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. [[User:Tantek\|Tantek]] 08:48, 19 May 2009 (UTC)

	===== English mistakes =====		=== 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.		* '''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 =====		=== HTML mistakes ===
	* '''non-wellformed (invalid) (X)HTML.''' e.g. </div> used to close </span>		* '''non-wellformed (invalid) (X)HTML.''' e.g. </div> used to close </span>
	** caught by W3C Validator		** caught by W3C Validator
Line 346:		Line 346:
	* '''missing http in URL attribute value.''' e.g. <code>www.example.com</code> instead of <code>http://www.example.com</code>		* '''missing http in URL attribute value.''' e.g. <code>www.example.com</code> instead of <code>http://www.example.com</code>
	** could be caught by an HTML validator that checked for unlikely relative URL starting with "www." with directory name ending in ".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 =====
			=== microformats class name mistakes ===
	* '''class name miscapitalized.''' e.g. wrong: hReview hReview-aggregate. right: hreview hreview-aggregate.		* '''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.		** 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.		** TODO Optimus: this is probably worth adding to Optimus - to check for mis-capitalized microformats root and property class names.
	===== microformats property value mistakes =====
			=== microformats property value mistakes ===
	* '''integer values with punctuation.''' numerical values should not include any locale-specific digit grouping (e.g. "," after thousands digit)		* '''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		** TODO Optimus: Optimus could also validate the values of numeric properties


	==== implied feedback on microformats ====		== 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.		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.

Tantek: Google examples were published in 2009, not 2008 duh.

2009-05-19T08:52:04Z

Google examples were published in 2009, not 2008 duh.

← Older revision		Revision as of 08:52, 19 May 2009
Line 4:		Line 4:
	== Reviews ==		== Reviews ==
	=== Reviews Example Microformat ===		=== Reviews Example Microformat ===
	==== Google review example ~~2008~~-05-12 ====		==== Google review example 2009-05-12 ====
	Google example on ~~2008~~-05-12 from http://google.com/support/webmasters/bin/answer.py?answer=146645		Google example on 2009-05-12 from http://google.com/support/webmasters/bin/answer.py?answer=146645

	<div style="border:2px dashed red;display:inline-block">		<div style="border:2px dashed red;display:inline-block">
Line 182:		Line 182:
	== Products ==		== Products ==
	=== Products Example Microformats ===		=== Products Example Microformats ===
	==== Google product example ~~2008~~-05-12 ====		==== Google product example 2009-05-12 ====
	Google example on ~~2008~~-05-12 from		Google example on 2009-05-12 from
	from http://google.com/support/webmasters/bin/answer.py?answer=146750		from http://google.com/support/webmasters/bin/answer.py?answer=146750

Line 220:		Line 220:
	== Businesses and organizations ==		== Businesses and organizations ==
	=== Business Example Microformats ===		=== Business Example Microformats ===
	==== Google business example ~~2008~~-05-12 ====		==== Google business example 2009-05-12 ====
	Google example on ~~2008~~-05-12 from		Google example on 2009-05-12 from
	http://google.com/support/webmasters/bin/answer.py?answer=146861		http://google.com/support/webmasters/bin/answer.py?answer=146861

Line 241:		Line 241:
	== About microformats ==		== About microformats ==
	=== Marking up data using microformats ===		=== Marking up data using microformats ===
	==== Google hCard example ~~2008~~-05-12 ====		==== Google hCard example 2009-05-12 ====
	Google example on ~~2008~~-05-12 from		Google example on 2009-05-12 from
	http://google.com/support/webmasters/bin/answer.py?answer=146897		http://google.com/support/webmasters/bin/answer.py?answer=146897

Line 283:		Line 283:

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

	<div style="border:2px dashed red;display:inline-block">		<div style="border:2px dashed red;display:inline-block">

Tantek: drafted - phew!

2009-05-19T08:48:23Z

drafted - phew!

New page

== intro ==
On 2009-05-12, Google launched a "rich snippets" feature in [[google-search|their search engine]] which shows extra information in their search results based on information indexed from [[hCard]], [[hReview]], [[hreview-aggregate|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 2008-05-12 ====
Google example on 2008-05-12 from http://google.com/support/webmasters/bin/answer.py?answer=146645

<div style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== review example corrected ====

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

Common mistakes noted:
* non-wellformed (invalid) (X)HTML. e.g. </div> used to close </span>
* 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. <code>category</code> 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."

<source lang=html4strict>
<span class="hreview">
<span class="item vcard">
<span class="fn">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>
</source>

=== 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 style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== aggregated review example corrected ====

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
</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 style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
<blockquote>
Note: We'll also accept class="friend". The friend property is imported from XFN.
</blockquote>
</div>

==== people example improved ====
No actual problems were found in the Google people example <em>code</em> 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 <code>rel</code> values, not <code>class</code> values, thus class="friend" is invalid and should not be explicitly supported.

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
<blockquote>
Note: The rel values of "me" and "friend" are both from [[XFN]].
</blockquote>
</div>

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

<source lang=html4strict>
<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>
</source>

== Products ==
=== Products Example Microformats ===
==== Google product example 2008-05-12 ====
Google example on 2008-05-12 from
from http://google.com/support/webmasters/bin/answer.py?answer=146750

<div style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== product example corrected ====

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

Common mistakes noted:
* root class name miscapitalized. e.g. wrong: hProduct. right: hproduct.

== Businesses and organizations ==
=== Business Example Microformats ===
==== Google business example 2008-05-12 ====
Google example on 2008-05-12 from
http://google.com/support/webmasters/bin/answer.py?answer=146861

<source lang=html4strict>
<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>
</source>

This example has no known problems.

== About microformats ==
=== Marking up data using microformats ===
==== Google hCard example 2008-05-12 ====
Google example on 2008-05-12 from
http://google.com/support/webmasters/bin/answer.py?answer=146897

<div style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== hCard example corrected ====
<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>
Common mistakes noted:
* misordered close tags (invalid) in (X)HTML. e.g. <code><nowiki><p><span>...</p></span></nowiki></code> instead of <code><nowiki><p><span>...</span></p></nowiki></code>
* unecessary empty paragraph element. e.g. <code><nowiki><p><p>...</p></nowiki></code> instead of simply <code><nowiki><p>...</p></nowiki></code>
* <code><img></code> tag missing <code>alt</code> attribute.
* mixed use of XHTML and HTML4 empty elements. e.g. using both <code><img ... /></code> and <code><br></code>.

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

<div style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== nested example corrected ====

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict style="background:EFE">
<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>
</source>
</div>

Common mistakes noted:
* duplicated words. e.g. "by by"
* disallowed (X)HTML nesting, e.g. putting a <code><p></code> inside a <code><span></code>

==== 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. [[User:Tantek|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. </div> used to close </span>
** caught by W3C Validator
* '''misordered close tags (invalid) in (X)HTML.''' e.g. <code><nowiki><p><span>...</p></span></nowiki></code> instead of <code><nowiki><p><span>...</span></p></nowiki></code>
** caught by W3C Validator
* '''disallowed (X)HTML nesting''', e.g. putting a <code><p></code> inside a <code><span></code>
** caught by W3C Validator
* '''<code><img></code> tag missing <code>alt</code> attribute.'''
** caught by W3C Validator
* '''mixed use of XHTML and HTML4 empty elements.''' e.g. using both <code><img ... /></code> and <code><br></code>.
** might be caught by HTML validator - results depend on DOCTYPE used.
* '''unecessary empty paragraph element.''' e.g. <code><nowiki><p><p>...</p></nowiki></code> instead of simply <code><nowiki><p>...</p></nowiki></code>
** warning provided by HTML validator
* '''missing http in URL attribute value.''' e.g. <code>www.example.com</code> instead of <code>http://www.example.com</code>
** 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 <code><nowiki><span class="item">L'Amourita Pizza</span></nowiki></code> as:
** <code><nowiki><span class="item"><span class="fn">L'Amourita Pizza</span></span></nowiki></code>
* '''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 <code>count</code> property which is a whole number:
** interpret <code><nowiki><span class="count">1,313</span></nowiki></code>
** or <code><nowiki><span class="count">1.313</span></nowiki></code>
** as <code><nowiki><span class="count">1313</span></nowiki></code>

== see also ==
* [[google-search]]
* [[search-engines]]
* [[implementations]]