Tags

,

Abstract

Rich Snippets are ways in which sites and pages can provide structured information that enables Google to provide more relevant search information to users. It doesn’t improve search ranking, but  is designed to give users a sense for what’s on the page and why it is relevant to their query when they see their listing.

The idea is that a restaurant might show average review and price range, a recipe page might show a photo, the total preparation time and review rating, a musical album page might list songs with links for previews.

It transpires that this is relatively straightforward to add to information on a site, and gives quite a lot of benefit quite quickly.

What is the point of  Microdata?

When people visit our web pages they easily understand the underlying meaning of the page through context and other mechanisms. Search engines find it much harder to understand the meaning of web pages. Microdata is a set of attributes or classes which can be added to web pages to give additional, specific, data which can help search engines and other applications to understand the content and display it in a useful way.

Getting Started

The first step is to pick a mark-up format. Google allows Microdata (its recommended format), and also supports Microformats and RDFa.

Microdata is part of HTML5 [1] and adds attributes to tags to assign brief, defined, descriptive names to provide semantic information. It is designed to be simpler than the other options. Microformats[2] are an open standard for assigning semantic information by adding classes. RDFa[3] (Resource Description Framework in attributes) is a W3C recommendation for a set of markup attributes to augment the visual information on the Web with machine-readable hints.

Google does supply a testing tool[4] which you can use to test your markup and identify any errors.

Google supports rich snippets for these content types

  • Reviews
  • People
  • Events
  • Products
  • Recipes
  • Music
  • Business and Organisations
  • Video

Schema.org is a collaboration by Google, Microsoft and Yahoo to providing a wider range of detailed, specific Microdata schemas

How does it work?

Microdata

Microdata introduces five simple global attributes (available for any element to use) which give context for machines about your data. These five new attributes are: itemtype, itemscope, itemprop, itemid and itemref.

itemscope and itemtype

An itemscope attribute is added to a div in order to identify that everything in that div is going to be a particular class of information. Then an itemtype attribute is added to specify the precise type of information, the schema being used. e.g.

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <div>Director: James Cameron (born August 16, 1954)</div>
  <div>Science fiction</div>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

 

itemprop

Once you have labelled the itemtype, it is possible to use itemprop attributes to give additional information about the kind of data which is represented by the other elements of the HTML. So if we continue working on our Avatar fragment we have:

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</div>
  <div itemprop="genre">Science fiction</div>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

 

So search engines now know that this information is about a movie, and it knows that the heading is the name of the movie, that the director is James Cameron, that the genre is science fiction and that there is a link to a trailer. That was all information which was easy for a person to infer from the displayed data, but which was impossible for an automated system to know without help. It is possible for itemscopes to be nested, so that an itemtype of ‘Person’ may have an address which has an itemtype of ‘Address’ within it.

Data type disambiguation

There are some data types for which it may be useful to clarify the data. For example, datetime and times can benefit from being marked up with the <time datetime=””> tag, where the ISO format is used to unambiguously represent the date. e.g.

<time datetime="2011-04-01">04/01/11</time>
<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>
<time itemprop="cookTime" datetime="PT1H30M">1 1/2 hrs</time>

Other examples are support for enumerations of a limited set of possibilities (e.g. informing the search engine that the stock availability notice is one of four possible variations of stock availability) and meta tags to provide a place for making information available which would otherwise be invisible (e.g. duration of a flash video, number of stars in a rating graphic). It is strongly suggested that the meta approach be used sparingly. All the search engine providers prefer to see markup related to user-visible content.

The markup is valid HTML 5.

Microformat

This is the oldest way of providing additional semantic information to web pages. It relies mostly upon the class attribute, sometimes the id, title, rel or rev attributes.

An advantage of this approach is that it has minimal effect on the validity of websites when classes are used for the information. On the other hand, there may be a temptation for developers to use semantic classes for css styling, and end up confusing one with the other. In addition, the use of title attributes has caused problems with accessibility in the past.

RDFa

RDFa is a highly extensible but arguably more complex solution for providing semantic metadata. URLs are used to identify almost all things, being applied to a property attribute. In the example below a namespace is declared to simplify the rest of the markup in the code fragment. Although flexible enough to work with any number of entity definitions, it appears that a perceived lack of consistent, agreed definitions has tended to hold it back. It is also more complex and that has slowed adoption.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
   My name is <span property="v:name">Bob Smith</span>, 
   but people call me <span property="v:nickname">Smithy</span>.
   Here is my homepage: 
   <a href="http://www.example.com" rel="v:url">www.example.com</a>.
   I live in 
   <span rel="v:address">
      <span typeof="v:Address">
         <span property="v:locality">Albuquerque</span>, 
         <span property="v:region">NM</span>
      </span> 
   </span>
   and work as an <span property="v:title">engineer</span>
   at <span property="v:affiliation">ACME Corp</span>.
