The hReview format on Yahoo! Tech

Yahoo! Tech launched with basic support for the hReview microformat. Initially, I had no way of testing the output and didn’t realize our limited output. Tails, a Firefox extension, has helped me fine-tune the hReviews. However, Yahoo! Tech still has an outstanding bug with these reviews.

Due to the modular construction of this page,  I am not able to get the product name into the hReview. Dan Cederholm’s post about using the object include microformat pattern may actually solve this issue.

The include pattern lets you define the product or person’s identity earlier in the page and then reference it in individual reviews or blog posts with an object tag. Unfortunately, Safari and Internet Explorer do not behave properly when the object element appears multiple times. An updated version of the pattern uses the link tag instead.

Link-based Object Pattern

Before you get to your reviews, define the product or person with the microformat classes item and fn. Item defines the nature of the content and fn tells us the content is the formatted name of the item. You’ll also need to add a unique id.

Product Name

In your hReview, you need to reference this product by its id.

Unfortunately, a screen reader will announce this as a link. We have a special class, microformatdetail, to hide microformat details that are not part of the visual design. This is a convenient way to add some background information to your hReview, hCard, and hCalendar elements.

.microformatdetail {display:none; /*content for microformat parsing only */}

The final Yahoo! Tech hReview microformat

Let’s look at the code for a digital camera product page. We’ll first define the product name in the top module and then present the reviews later on the page.

Add the product name at the top of the page

Olympus CAMEDIA C-5500 Sport Zoom Digital Camera

Create an individual review

Note: the new link is at the end of the metadetails paragraph

good camera

By John Doe - See all John Doe's reviews - 02/09/06

• Overall: 5/5
• Features: 5/5
• Quality: 5/5
• Support: 5/5
• Value: 5/5

Pros:

great camera

Cons:

blurry when flash is off

I got it for 170 $ it us a great camera, I have loved it great pictures great features and a great value i would recomend it to any one

How is the hReview actually used?

We are still working on this final element of hReviews on our product pages. Once it is live, we should begin seeing the benefits. Technorati is the first search engine to begin scraping microformatted information. When hReviews become more prevalent, more search engines and sites will consolidate products with their reviews from around the web. This will give users much more flexibility with shopping decisions.

Resources

• Microformat search for LCD HDTV products and reviews
• hCard creator – This tool creates hCard code for you.
• hCard specification  – Microformat Twiki
• The rel-tag specification – Microformat Twiki
• The rel-directory draft – Microformat Twiki
• The rel-home draft – Microformat Twiki
• Tails Firefox extension – Instant access to microformat details