hreview and hproduct in Magento
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
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:
And add the class
hreview-aggregate to the
Step 2: the “item” reviewed
The second thing we should add is the item being reviewed, we’ll use two classes here:
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:
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:
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:
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
Step 2: Availability
fn is already there because of our hreview implementation, so we can go right to
availability. To add the proper classing open up:
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:
You’ll see an
img element with the id
image, give it two classes:
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:
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
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!