There’s been a continuous and very useful flow of writing on the web around the subject of techniques and products using HTML5 and structured data recently. The use of structured data in front end web design is a favourite subject of mine, an interest that more frequently influences recommendations in our SEO consulting. Recently I discussed the subject with a client and while it may be impractical to rush off and start rebuilding your website in glorious HTML5 today, there are numerous things you can do to improve the markup of your web pages, actions which perhaps will inspire learning and ideas for how the future version of your website should be built.
Image credit: Oimax
What is the hReview Microformat? [A Definition]
hReview is a simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in HTML, XHTML, Atom, RSS, and arbitrary XML.
hReview is a component of the Microformats standard. Microformats are purely frameworks created to best describe a type of data, be it an event, an address, a review and numerous others. By inserting the attributes defined by the standard into your source code, the data you’re presenting in the web page becomes more easily understood by search engines that support interpretation of the format. hReview is ideal for any site that contains user generated review based content. Slightly confusingly, RDFa and Microformats are different disciplines, I’ll use an RDFa example later on but in the meantime this is a good primer on the differences between the two. Google understands both, so you really just need to make a decision on which approach to take.
A typical piece of markup containing hReview attributes
Rather usefully, Google have provided a crash course in applying hReview to your web pages. From their guide, here are the properties that Google can recognise:
||The item being reviewed|
||The name of the item being reviewed. Child of
||A numerical quality rating for the item (for example, 4) based on a scale of 1-5.
You can optionally specify
||The author of the review.|
||The date that the item was reviewed.|
||The body of the review.|
||A short summary of the review.|
Thanks to this very useful Knol on Rich Snippets, I learned that the
pricerange property is unofficially supported allowing us to show general price ranges associated with a business or product in listings, too.
Here’s some example markup using all of the properties mentioned in the table above:
<div class="hreview"> <span class="item"> <span class="fn">Google Nexus One</span> </span> <span class="rating">3.5</span> <span class="reviewer">Richard Baxter</span> <abbr class="dtreviewed" title="20100110">January 10th 2010</abbr> <span class="summary">"Great so far..."</span> <span class="description">"The phone syncs easily with a Google account, in fact, you should definitely have a Google account before you get this phone. If you use Google calendar and mail, the phone regularly pulls new mail and calendar items to your phone."</span> </div>
An aggregate review summarises the average sentiment of multiple reviews. If you have 4 reviews of differing values, an aggregate can be used to markup that summary. Typically you’ll find an aggregate review included in a vCard (address, pricerange etc) implementation at the top of the review page.
<div class="hreview-aggregate"> <span class="item"> <span class="fn">Google Nexus One</span> </span> <span class="rating">Rating: <span class="average">3.5</span> out of <span class="best">5</span> </span> based on <span class="count">35</span> reviews. </span> </div>
Don’t forget you can do all of this with RDFa too, for which Google provides all you need to know in this webmaster help page.
Life is better with examples
It can be quite difficult finding actual working examples of the implementation that have been accepted into Google’s search results as “rich snippets”. You can start by taking a look at the “hReview examples in the wild” page at Microformats.org, though inclusion on the microformats list far from guarantees inclusion in Google’s SERPs. Sometimes it’s easier just to do a few Google queries:
Here’s a rich snippet from website menuism.com:
On the web page for this result, we can see examples of review attributes in the source code inside a vCard implementation:
Here’s a result I found while searching for a Google Nexus One review:
Where this review website uses an RDFa implementation to markup and aggregate user reviews.
Yelp.co.uk use a combination of vCard and aggregated hReview markup to get this result:
Yelp also use the
pricerange property (mentioned above) which appears next to the aggregated review in the search result.
(Very) Useful resources
Once you’ve implemented hReview on your website, you might wish to test and tweak the markup using Google’s Rich Snippets testing tool. As soon as you’re happy with the results, try submitting your site to Google through their rich snippets feedback form. Here are some highly recommended resources for further reading:
Know your hReview – Microformatique (John Allsopp)
About Review Data – Google Webmaster Help
hReview Specification – Microformats.org
hReview Examples in the Wild – Microformats.org
Using the hReview Microformat for your Review Pages,