PHP Magento Tips

Improve SEO with hreview and hproduct Rich Snippets in Magento

Rate this posting:
{[['']]}

You can easily add both hreview and hproduct microformats to your template and can Drive more traffic from Google through Microformats.

 

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 app/design/frontend/base/default/template/catalog/product/view.phtml

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:

app/design/frontend/base/default/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:

<div class="rating-box">                
    <div class="rating" style="width:<?php echo $this->getRatingSummary() ?>%">
        <span class="value-title" title="<?php echo number_format($this->getRatingSummary() / 20,1); ?>"></span>
    </div>
</div> 

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 $this->__('<span class="count">%d</span> Review(s)', $this->getReviewsCount()) ?> 

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:

app/design/frontend/base/default/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:

app/design/frontend/base/default/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: The product photo

Next up is the product photo. Open up:

app/design/frontend/base/default/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.

<?php
    $_img = '<img id="image" class="photo fn" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
    echo $_helper->productAttribute($_product, $_img, 'image');
?> 

Step 3: 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 4: Brand

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

app/design/frontend/base/default/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 this line:

From:
<td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>

to
<td class="data <?php echo strtolower($_data['label']); ?>"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>


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

 

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!

Summary:

The full file paths for edited files are:

app/design/frontend/base/default/template/catalog/product/price.phtml
app/design/frontend/base/default/template/review/helper/summary.phtml
app/design/frontend/base/default/template/catalog/product/view.html
app/design/frontend/base/default/template/catalog/product/view/media.phtml
app/design/frontend/base/default/template/catalog/product/view/attributes.phtml

When making these edits be sure to copy these files from base/default to YOUR_PACKAGE/YOUR_THEME and maintain the same sub-folder structure for each file.
Tag : Magento
1 Comments On "Improve SEO with hreview and hproduct Rich Snippets in Magento"

could you pls help @ https://magento.stackexchange.com/q/178365/51361

Back To Top