What I've done is I've added both hreview and hproduct microformats to our template. I'll briefly walk you through how to do that. It might be wise to start with Frederick's post on Driving more traffic from Google through Microformats. After that you can read my own post on how to implement hreview in WordPress or read on to see how to implement hreview-aggregate in Magento.

Adding hreview in 5 steps

Step 1: the 'hreview-aggregate' class

Because we've got more than one review for products, we're going to be using the hreview-aggregate version of the microformat. This wrapper class should be on an element that contains all the elements of the review. So we open:

template/catalog/product/view.html

And add the class hreview-aggregate to the product-shop div.

Step 2: the "item" reviewed

The second thing we should add is the item being reviewed, we'll use two classes here: item and fn. I've added this to the <h1> within the product-name class, still in the same file. So far, what we've got looks like this:

<div class="product-shop hreview-aggregate">
  <div class="product-name">
    <h1 class="item name fn">
      <?php echo $_helper->productAttribute($_product, 
          $_product->getName(), 
          'name') 
    ?>
    </h1>
  </div>

Step 3: the rating

Then you'll see a call like this:

<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>

This calls to a template file that's hidden in:

/template/review/helper/summary.phtml

If you open this file you'll see a div called rating-box, containing a div called rating. Because this box outputs the rating visually using CSS, we'll need to make it machine readable as well. Luckily, there's a solution for that: we'll use the value-title method. Within the contents of the div with class rating, we'll add this:

<span 
  class="value-title" 
  title="<?php echo number_format($this->getRatingSummary() / 20,1); ?>">
</span>

As you can see, we retrieve the rating and turn it into a 5 point scale rating by dividing it by 20, so Google can understand it.

Step 4: the review count.

Next we have to tell Google how many reviews we've had for this product. In a span in the same file with the class amount, you'll find this info. I had to redo the code a tiny bit, it ended up looking like this (formatted for readability):

<?php 
  echo '<span class="count">';
  echo $this->getReviewsCount();
  echo '</span>'.$this->__(' Review(s)'); 
?>

So with the span count it only shows the number, the text "Review(s)" is actually outside of it. Otherwise Google wouldn't understand it.

Step 5: The pricerange

This last step actually caused me a bit more headaches, even though the end result is quite simple. We need to add the pricerange class to our price "tag", in order for Google to understand the pricing of our product. To do this, we open up:

/template/catalog/product/price.phtml

This is one big file, but don't get scared: there are two divs there with class price-box, just add the pricerange class there and you'll be ok, and quickly close that file before that code get's to your head!

Adding hproduct to your template

Step 1: The hproduct class

Open up view.phtml again:

/template/catalog/product/view.phtml

The hproduct class needs to go up in the source a bit higher than the hreview class, easiest way is to add it to the div with class product-view.

Step 2: Availability

The fn is already there because of our hreview implementation, so we can go right to availability. To add the proper classing open up:

/template/catalog/product/view/type/simple.phtml

You'll see that the class in there is already called availability. It's there twice: for in stock and out of stock occasions. The full code I made out of that uses the value-title method, and looks like this:

<?php if($_product->isSaleable()): ?>
    <p class="availability in-stock">
    <?php echo $this->__('Availability:') ?> 
    <span class="value-title" title="<?php echo $this->__('In stock') ?>">
      <?php echo $this->__('In stock') ?>
    </span>
  </p>
<?php else: ?>
    <p class="availability out-of-stock">
    <?php echo $this->__('Availability:') ?>
    <span class="value-title" title="<?php echo $this->__('Out of stock') ?>">
      <?php echo $this->__('Out of stock') ?>
    </span>
  </p>
<?php endif; ?>

Now I'll be honest: I have second thoughts about giving Google availability data for products. If Google were to act in the best interest of it's endusers, it would not show you in the rankings for a particular product when there were other sites that carried the same product that indicated they do have stock. So, use this part of hproduct with some prejudice.

Step 3: The product photo

Next up is the product photo. Open up:

/template/catalog/product/view/media.phtml

