Using the hReview Microformat for your Review Pages

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:

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.

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

 



Stay Updated: Sign Up for Webinar & New Blog Alerts

27 thoughts on “Using the hReview Microformat for your Review Pages

  1. rishil says:

    Awesome stuff! Was about to embark on further info seeking on hreview and you seem to have the done the leg work for me!

  2. 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!

  3. 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’)

  4. 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!

  5. 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 :)

  6. No problem Eduard. I don’t think I’ve ever seen an RT in my blog comments before :-)

  7. Pat Strader says:

    Nice overview, hope to see more of the Rich Snippets showing in search soon.

  8. Glad to be the first one :)

  9. Matthew Brookes says:

    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?

  10. 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!

  11. Matthew Brookes says:

    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.

  12. 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.

  13. Andy Mabbett says:

    “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.

  14. Andy Mabbett says:

    “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.

  15. David says:

    Hi

    I’m new to microformats and would sincerely appreciate if somebody could spare a couple of minutes to give me their valuable opinion on a proposed implementation of microformats. I wouldn’t even call myself a programmer so please forgive any errors.

    I’ve done a test page and obvious want to make sure everything is ok before I implement microformats sitewide:

    http://www.visitnorthwest.com/manchester/abc.htm

    It’s a review of a hotel/booking page.

    My main points are:

    1. Hreview – Because of the way the page is already structured I’ve had to wrap hreview around columns 2 and 3. This takes in some superfluous information (i.e Popular hotels in Manchester) but I can’t see a way around it without changing the structure of the page – which is pretty undesirable for this site as its about 4000 pages

    2. All the address info, review info is contained within the info box in column 3 , the ‘description’ itself is before this in column 2. Is this combined structure of vcard/item ok?

    3. Is the vcard/item combination appropriate for a hotel booking/review page?

    4. Address info – I’ve not put the country in as it’s a UK site and fairly obvious to readers. Is country info necessary, especially with regard to search engines?

    5. Photos – I’ve assigned image class ‘photo’ to each photo. Is anything else necessary?

    Google’s rich snippet tool seems to like it, although it doesn’t pick up any image info

    http://www.google.com/webmasters/tools/richsnippets

    Please let me know if there is anything different you would do.

    Thanks in advance for your help.

  16. Matthew Brookes says:

    Hi daivd,

    i read this the other week and forgot to put up a comment. Taking a look at what you have done it all seems OK i am not sure about the image issue. I would not worry about the country as i am sure Google etc know your based in the UK. Structure wise i don’t see a problem with what you have done. You might want to trial rolling the changes our to a few select pages and see what gets picked up before rolling out on mass.

    Something else to think about is that Google updated its XML site specification earlier this week so you can now specify images in the feed data this could be another way to get your most important images listed.

    See: http://googlewebmastercentral.blogspot.com/2010/04/adding-images-to-your-sitemaps.html

  17. Matthew – really appreciate you taking such an active role in this thread – great work and thanks!

    David – glad to hear you’re headed in the right direction. Best of luck!

  18. David says:

    Thanks for your help. It’s appreciated.

  19. David says:

    Thanks for your help. Appreciated.

  20. Mark says:

    I use WordPress, has anyone any experience of this hReview Plugin?

  21. David says:

    I have implemented code on our OsCommerce shop to show reviews for products as reviews etc in search results, it all works and tests out fine using Googles own testing tool but the actual search results show X posts Y Authors instead of a star rating system

    the X posts and Y authors seem to relate to the number of reviews on the page but apart from that ?

    Any ideas ?

    http://www.google.co.uk/search?q=tip+ties&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a#sclient=psy&hl=en&client=firefox-a&hs=VQB&rls=org.mozilla:en-GB%3Aofficial&source=hp&q=kobran+handbrake+extender&aq=f&aqi=g-b1&aql=&oq=&pbx=1&fp=2f9cf625c3bade9d see this page for an example, we are the top result (Outdoorbits)

  22. Web Deaign says:

    Great work Thanks for sharing with us

  23. Collin Davis says:

    This is a really superb piece. I was trying to implement this review system for on of my clients and searched it on SEO Moz and was referred to here.

    After reading this, I don’t think I will find a better source of information. Few of the articles that have really impressed me with the research that has gone into making it. My hearty congratulations to the author.

  24. I agree with Collin. This is the best article on hReviews that I have read. Kudos for taking the time to research and write it.

    I’m going to keep a closer eye on Rich Snippets especially how they relate to social signals.

  25. Andy Kuiper says:

    I have an hReview page that is being treated as a third part review source, and shows at the bottom of the Places page along with others, like Yelp etc.

    However recently, the RS testing tool is returning incomplete results. They are asking for authorship meta tag to be on the website. Does this tag have to be tied together with a Google+ business account? or would a simple author tag suffice?

    Thanks for this great article btw :-)

    Andy :-)

  26. Jeremy says:

    I keep coming back to this post Richard. Extremely helpful when I forget how to do it.

Comments are closed.