Rich Snippets: How to Boost eCommerce SEO Results

When the information about a site or a product is displayed professionally via rich snippets in search results the number of users who click the site URL will significantly increase, thus attracting more potential customers to your site. Creation of a quality view is possible with the help of integration of Magento ® with various snippets. Before the snippets are used the search results page will look as follows, by default:

After the snippets are implemented it will look much better:

So, first of all, we need to open the file app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml and add the following code into the template:

<div class="product-view" itemscope itemtype="http://schema.org/Product" 
itemid="#product_base">

Now we can set the tags for images, product description, and its name. In this same file, locate the tag for the product name (h1) and paste the following code into it:

<h1 itemprop="name">
    <?php echo $_helper->productAttribute($_product,$_product->getName(), 'name') ?>
</h1>

In order to set the tags for product description we need to make sure that div-description contains the attributes with the following code:

<div class="std" itemprop="description">
    <?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription())
    , 'short_description') ?>
    

The next step is a modification of the image tags. Locate the file app/design/frontend/[package]/[theme]/template/catalog/product/view/media.phtml and add the following code in the image tags:

$_img = '<img itemprop="image" id="image" src="'.$this->helper('catalog/image')->
init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.
$this->escapeHtml($this->getImageLabel()).'" />';

$_img = '<img itemprop="image" src="'.$this->helper('catalog/image')->init($_product, 
'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->
escapeHtml($this->getImageLabel()).'" />';

Then, open file app/design/frontend/[package]/[theme]/template/review/helper/summary.phtml and add the information about the product rating. Replace all the code in that file with the following:

<?php if ($this->getReviewsCount()): ?>

    <div class="product-view" itemprop="aggregateRating" itemscope itemtype="http://
    schema.org/AggregateRating"

        <?php if ($this->getRatingSummary()):?>
            <div class="rating-box">
                <div class="rating" style="width:<?php echo $this->getRatingSummary() ?>%">
                </div>
            </div>
        <?php endif;?>

        <p class="rating-links">
            <a href="<?php echo $this->getReviewsUrl() ?>"><?php echo $this->__('%d 
            Review(s)', $this->getReviewsCount()) ?></a>
            <span class="separator">|</span>
            <a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo 
            $this->__('Add Your Review') ?></a>
        </p>

        <meta content="<?php echo $this->getReviewsCount();?>" itemprop="ratingCount">
        <meta content="5" itemprop="bestRating">
        <meta content="<?php echo <?php echo $this->getRatingSummary()*5/100 ?>" 
        itemprop="ratingValue">

    </div>

    <?php elseif ($this->getDisplayIfEmpty()): ?>

        <p class="no-rating">
            <a href="<?php echo $this->getReviewsUrl() ?>#review-form">
                <?php echo $this->__('Be the first to review this product') ?>
            </a>
        </p>

<?php endif; ?>

Now, you need to add the code to display the offer section. Open the file app/design/frontend/[package/[theme]/template/catalog/product/view/type/default.phtml and paste the following after the first two comments:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

    <meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrent
    CurrencyCode();?>" />
    <?php if ($_product->isAvailable()): ?>
        <p class="availability in-stock">
            <link itemprop="availability" href="http://schema.org/InStock">
            <?php echo $this->__('Availability:') ?> 
            <span><?php echo $this->__('In stock') ?></span>
        </p> 
    <?php else: ?> 
        <p class="availability out-of-stock">
            <link itemprop="availability" href="http://schema.org/OutOfStock">
            <?php echo $this->__('Availability:') ?> 
            <span><?php echo $this->__('Out of stock') ?></span>
        </p>
    <?php endif; ?>

In the end, you must add:

</div><!—Offer Div ends -->

The last stage is the addition of a price to the description on the search results page. In order to do this, open file app/design/frontend/[package]/[theme]/template/catalog/product/price.phtml and add the following code into each ‘span’ block with ‘price’ class:

<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo 
$this->getIdSuffix() ?>"> <?php echo str_replace('class="price"', 'class="
price" itemprop="price"', $_coreHelper->currency($_price + $_weeeTaxAmount, true, true)); ?>

The block with ‘regular-price’ class requires the following code:

<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo 
$this->getIdSuffix() ?>"> <?php echo str_replace('class="price"', 'class="
price" itemprop="price"', $_coreHelper->currency($_price + $_weeeTaxAmount, true, true)); ?>

You can check the work of rich snippets with the help of free testing services offered by Google and Bing. This kind of optimization will definitely increase the amount of visits on your site and the volume of sales. Other ways of site optimization for search engines will be described in the next articles on our blog. Please ask your questions in comments and do not forget to share the most interesting articles with your friends and colleagues.