You'll see an img element with the id image, give it two classes: photo and fn. Some microformats parsers might have issues with using the fn from the hreview, and since this image contains the exact same title as an alt tag, adding the fn class here will help those parsers.

Step 4: Price

This step is easy: the default theme already has the class price around the price everywhere, so just leave it as is and you're good, otherwise, open up price.phtml and add it in.

Step 5: Brand

The last step to our hproduct completion is to add the brand. Open up:

/template/catalog/product/view/attributes.phtml

We'll use the fact that brand is an internal attribute name in Magento as well for this. Where it has a td with class data, change it into this:

<td class="data <?php echo strtolower($_data['label']); ?>">

By doing this all the data cells will have a proper class name, one of which will be brand, completing our hproduct microformat!

My presentation from Meet Magento

Microformats in Magento

So if you've followed the steps above, you should now have a nicely microformatted product page. Use Google's Rich Snippets testing tool to test it, and have a lot of fun using it!

Downloading the updated template

You can download the updated template from Magento Connect.

hreview and hproduct in Magento is a post from Joost de Valk's Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

How I "activate" a review

I alluded to it in last tuesdays podcast with Dougal Campbell: When I add a custom field "rating" to a post, my theme now automatically marks up that post as an hreview microformat. So it's as simple as this:

The rating is between 0 and 5, because that way Google understands it best and we don't have to give Google any extra metadata about it.

The hreview_echo function

To make this whole process easy, I've created a function in my functions.php file called hreview_echo. It looks like this:

function hreview_echo($val) {
  global $post;
  $rating = get_post_meta($post->ID, 'rating', true);
  if ($rating) {
    echo $val;
  }
}

We'll use this function on the several places where we need to add extra classes to make up the hreview.

The wrapper class: hreview

The first class we should add is the wrapper for the entire microformat: the hreview class. This should be on the div surrounding the post (this div should include the title and author). In the default theme (and in mine) it looks like this:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

In this case the class of this div is actually put out by the WordPress core post_class() function, so we'll need to hook into that function. Luckily it allows us to easily do that using a filter, which we'll do using the functions below, which you can drop into your functions.php too:

function hreview_post_class($classes, $class, $post_id) {
  global $post;
  $review = get_post_meta($post->ID, 'rating', true);
  if ($review) {
    $classes[] = 'hreview';
  }
  return $classes;
}
add_filter('post_class','hreview_post_class',10,3);

If your theme doesn't use the post_class() function, it's even easier! Let's say your post div looks like this:

<div class="post">

You can just use our hreview_echo() function:

<div class="post<?php hreview_echo(' hreview'); ?>">

The item reviewed: the title

Next up in the line of things we have to add a class to is the post title, it needs two classnames: the item and fn classes. In my case it looked like this:

<h1><?php the_title();?></h1>

This is easily turned into the following, again using the hreview_echo function we created before:

<h1 <?php hreview_echo(' class="item fn"'); ?>><?php the_title();?></h1>

The date of the review

For the date we'll have to work it a bit. The hreview microformat determines the date should be in ISO date format. Meaning the date should look like: 2010-03-01. Your theme probably has another way of showing the date, I know mine does. My date looked like this:

<span class="date"><?php the_time('d F Y');?></span>

Now to make it so that it can still look like that but we can also give the microformat the correctly formatted date, we'll use a trick: by adding a span with a class of value-title and then adding the correct date in the title of that span, microformat parsers will ignore the other content and pick the value from that title.

So we'll turn it into this:

<span class="date<?php hreview_echo(' dtreviewed') ?>">
  <?php
      hreview_echo('<span class="value-title" title="'.
        get_the_time('Y-m-d').'"/>');
      the_time('d F Y');
  ?>
</span>

This outputs:

<span class="date dtreviewed">
  <span class="value-title" title="2010-02-10"/>
  10 February 2010
</span>

That's a nice, non-intrusive solution, right?

The reviewer: the author

The next class we need to add is the reviewer class, as this is the author of the review, that's a simple one too: it's the author of the post. In my theme, my author block looks like this:

<span class="author"><?php the_author(); ?></span>