</div>

 

Where might it be used?

Taking Tesco.com as an example:

Wine reviews

This fragment of a google search page for “tesco isla negra merlot reserva” is interesting – the top result is the main wine page on the wine website. The fourth entry is from the reviews.tesco.com site – the same reviews which appear on the product page. It is possible to click through to the product page and then see shopping basket etc. However, it might be useful if the star rating and reviews on the main page appeared on the main page search result (as that is the one we would particularly like people to click through on).

Recipes on Realfood

The Realfood recipes have ratings – there could be thumbnail, ratings and cook time showing up in the Google search listings. Which of those results is someone most likely to click on?

Examples

Realfood Recipe markup using Microformat

The following additional classes and span added to html on the page allows the image, rating and time to cook to appear in the search results producing this:

<div class="hrecipe">
 <div>
 <h1 class="fn">Pecan pie recipe</h1>
 <ul>
  <li class="hreview-aggregate">
       <p id="recipeStarRating" class="rating">
  <span>5 stars</span><span class="ratingtooltip">Rating: 5 stars</span>
  <span class="count">(3 ratings)</span>
  </p>
  </li>
 </ul>
 </div>
 <div>
 <img src="http://realfood.tesco.com/media/images/pecan-pie-hero-3f2d0a4e-e1d9-4bd0-9e42-b375c0b83389-0-472x310.jpg" alt="pecan pie hero" width="472" height="310" class="photo" />
  <ul>
   <li>
    <span>Cost per serving: 41p</span>
   </li>
   <li>
    <span class="duration"><span class="value-title" title="PT0H35M"></span>Takes: 25 mins to prepare and 35 mins to cook</span>
    </span>
   </li>
   <li>
    <span>Serves: 8</span>
    </span>
   </li>
   </ul>
  <div>
   <p>Preheat the oven... </p>
  </div>
</div>

Wine Markup using Microdata

Wine is an interesting case as the wine reviews site (reviews.tesco.com) does have the appropriate markup, but the main wine site (www.tesco.com/Wine ) doesn’t, even though it contains the same review information. The side effect of which is that the reviews site appears more attractive and informational on Google listings, even though we want people to visit the higher ranked main page. The second example has weaker text summary because the reviews subdomain doesn’t have any detailed product information.

e.g. on reviews.tesco.com we find the reviews surrounded by:

<span itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”&gt; …

While on www.tesco.com/Wine there is no use of MicroData

<div> …

The following code fragment highlights where MicroData is currently used on that wine reviews site (this is not provided as a good example – the html illegally nests div elements within span elements for instance).

<span itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating&#8221;>

<div id=”BVRRSReviewsSummaryID”>

<div id=”BVRRSOverallRatingContainerID”>

<div id=”BVRRSReviewsSummaryTitleID”>Overall rating:</div>

<div id=”BVRRSReviewsSummaryRatingImageID”>

<img src=”http://tescowines.ugc.bazaarvoice.com/1071-en_gb/4_4/5/ratingLarge.gif&#8221; width=”115″ height=”25″ alt=”4.371 / 5″ />

</div>

<div id=”BVRRSReviewsSummaryRatingTotalsID”>

<span id=”BVRRSReviewsSummaryOutOfID”>

<div itemprop=”ratingValue”>4.4</div>

/

<div itemprop=”bestRating”>5</div>

</span>

<span id=”BVRRSReviewsSummaryCountID”>(<span itemprop=”reviewCount”>62</span> reviews) <span>62</span>

</span>

</div>

</div>

…etc…

 

Recommendation

I think it would be a relatively small change to implement one of these options in various Tesco sites (whether recipes on Real Food, reviews on Wine, product information on GHS or something else) and it would bring value to their web proposition and give them more appealing search results quickly.

The question then would be which format to use.

MicroData has the advantage of being both part of the HTML 5 specification and supported by all the major search engines, so this should probably be the strategic choice. The only concern would be whether the fact that it is invalid HTML for prior versions of HTML is significant. It affects validation, not rendering.

 

 

 

Advertisements