Implementing schema (rich snippets) on Magento 1.9.x

Search engines are getting smarter every year we can improve our SERPs(Search engine results page) on search engines with more data and information. We can add elements to website to help Search engines such as Google, Yahoo and Bing to understand information such as Price, Special price, Stock availability and Product reviews. Microdata introduced with HTML5 helps us to add these elements to the product page.

Here we are going to implement the schema.org structured data
format (aka schema) into our Magento website is to increase our click-through rate
(CTR) in the SERPs. Lets implement schemas  Product, Offer, and AggregateRating onto our product pages.

For more information on these schema types, please visit
http://schema.org/.

OK lets add schema.org markup to our templates in Magento. The files we are going to edit are

• app/design/frontend/[package]/[theme]/ template/catalog/product/view.phtml
• app/design/frontend/[package]/[theme]/ template/catalog/product/view/media.phtml
• app/design/frontend/[package]/[theme]/ template/review/helper/summary.phtml

*As here I am going to apply the changes on the Magento 1.9.x installtion which includes the Sample Data. So the path in the above [package] = rwd and [theme] = default

Steps to Follow:

Open the file view.phtml

Find

<div class="product-view">

Replace with

<!-- schema.org tag for Product Item Scope -->
<div class="product-view" itemscope itemtype="http://schema.org/Product">

Find

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

Replace with

<!-- schema.org tag for Product Name -->
<h1 itemprop="name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
<!-- schema.org tag for Product Availability -->                    
<?php if($_product->isAvailable()): ?>
<div class="no-display" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
     <span itemprop="price"><?php echo Mage::helper('core')->currency($_product->getFinalPrice()); ?></span>
     <link itemprop="availability" href="http://schema.org/InStock" />
</div>
<?php endif; ?>

Find

<?php if ($_product->getShortDescription()):?>
    <div class="short-description">
        <div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
    </div>
<?php endif;?>

Replace With

<?php if ($_product->getShortDescription()):?>
    <!-- schema.org tag for Product Description -->
    <div class="short-description">
        <div class="std" itemprop="description"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
    </div>
<?php endif;?>

Open the file media.phtml

Find

<img id="image-main"
             class="gallery-image visible"
             src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
             alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
             title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />

Replace with

<!-- schema.org tag for Product Image -->
<img id="image-main"
             class="gallery-image visible"
             src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
             alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
             title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" itemprop="image" />

 

Open the file summary.phtml

Here I have given ratings in two formats one with % rating and another one with 5 star rating. You have to use either one of them you prefer.

Find

<?php if ($this->getReviewsCount()): ?>
    <div class="ratings">
        <?php if ($this->getRatingSummary()):?>

Replace with the following code for % rating

<!-- schema.org tag for Product Review -->
<?php if ($this->getReviewsCount()): ?>
    <div class="ratings" itemprop="aggregateRating" itemscope
itemtype="http://schema.org/AggregateRating">
        <span class="no-display" itemprop="reviewCount"><?php echo
$this->getReviewsCount() ?> reviews</span>
        <?php if ($this->getRatingSummary()):?>
            <span class="no-display" itemprop="worstRating">0</span>
            <span class="no-display" itemprop="bestRating">100</span>
            <span class="no-display" itemprop="ratingValue"><?php echo
             $this->getRatingSummary() ?></span>

OR Replace with the following code for 5 star rating

<!-- schema.org tag for Product Review -->
<?php if ($this->getReviewsCount()): ?>
    <div class="ratings" itemprop="aggregateRating" itemscope
itemtype="http://schema.org/AggregateRating">
        <span class="no-display" itemprop="reviewCount"><?php echo
$this->getReviewsCount() ?> reviews</span>
        <?php if ($this->getRatingSummary()):?>
            <span class="no-display" itemprop="worstRating">0</span>
            <span class="no-display" itemprop="bestRating">5</span>
            <span class="no-display" itemprop="ratingValue"><?php echo
round($this->getRatingSummary()/20,1) ?></span>

I think this is it. Please don’t forget to preview this with Structured Data Testing Tool

Before:

After:

Cheers!