Now you'll get by now what we'll do:

<span class="author<?php hreview_echo(' reviewer'); ?>">
  <?php the_author(); ?>
</span>

Easy does it, right? You can basically do something like this with any kind of showing the author's name. Other functions that might be used in your theme are for instance the_author_link() or the_author_posts_link().

The content of the review

We've done more than half of it now! Let's get going with the contents of the review, in the microformat, this needs the class description. In my theme, just like in the default kubrick theme, the content is wrapped in the following div:

<div class="entry">

You've guessed it by now haven't you? Here we go:

<div class="entry<?php hreview_echo(' description'); ?>">

By the way: if you want to mark up articles on for instance your fronpage as hreview too, and you use excerpts there instead of full articles, like I do, you should use summary, instead of description:

<div class="entry<?php hreview_echo(' summary'); ?>">

Finally: the rating!

And now, finally, it's time for us to add the rating, because that's what it's all about right? There's all sorts of ways to display a rating, I have chosen to do it in HTML that looks like this:

<div class="rating">My rating:</div>
<div title="4.5 out of 5 stars" class="rating_bar">
  <div style="width:90%"></div>
</div>

Which outputs this:

The second div (class rating_bar) displays the rating, and it contains the empty stars. The div within that contains the yellow stars, and fills the stars up to where they need to be.

The CSS for these 3 divs looks like this:

.rating {
  float: left;
  margin-right: 10px;
}
.rating_bar {
  float: left;
  width: 55px;
  background: url(images/stars.gif) 0 0 repeat-x;
}
.rating_bar div {
  height: 12px;
  background: url(images/stars.gif) 0 -13px repeat-x;
}

Download the (sprited) image of the stars here.

Now we'll need to do two things: dynamically output the size of the inner div within rating_bar, and make the rating readable for a microformat parser.

To display the rating, because it's a value between 0 and 5, we'll multiply it by 20. To make the output parseable by a microformat parser, we'll use the same value-title trick we used before. Finally, we'll turn this all into a function to display the rating, which you can drop into your functions.php, just like the two functions before.

<?php
function display_hreview_rating() {
  global $post;
  $rating = get_post_meta($post->ID, 'rating', true);
  if ($rating) {
?>
    <div class="rating">
      My rating:
      <span class="value-title" title="<?php echo $rating; ?>"/>
    </span></div>
    <div title="<?php echo $rating; ?> out of 5 stars" class="rating_bar">
      <div style="width:<?php echo ($rating*20); ?>%"></div>
    </div>
<?php
  }
  return $output;
}
?>

So, now you can just use the display_hreview_rating() function anywhere in your post where you want to display the rating. If there is no rating, it won't display anything.

Testing your hreview

Testing your hreview markup can be done with multiple tools, but I myself found the Google Rich Snippets tool to be extremely useful. If you use Quix, just type 'snippet' on the post you want to test! In my case it outputs a snippet like this for my review of a WordPress backup plugin:

Bonus: pricerange and tags

As you can see in the above snippet, it includes something that is not documented anywhere in the official Google documentation for reviews, but that Google does support: the pricerange.

Credit where credit is due: I first found this pricerange attribute when my colleague Eduard pointed me to this post by the SEOgadget guys, which pointed to this Knol. It's extremely useful and seems to basically allow for all sorts of text. People use it to display a pricerange in a €€ - €€€ style, or to display a "real" pricerange, like € 100 - € 150. In case of an individual review, you can just use it to tell what you paid for it.

Since what I paid for a product is not a real part of my theme, I just make it simple: when I tell that the plugin is free, I mark up that line as:

this plugin is completely <span class="pricerange">free</span>

If you do want to put the value into a custom field and display it, you could easily adapt one of the functions above to do that, I'll leave that as an exercise to you, the reader.

Another thing I found that Google recognizes is the class tags. That's really easy to do: I just added the class 'tags' around my tags. I don't know how Google uses that though, haven't seen it anywhere in the wild.

A final note

