Chapter 10. Defining Reviews: hReview
Everyone has an opinion about something. And what better medium to share those opinions than the Internet? Of course, there’s an abundance of opinions on the web that I, personally, wish I never had the “pleasure” of reading or hearing. But there are always those opinions that can be valuable: reviews of products, services, places—anything, really.
How many times have you considered purchasing a book and turned to Amazon’s reviews to help you make your decision? Or what about booking a trip to a far-off destination? Even deciding whether to see a particular band?
Other people’s opinions, at times, can sway you one way or another. And it is for this type of content that hReview is intended.
What Is hReview?
hReview is a draft microformat for adding semantics to web reviews of just about anything. Got a blog post where you talk about how much you love the latest Harry Potter? Mark it up with hReview. A news article where you review the latest software offering from Microsoft? Turn it into an hReview. Does your corporate website include customer reviews of your products? hReview can help you do more with that content.
Unlike some of the microformats we’ve covered—like hCard, hCalendar, and hAtom—that are based on a representation of another existing technology, hReview was developed according to the review content most commonly found on the web today, including the following:
• Name of the item being reviewed
• Name of the person authoring the review
• Date of the review
• Summary and full description for the review
• Rating of the item being reviewed
Distributed reviews
One of the intended benefits of hReview is to provide an open standard for the distribution of reviews. There are already popular sites—Amazon, Best Buy, Rotten Tomatoes, to name a few—that offer review content for a wide variety of products and services. These reviews are relatively easy to find, as those sites provide a central location for their own review content.
But what about reviews that exist on personal blogs, corporate sites, or even in forum comments? These reviews may be more difficult to find, because they may exist independent of a “review system.” hReview provides a mechanism for that review content to be more easily shared, aggregated, and distributed.
To date, there is just a handful of tools and applications (machines!) that offer this service. But because hReview provides the necessary foundation for those applications to be developed, I believe there will be many more in the future. What would such applications look like?
Let’s consider small-scale first: a corporate site that promotes products and services and allows customers to write reviews about those products and services. These reviews may be found in different sections of the website. But a developer could create an application that indexes all of the hReviews on the site and provides results in a single area, without having to replicate the review content. Users could access reviews from a single area, rather than having to navigate from product to product or service to service.
On a larger scale, such as a search engine, reviews marked up with hReview across the entirety of the web could be indexed, providing users with reviews from a broad range of sources, not just the product or service owner. This would give users more information to help them make better-informed decisions.
Google gets in the game
Speaking of hReview aggregation on a large scale, Google’s Rich Snippets indexes hReview-microformatted content to provide summary information (snippets) in its search results. So content marked up with hReview will display in Google’s search results with a snippet that provides summary detail of the review, including the rating (Figure 10.1).
Figure 10.1 Google’s Rich Snippets displays ratings and summary details of web reviews marked up with hReview.
You may have noticed that I wrote “will display.” That’s because, as of this writing, Google is still rolling out this feature. Not all users see Rich Snippets yet. However, as with hCard, which is also used in Rich Snippets, Google’s move to begin consuming microformats and using them to display results signals a strong support for structured data like microformats.
And for content authors using hReview, having support from one of the major players in search means that their content will be exposed to search users in a more meaningful fashion. This can lead to more click-throughs, which could lead to greater profit.
Before Google
Long before Google began embracing hReview, there were many other companies that recognized its value. From a publishing perspective, there are thousands (if not more) sites that mark up their reviews with hReview, including these:
• Yahoo! Local publishes user feedback and ratings of places in its search results with hReview.
• Yahoo! Tech adds hReview to all the reviews of its more than 300,000 technology products.
• Cork’d, the wine community site, publishes reviews with hReview.
• Is It Any Good uses hReview for all product reviews.
• MicroRevie.ws takes reviews from Twitter updates, marks them up with hReview, and provides an aggregated display.
And there are many, many more, from personal blogs to magazine and news sites. Although hReview is a draft, many people recognize its value and are implementing it today.
There are also tools that consume microformats:
• LouderVoice aggregates hReviews from blogs and publishes them in hReview.
• Scrugy, the wine information search engine, aggregates and parses hReviews from wine-related sites and blogs.
• Yahoo! SearchMonkey uses hReview to make its Gallery search results more contextually relevant to its users.
• Yelp, in response to Google’s Rich Snippets, now publishes its reviews with hReview.
• The Tails Export add-on for Mozilla Firefox identifies hReview on web pages, and gives users a quick view of the rating and an export feature of the hReview markup (Figure 10.2).
Figure 10.2 The Tails Export 0.3.5 add-on for Mozilla Firefox identifies hReview on pages, such as wine reviews on Cork’d.
Profile
Now that you know hReview’s benefits, I’m sure you are itching to be in the same company as some of these great sites that support it. It’s time to learn how to publish hReview, starting with the profile in your document <head>:
<head profile="http://microformats.org/profile/hreview">
hReview can include hCard and hCalendar, as well as rel-license. So if you also use these microformats, be sure to include their profiles too.
Syntax
You’ve got the profile; next let’s go over the properties and subproperties of hReview:
• hreview is the required root property for hReview. It must be assigned to the element containing all of the review content.
• item is the required property assigned to the content about whatever is being reviewed. It has three subproperties:
– fn is required and indicates the name of the item being reviewed.
– url is an optional subproperty and is applied to the URL of the item being reviewed.
– photo is the last subproperty of item and is optionally applied to an <img /> element that references a photo or image of the item.
• version, an optional property for hReview, indicates the version of the hReview specification that is being used. For the examples in this chapter, we are referencing version 0.3.
• summary is the optional property assigned to the content that summarizes the review, most commonly the review title.
• type is the optional property that indicates the type of item being reviewed—a product, event, business, person, place, website, or URL.
• reviewer is the optional property assigned to the content about the person who wrote the review. This should also be an hCard.
• dtreviewed is the optional property that indicates, in ISO 8601 format, the date of the review.
• rating is the optional property assigned to the rating of the item being reviewed. This can be a value on an integer scale, where 1.0 is the lowest value and 5.0 is the highest, with ranges on the decimal point such as 2.5. Alternatively, you can use a scale with the rating subproperties of best and worst.
• description is the optional property that indicates the full text of the review.
• If a review includes keywords or phrases, you can optionally mark those up with rel-tag.
• If the review is licensed, you can optionally assign rel-license to that content.
Along with these properties and subproperties, you also have the option to indicate the permalink of the review. As you may recall from Chapter 9, the permalink is the permanent URL for the review.
If you choose to specify a permalink, you must assign rel values of bookmark and self to the <a>.
Reviews of people and events
As you’ve seen many times in the previous chapters, you can (and should) combine microformats. It is just another way to further structure your content and add semantic value.
And hReview requires that you include hCard when marking up review content about people, places, and organizations. When dealing with content about events, hReview requires that you also include hCalendar. In these situations, both hCard and hCalendar are applied to the element that is assigned class="item".
If the review is about a person, place, or business, then the element assigned class="item" should also be assigned the hCard root property vcard along with any relevant subproperties. In these cases, the fn subproperty of item is also treated as the fn property of hCard.
For reviews about events, the element assigned class="item" should be assigned the hCalendar vevent property, as well as the relevant subproperties.
Practical Markup
Now let’s put all of these hReview properties and subproperties to work in some POSH examples.
Book review
I’m a book lover. Have been since I could read. And one of my favorite books of all time is Douglas Adams’ Hitchhiker’s Guide to the Galaxy. So, let’s pretend that I actually found the time to post a (very short) review on my blog:
<h1><a href="/articles/Review-Hitchhikers">Review of
<cite>Hitchhiker's Guide to the Galaxy</cite></a></h1>
<p>March 11, 2009</p>
<p>Rated 5 stars by <a href="http://ablognotlimited.
com/">Emily Lewis</a></p>
<p>Do you love science fiction and Monty Pythonesque
irreverence? Then Douglas Adams' <cite>Hitchhiker's Guide to
the Galaxy</cite> is the book for you.</p>
Required root property: hreview
In order to assign the root hreview, first I add a <div> to contain all of the review content:
Required property: item
The only other required property is item, which you add to the element containing information about the item being reviewed. In this example, you add it to the <h1> since it contains the book name:
<h1 class="item"><a href="http://ablognotlimited.com/
articles/Review-Hitchhikers">Review of <cite>Hitchhiker's
Guide to the Galaxy</cite></a></h1>
Required subproperty: fn
Although item has three subproperties, only one, fn, is required. It indicates the name of the item being reviewed. Remember, subproperty values must be contained by the parent property, so I add fn to the <cite> element contained by the <h1>:
<h1 class="item"><a href="http://ablognotlimited.com/
articles/Review-Hitchhikers">Review of <cite class="fn">
Hitchhiker's Guide to the Galaxy</cite></a></h1>
Optional property: summary
The summary property should be assigned to a brief synopsis of the review, which is commonly the title of the review. The title in this example is contained by the <h1>, so I add summary alongside item:
<h1 class="item summary"><a href="http://ablognotlimited.
com/articles/Review-Hitchhikers">Review of <cite class="fn">
Hitchhiker's Guide to the Galaxy</cite></a></h1>
Optional property: type
This review is for a book, so of the seven legal values for type, product is the most appropriate. I don’t have the actual word product in my review, but I do reference that it is a book.
So I indicate the type value using the value class pattern. In this example, I have to add a few <span>s to contain the word book and indicate the machine data (product):
<p>Do you love science fiction and Monty Pythonesque
irreverence? Then Douglas Adams' <cite>Hitchhiker's Guide to
the Galaxy</cite> is the <span class="type"><span class=
"value-title" title="product">book</span></span> for you.</p>
Note that the value class pattern allows me to retain the original content for my human users, but indicate the correct product value in the title attribute of the inner <span>.
And, of course, you could use the empty <span> method for the value-title subset of the value class pattern if you are concerned about tooltip display.
Optional property: reviewer with hCard
To specify the name of the person who wrote the review, I need to assign the reviewer property to that content. But if you recall, the reviewer also needs to be an hCard. As such, I cannot assign reviewer to the <a> because the root vcard cannot be combined with any of its properties like fn and url, which would naturally be assigned to the <a>. So I add a <span>:
<p>Rated 5 stars by <span class="reviewer vcard">
<a href="http://ablognotlimited.com/">Emily Lewis</a>
</span></p>
Then I add the required fn property for vcard and the optional url property to the <a>:
<p>Rated 5 stars by <span class="reviewer vcard">
<a href="http://ablognotlimited.com/" class="fn url">
Emily Lewis</a></span></p>
Adding rel-me
While it isn’t a requirement for hReview or hCard, I can also add rel="me" to the <a>, since in this example I am the reviewer, and the link is to my blog, and presumably posted on my site:
<p>Rated 5 stars by <span class="reviewer vcard">
<a href="http://ablognotlimited.com/" class="fn url"
rel="me">Emily Lewis</a></span></p>
Again, this is not necessary, but I encourage you to look for these little opportunities to combine microformats even when the specification doesn’t require it. The more semantic and structured, the better, as far as I’m concerned. And if you want to be in the club and get your T-shirt, you should feel the same way.
Optional property: dtreviewed
For the date of the review, I add the dtreviewed property and indicate the ISO 8601 date information via the value class pattern, using the empty <span> method of the value-title subset:
<p class="dtreviewed"><span class="value-title" title="2009-
03-11"> </span>March 11, 2009</p>
Optional property: rating
Of course, I give my favorite book five stars. And then I add the rating property to that content, after first adding a <span> to contain the actual value:
<p>Rated <span class="rating">5</span> stars by <span class=
"reviewer vcard"><a href="http://ablognotlimited.com/">Emily
Lewis</a></span></p>
If I didn’t want to use the default 1.0–5.0 rating scale, I could indicate a different scale using the best or worst subproperties of rating:
<p>Rated <span class="rating"><span class="value">20</span>
stars out of <span class="best">20</span></span> by <span
class="reviewer vcard"><a href="http://ablognotlimited.
com/">Emily Lewis</a></span></p>
Note that for this alternate scale, the rating value is contained by <span class="value">, and the best possible value is contained by <span class="best">, both of which are contained by a parent <span class="rating">.
Optional property: description
For the full text of this review, I assign the description property:
<p class="description">Do you love science fiction and
Monty Pythonesque irreverence? Then Douglas Adams' <cite>
Hitchhiker's Guide to the Galaxy</cite> is the <span class=
"type"><span class="value-title" title="product">book
</span></span> for you.</p>
Optional rel-tag
As it happens, the description content of my example review includes a few key phrases that would make ideal tags. But, as you may recall, in order to implement rel-tag, those tags must be contained by links with destination hrefs that are tagspaces. So let’s first add those links:
<p class="description">Do you love <a href="/tag/science
-fiction/">science fiction</a> and Monty Pythonesque
irreverence? Then <a href="/tag/Douglas-Adams/">Douglas
Adam</a>s' <cite>Hitchhiker's Guide to the Galaxy</
cite> is the <span class="type"><span class="value-title"
title="product">book</span></span> for you.</p>
Then assign each rel-tag:
<p class="description">Do you love <a href="/tag/science
-fiction/" rel="tag">science fiction</a> and Monty
Pythonesque irreverence? Then <a href="/tag/Douglas-Adams/"
rel="tag">Douglas Adam</a>s' <cite>Hitchhiker's Guide to the
Galaxy</cite> is the <span class="type"><span class="value
-title" title="product">book</span></span> for you.</p>
Optional permalink
This example also includes a permanent link to this review, so I indicate that by assigning the necessary rel values (bookmark and self) to the permalink <a>:
<h1 class="item"><a href=" http://ablognotlimited.com/
articles/Review-Hitchhikers" rel="bookmark self">Review of
<cite class="fn">Hitchhiker's Guide to the Galaxy</cite>
</a></h1>
The end result
And now we have a complete hReview:
The logic behind the markup
The markup in this example is pretty straightforward. As in many of the examples in this book, I use the <h1> on content for which I’d like to get a bit of SEO, which is also semantically appropriate for the title.
I did add the nonsemantic <div> as a parent element for the root hreview. Since this example is just a single review, that makes the most semantic sense to me. However, if I were listing several reviews on a page, I could easily use a list element, with each review contained by an <li class="hreview">.
For the actual review content, my example is but one <p>. If I had multiple paragraphs, then I would’ve needed to add a containing <div> in order to assign the description property.
However, I’ve seen some people use a containing <blockquote> element because, from their semantic perspective, the review is what a person is saying and it can contain other block-level elements. Personally, I don’t agree with this, but that doesn’t mean it isn’t correct. Semantics can and often do have nuance based upon the content author’s perspective.
The only other element that may be worth explaining is <cite>. You will notice that I contain each reference to the book name in <cite> elements. This is because (as I mentioned in Chapter 8) <cite> indicates the source being cited.
Combining hReview and hAtom
Because the Hitchhiker’s book review example is one that appears as a blog post, it makes sense to also apply hAtom to encourage syndication of this review. So let’s add all of the relevant hAtom properties you learned about in the last chapter:
Authoring Tools
There are a few tools available to help you publish your content with hReview if you aren’t into the hand-coding thing:
• hReview Creator: http://microformats.org/code/hreview/creator
• G-Tools helps you create reviews of Amazon products and includes an option to publish with hReview: http://goodpic.com/mt/aws/index_us.html
• hReview Dynamic Template helps you author hReview in Windows Live Writer: http://tech.niques.info/projects/wlw-template-hreview/
• If you use WordPress, these two plug-ins can help you publish your review in hReview: http://www.aes.id.au/?page_id=28 and http://sungnyemun.org/wordpress/?p=22
• For more hReview tools, see http://microformats.org/wiki/hreview-implementations
Let Your Voice Be Heard
Now that you know how to implement hReview (and I’m sure you are going to start publishing right away), your reviews have the potential to reach a wide audience. Your reviews can become key resources to help other people make decisions about what books to read, what restaurants to frequent, what bands aren’t worth the money to see, and much more. Everyone benefits.
And this brings us to the end of the chapters in which we focus on one microformat at a time. In the next chapter, I’ll brief you on four relatively new draft microformats.