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
We’ve looked at ways to implement the hCard Microformat already, so today, let’s take a look at the hReview Microformat.
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.
http://microformats.org/wiki/hreview
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:
| Property | Description |
itemreviewed (item) |
The item being reviewed |
name (fn) |
The name of the item being reviewed. Child of item. |
rating |
A numerical quality rating for the item (for example, 4) based on a scale of 1-5. You can optionally specify worst (default: 1) or best (default: 5) |
reviewer |
The author of the review. |
dtreviewed |
The date that the item was reviewed. |
description |
The body of the review. |
summary |
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>
Aggregate reviews
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
Google Rich Snippets: Ratings that Don’t use a 5 Point Scale – Kavi Goel’s Knol
Google Rich Snippets Tips and Tricks
hReview Specification – Microformats.org
hReview Examples in the Wild – Microformats.org
Blog RSS Feed
Blog Posts by Email
{ 14 comments… read them below or add one }
Awesome stuff! Was about to embark on further info seeking on hreview and you seem to have the done the leg work for me!
Hi Rishi – it’s well worth buying this: Microformats: empowering your markup for Web 2.0 By John Allsopp, who owns Microformatique. Hope that’s useful!
I am slightly disoriented with this whole microformats thing. Instead of developing a semantic ontology-based description language that defines structure and content rather than presentation, microformats are like a complement, an addition or an addendum to what is essentially a presentation markup language (HTML). Just thinking about it, they only have microformats description language for hReview, hCard, hProduct etc. The hProduct format is severely lacking in describing products via appropriate product description attributes, as at the moment. The microformats keywords sound like they have been taken from someone who invented the vocabulary of LDAP. (I am talking about microformats attributes being named ‘fn’ etc.) They need more polishing to sound more like web 3.0. (like ‘firstName’)
Hi Mohan,
Even with HTML5 there’s a huge gap when it comes to describing what a piece of data actually is in the markup. Given your well written comment it’s clear you understand this well – so think about it this way…
Front end developers will continue using attributes to style their pages using CSS. With microformats there’s no reason why many of those style attributes (“id=” etc) can’t match with a specific microformat standard.
It’s a small shift in thinking and really doesn’t change how we work at all. There are many draft microformats out there beyond the ones mentioned in this post – check out this post on draft microformats. Hope that’s useful!
“fn” is from the vCard specification. Yes, a better name (with 1-1 mapping to “fn”) could (should) have been chosen; but that spec does have a noteworthy pedigree.
RT @rishil Awesome stuff! Was about to embark on further info seeking on hreview and you seem to have the done the leg work for me!
Thanks, Richard
No problem Eduard. I don’t think I’ve ever seen an RT in my blog comments before
Glad to be the first one
Nice overview, hope to see more of the Rich Snippets showing in search soon.
Nice overview, i read the article about RDFa vs Microformats as well it looks like its going to be another format fight on the web. I guess from all your articles you are going with Microformats? or is that because you feel they are better supported by the search engines at present?
Hi Matthew – really good question.
I need to do more reading / research on this but I’ll tell you where I’m at right now. It feels a little like I’m more on the microformats.org side of things – the markup is much more fitting with a HTML(5) style approach, where RDFa feels a little more xHTML. I’m not confident enough yet to give you a final verdict (hence the total appreciation for the question), though Microformats just feel simpler and less intimidating in the source code.
Maybe I’ll update you when I know more? Thanks for the comment / question!
i agree with your comment about Microformats looking simpler. I have only done a little reading around this subject, when it comes up on blog posts and so far the Microformats stuff has been a lot easier for me to understand.
I also noted from your other article that there is a hResume specification which does have some big names behind it (e.g Linkedin). Although i think the data.gov.uk project is using RDFa so its a bit of a mixed bag at present.
Indeed there is a draft specification for resume markup. Good idea too! It’s very likely this will come up at the industry specific panel at SES London. If noone else brings it up, I’ll try to give it a brief mention.
“20100110″ is not a suitable, human-readable value for an ABBR element’s title attribute. See http://www.webstandards.org/2007/04/27/haccessibility/ and http://www.webstandards.org/2008/06/23/haccessibility-redux/ for discussion.