If you've modified your theme to mark up as hreview, please make sure to use this form to let Google know that you have. They might not show it if you don't fit their test segment though, because as Google states in the Knol:

Currently, review sites and social networking/people profile sites are eligible. We plan to expand Rich Snippets to other types of content in the future.

I hope you've found this post useful, let me know in the comments if you've used it to add hreview to your (premium) theme, and feel free to post links to examples, I'd love to see them! If you're wondering: all code examples on this site, unless specifically otherwise stated, are MIT licensed: free to distribute, free to modify. Please do add a link to where you got the original code though.

It's my humble opinion that additions like these should make it into all the premium themes, because that's what really makes a premium theme premium, in my opinion. Happy coding!

Implementing hreview in your WordPress theme is a post from Joost de Valk's Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

However, the use of microformats, a set of agreed upon HTML conventions used to describe content, can give you more control of the snippets displayed in Google SERPs. Once your site is properly using rich snippets, you will see them also appear in your Google custom search and Google site search results, so this technique is definitely worth exploring if you use those tools as well.

The changes are easy to implement for WordPress, Magento and other software, let's take a look at some use cases based on hReview, hCard, hProduct and XFN:

Businesses & Organizations

Could be marked up as follows:

<div class="vcard">
   <span class="fn org">L'Amourita Pizza</span> 
   Located at 
     <div class="adr"> 
        <span class="street-address">123 Main St</span>, 
        <span class="locality">Albuquerque</span>, 
        <span class="region">NM</span>.
     </div>   
     <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929" />
        </span>
        <span class="longitude">
           <span class="value-title" title="-122.419416" />
        </span>
     </span>
   Phone: <span class="tel">206-555-1234</span>
   <a href="http://pizza.example.com/" class="url">http://pizza.example.com</a> 
</div>

Learn more about the business and organization markup at webmaster central.

Products

Could be marked up as follows:

<div class="hproduct">
   Brand: <span class="brand">ACME</span>
   <span class="category">Heavy objects</span>
   <h1 class="fn">Large all-purpose anvil</h1>
   On sale for 
   <span class="price">$99.95</span>.
   <span class="description">If you need an object to drop from a height,
   the classic A23859 anvil from ACME is the way to go.</span>
   <a href="http://anvil.example.com" class="url">Anvil details page</a>
</div>

Becomes:

Learn more about the product markup at webmaster central.

People

Could be marked up as:

<div class="vcard">
   My name is
   <span class="fn">Bob Smith</span>,
   but people call me
   <span class="nickname">Smithy</span>.
   Here is my home page:
   <a href="http://www.example.com" class="url">www.example.com</a>.
   I live in
   <span class="adr">
      <span class="locality">Albuquerque</span>,
      <span class="region">NM</span>
   </span>
   and work as an
   <span class="title">engineer</span> at
   <span class="org">ACME Corp</span>.
   My friends:
   <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

Becomes:

Learn more about markup for people at webmaster central.

Reviews

Could be marked up as:

<div class="hreview">
   <span class="item">
      <span class="fn">L’Amourita Pizza</span>
   </span>
   Reviewed by <span class="reviewer">Ulysses Grant</span> on
   <span class="dtreviewed">
      Jan 6<span class="value-title" title="2009-01-06" />
   </span>.
   <span class="summary">Delicious, tasty pizza on Eastlake!</span>
   <span class="description">L'Amourita serves up traditional wood-fired   
   Neapolitan-style pizza, brought to your table promptly and without fuss. 
   An ideal neighborhood pizza joint.</span>
   Rating: 
   <span class="rating">4.5</span>
</div>

Learn more about markup for reviews at webmaster central.

Interested in getting started? Well there's no reason not to start using microformats as much as possible already; semantic markup is always good for search engine optimization:

