Rich snippets: microformats for reviews

Note: Eine deutsche Version des Artikels findet ihr bei amazingweb

Microformats define classes that can be used in any HTML tag to provide semantic information to non-human readers. Among the different ways to reach this goal, microformats have the advantage that they do not represent a modification of the HTML specification, but only use existing artefacts and further specify their use.

There are various microformats to encode many different types of semantic information:

  • Addresses
  • Geographic coordinates
  • Atom information
  • Services or product lists
  • Media Information
  • News
  • Recipes
  • Resumes
  • Reviews of services and products
  • And more …

A common example of this is the hCard microformat. With a nice CSS stylesheet the following might look good:

<div id="contact-data-Henri-Benoit">
    <a href="http://www.amazingweb.de">Henri Benoit</a>
    amazingweb GmbH
    <a href="mailto:hb@amazingweb.de">hb@amazingweb.de</a>
    Ölmühlweg 37
    Königstein, Hessen, 61462
    Germany
    +49 6174 297365
</div>

While it is understandable for human readers, it is difficult to interpret for machines. With the hCard microformat, these contact details would be encoded like this:

<div id="contact-data-Henri-Benoit" class="vcard">
    <a class="url fn" href="http://www.amazingweb.de">Henri Benoit</a>
    <div class="org">amazingweb GmbH</div>
    <a class="email" href="mailto:hb@amazingweb.de">hb@amazingweb.de</a>
    <div class="adr">
        <div class="street-address">Ölmühlweg 37</div>
        <span class="locality">Königstein</span>, <span class="region">Hessen</span>, <span class="postal-code">61462</span>
        <span class="country-name">Germany</span>
    </div>
    <div class="tel">+49 6174 297365</div>
</div>

It looks exactly like the previous code for a human reader:

Henri Benoit

amazingweb GmbH

Ölmühlweg 37

Königstein, Hessen, 61462
Germany

+49 6174 297365

But all the data contained can be processed by machines. Google understands the following:

hcard

fn: Henri Benoit
person-name:
family-name: Benoit
given-name: Henri
org:
organization-name: amazingweb GmbH
adr:
street-address:
Ölmühlweg 37
locality: Königstein
region: Hessen
postal-code: 61462
country-name: Germany
tel:
value: +49 6174 297365
email:
value: hb@amazingweb.de
url:

Microformats are also used by Google to present search results in a more useful way. When looking for a product, you will find many web sites listing this product together with a note representing user feedback and review comments. When these data are encoded with microformats, Google can extract them and show directly in the search results which average note was given to this product, how many users gave feedback… An entry in Google’s search results then looks like this:

In this example, the HTML code looks like this:

<html>
    <head>
        <title>amazingweb GmbH</title>
    </head>
    <body>
        <span class="hreview-aggregate">
            <span class="item">
                <span class="fn">amazingweb GmbH</span>
                <span class="url">http://www.amazingweb.de</span>
            </span>
            <span class="rating">
                Bewertung :
                <span class="average">98</span> von <span class="best">100</span>
            </span>
            bei
            <span class="count">457</span> Bewertungen.
            <span class="summary">Just the best Internet agency !</span>
        </span>
    </body>
</html>

 

You can check on this page how you microformats will then look like for Google. You can either type in a URL if the page is already visible on the Internet, or just enter some HTML code.

To use microformats you must do the following:
Add a special class to the tag containing the whole information. This tells what for a micro-format is used e.g.:

<span class="hreview-aggregate">

or:

<div class="vcard">

hreview aggregates is the microformat for consolidated review results. vcard the microformat for contact details.
You can see above, that it is irrelevant which HTML tag is marked with the class. Of course, it actually only makes sense to use container tags such as div or span.

Additionally, all data will be marked individually with classes as defined in the hreview aggregates specification:

  • item for the product itself. item is used as a container and can contain the following:
    • fn for the name of the product
    • url for the web address
  • rating for rating. rating is used as a container and can contain the following:
    • average for the average rating
    • best for the highest possible rating
    • worst for the lowest rating
  • votes for the number of votes taken into account
  • count for the number of reviews into account
  • photo can be used to show an image of the product
  • summary for summary reviews

It should also be noted that if you use count instead votes, then you should theoretically list all reviews. But it is apparently not an issue for Google if it is not the case.

You cannot see in the search results all of the data that are marked with microformat but it still makes sense to mark them, because they are visible in other applications.

Leave a Reply

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