hreview and hproduct in Magento

May 26th, 2010 – 24 Comments

Today I gave a presentation at Meet Magento in the Netherlands, talking about SEO for Magento. Up until this point, all articles about that subject here on Yoast have been written by my colleague Joachim Houtman. Last week though, I started playing with Magento myself, in preparation for this presentation today, and I’ve added some things to our Blank SEO Template that I know some of you will enjoy.

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:

<strong>/template/review/helper/summary.phtml</strong>

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.


24 Responses to hreview and hproduct in Magento

  1. Matt
    By Matt on 12 June, 2010

    There is a way to implement these microformats without using the Blank SEO template? We really like the idea but we are already using another theme.
    Thanks.

  2. Yara
    By Yara on 6 June, 2010

    Hi guys, thanks for a great tutorial …

    at step 5 – Brand

    In my magento 1.4. I dont have this attribute, only “manufacturer” … obviously thats easy to change but I have all my attributes translated to Czech. Would you mind posting the right code with translation of the class?

    Thanks

    • Umair
      By Umair on 6 June, 2010

      Here is the code i used http://pastebin.com/ujqrLr24

      • Yara
        By Yara on 7 June, 2010

        thank you guys!

        Umair: your code works great, however, I cannot use the exact Czech word with accent (“Výrobce”) within the code :( Oh well, I will use some synonymum withou accents …

    • Joost de Valk
      By Joost de Valk on 6 June, 2010

      It should be “brand”, you can’t translate it, so you’ll have to add that class around the attribute in one way or another :)

  3. Nick
    By Nick on 2 June, 2010

    Edit:

    Also, the new temlate gives a warning for me in Google’s testing tool:

    hproduct

    availability = In voorraad
    price = 2.29900
    Warnings : Missing required field “fn”.

    Is there someting I should change myself? Does anyone have an idea where this comes from?

    Also for the techies here, I noticed a bug when using the standard test data, the product where you need to enter shoe size doesnt work. Probably cant get the availibility there because this depends on the selected size, yet the HTML doest get reloaded…right?

  4. Nick
    By Nick on 2 June, 2010

    Hello,

    Thanks for the new Yoast Blank SEO template i’ll give it to my designer to build upon. What I was wondering, how do I delete the ‘availability tag’? I agree that it is kind of tricky to give this information to Google. Can I just delete the entire div:

    isSaleable()): ?>

    __(‘Availability:’) ?>
    <span class="value-title" title="__(‘In stock’) ?>”>
    __(‘In stock’) ?>

    __(‘Availability:’) ?>
    <span class="value-title" title="__(‘Out of stock’) ?>”>
    __(‘Out of stock’) ?>

    Or is there another solution?

    @ Joost / Yoast; good presentation at meet magento! However, I was still wondering if the new seo template shouldn’t have its reviews on the productpage itself. It seems wrong to me to put unique content on an unoptimized review page as is. Wouldn’t it be better for customers AND search engines to bulk up to content on the optimized product page?

    Thanks!

  5. Ramoonus
    By Ramoonus on 1 June, 2010

    Could you please use capitals the right way;
    hReview and hProduct
    Thanks chap

  6. Umair
    By Umair on 31 May, 2010

    Oops! Posted too soon. Step 5 should be “/template/catalog/product/view/attributes.phtml”

  7. Umair
    By Umair on 31 May, 2010

    Great Walkthrough! Few things though, For step 1 for hproduct. You ask to open up view.phtml. Yet you refer to price.phtml. For Step 5 for hproduct, it should be “/template/catalog/product/view/description.phtml” and not “/template/catalog/product/description.phtml”

  8. stephan
    By stephan on 31 May, 2010

    any news on updated template ?

  9. Dan Frydman
    By Dan Frydman on 31 May, 2010

    Would be great to have open graph added to the blank SEO theme too so that any Magento shop is Facebook ready on install… Thanks for this though – will read and adapt some of our sites.

  10. Patrick
    By Patrick on 30 May, 2010

    I tried to implement the hreview and hproduct according to your tutorial.

    Step 5 Hreview: when I add pricerange in the class of price-boxes the following message appears in the webmaster tool of Google: pricerange = In voorraad

    Step 5 Hproduct: could you explain how to enter the code to your blank seo theme?

    Thanks for your contribution and help.

  11. Brian O'Neill
    By Brian O'Neill on 27 May, 2010

    Magento has a reputation as being a real resource hog, how do you find it? Maybe an article on optimising Magento might be an idea?

  12. Robert
    By Robert on 27 May, 2010

    Thanks for the great presentation @ Meet Magento !

  13. Daniel
    By Daniel on 26 May, 2010

    Thanks for a great walk through guide… Gotta try this on my shop :)


Check out our must read articles about Analytics