The hReview format on Yahoo! Tech at Advanced CSS Design Resources

The hReview format on Yahoo! Tech

Published 2 years ago in CSS, Class, Id, Yahoo! and microformats Digg This

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.

<h3 class=“item fn” id=“prodname”>Product Name</h3>

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

<a href=“#prodname” class=“include microformatdetail”></a>

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

<h2 id=“prodname” class=“item fn”>Olympus CAMEDIA C-5500 Sport Zoom Digital Camera</h2>

Create an individual review

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

<div class=“arating hreview”>
<div class=“hd”>
<h3 class=“summary”>good camera</h3>
<p class=“metadetails”>By <a href=“foo.html” title=“visit John Doe’s profile page” class=“reviewer fn”>John Doe</a> - <a href=“foo.html “>See all John Doe’s reviews</a> - <span class=“dtreviewed”>02/09/06</span> <a href=”#prodname” class=”include microformatdetail”></a></p>
</div>
<div class=“bd”>
<div class=“ratreviewsummary”>
<ul class=“ratingslist”>
<li class=“overall stars10″>Overall: <span title=“John Doe gave this product 5 out of 5 stars for Overall quality”><em class=“rating”>5</em>/5 </span></li>
<li class=“bars10″>Features: <span title=“John Doe gave this product 5 out of 5 stars for Features” class=“rating”>5/5 </span></li>
<li class=“bars10″>Quality: <span title=“John Doe gave this product 5 out of 5 stars for Quality” class=“rating”>5/5 </span></li>
<li class=“bars10″>Support: <span title=“John Doe gave this product 5 out of 5 stars for Support” class=“rating”>5/5 </span></li>
<li class=“bars10″>Value: <span title=“John Doe gave this product 5 out of 5 stars for Value” class=“rating”>5/5 </span></li>
</ul>
<dl class=“procons description “>
<dt>Pros:</dt>
<dd>great camera</dd>
</dl>
<dl class=“procons “>
<dt>Cons:</dt>
<dd>blurry when flash is off</dd>
</dl>
</div>
<div class=“ytuserreviewtext”><p class=“description”>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</p></div>
</div>
</div>

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.