1. Update your markup (make sure it's valid) and use the Quix bookmarklet to check your page, by entering 'snippet' to submit the current page to Google Rich Snippets test tool.
2. Getting the “Insufficient data to generate the preview” error? Then make sure that there are no errors in the markup (go back to step one) or check that you are using enough data to generate the snippet preview, so check the microformat syntax again.
3. Finally, let Google know that you're an early adopter.

So who's using microformats in this and other ways? Brands like Mashable, Yahoo!, Yelp, Technorati, SearchMonkey, LinkedIn, Urbanspoon and many more. If you're interested in digging deeper into the future of microformats as they relate to web analytics as well, Dennis Mortensen from Yahoo! has a great post on what the future may hold.

Google & Microformats: Drive More Traffic is a post from Joost de Valk's Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

As Sebastian explained in an excellent post on SEOmoz, there are two different kinds of directives: crawler directives and indexer directives.

Crawler directives
The robots.txt file only contains the so called Crawler directives, telling search engines, identified by their User-agent:, where they are not allowed to go by using Disallow: and where they can (and should) go by using Allow:, and by pointing them at a Sitemap:.

As Sebastian pointed out and explains thoroughly in another brilliant post, pages that search engines aren't allowed to spider, can still show up in the search results, when they have enough links pointing at them. This basically means that if you want to really hide something from the search engines and thus from people using search, robots.txt just isn't good enough.

Indexer directives
Indexer directives are directives that are, even with the birth of the X-Robots-Tag, set on a per page or even per element basis. Up until July 2007, there were two: the microformat rel="nofollow", which means that that link should not pass authority / PageRank, and the Meta Robots tag.

With the Meta Robots tag, you can really prevent search engines from showing the pages you block in the search results. You can reach the same with the relatively new X-Robots-Tag HTTP header. If you don't know what an HTTP header is, I'd suggest reading the Wikipedia page on it, but in short: look at it as the envelope around your content. This HTTP header is better than the meta robots tag for a couple of reasons, one of them is that you can send those headers for other documents too. So, let's get into some examples.

Example uses of the X-Robots-Tag

If you want to prevent search engines from showing files you've generated with PHP, add the following in the header file:

header("X-Robots-Tag: noindex", true);

This would not prevent search engines from following the links on those pages, if you want to do that, do the following:

header("X-Robots-Tag: noindex, nofollow", true);

But doing it in PHP is probably not the easiest use for this kind of thing. I myself greatly prefer setting headers in Apache, when possible. Consider, for instance, preventing search engines from caching / showing a preview for all .doc files on your domain, you would only have to do the following:

<FilesMatch "\.doc$">
Header set X-Robots-Tag "index, noarchive, nosnippet"
</Files>

Or, if you'd want to do this for both .doc and .pdf files:

<FilesMatch "\.(doc|pdf)$">
Header set X-Robots-Tag "index, noarchive, nosnippet"
</Files>

Or another case, your robots.txt file itself is showing up in the search results. Adding this to your Apache config or your .htaccess file would solve that:

<FilesMatch "robots\.txt">
Header set X-Robots-Tag "noindex"
</FilesMatch>

I had a slight uncomfortable feeling when writing this down, so I e-mailed Matt Cutts asking the following: "<snip> would that mean that you will still fetch it for robots.txt purposes, but won't show it in the index?". I'm waiting for him to answer, and will add his response here once I have it.

Tools
I've quickly created a bookmarklet which shows all the headers for a page (works in Moz browsers only I think, and a Greasemonkey script which pops up when a page is using an X-Robots-Tag header.

Conclusion
As you can see, if you combine the examples above with the stuff you can learn from for instance AskApache's .htaccess tutorial, the X-Robots-Tag HTTP header becomes a very powerful tool. Use it wisely and with caution, as you won't be the first to block your entire site by accident, but it's a great addition to your toolset if you know how to use it.

Playing with the X-Robots-Tag HTTP header is a post from Joost de Valk's Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

As usual, Technorati walks ahead of the pack is a post from Joost de Valk's Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

It would be so cool if Google, or any other SE for that matter, knew how to handle searches like that. The same could be done for events, resume's etc. Google would probably want to make it simpler, or make another page for it, since I can't see my mum typing in "class:vcard", but the idea is good, and I think something people should be working on.

Update 18-2-2010: It took them a while, but it's hear now: Google & Microformats.

Googling for microformats is a post from Joost de Valk's Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!