Rich Snippets is the term used to describe structured data mark-up that site operators can add to their existing HTML, which in turn allow search engines to better understand what information is contained on each web page.
Rich Snippets (Schema.org mark-up) is not something which is mandatory, but it does benefit search engines, users and site operators. Using the same search engine can return more relevant results and at the same time Users can determine the relevancy of specific results more easily.
Implementing structured data in your Magento code will allow you to show important information related to your products, such as the number of reviews and the overall rating, price, stock, thumbnail etc.
Implementation of Schema on Product page of Magento
First we should edit the view.phtml of our product page. This is to wrap the dynamic page of products within our new schema markup. Edit these lines of your
app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml:
<div class = “product-view”>
— to —
<div class = “product-view” itemscope itemtype = “http://schema.org/Product”>
— and —
<h1> <?php echo $_helper-> productAttribute($_product, $_product-> getName(), ‘name’)?></h1>
— to —
<h1 itemprop = “name”><?php echo $_helper-> productAttribute($_product, $_product-> getName(), ‘name’)?></h1>
In this way the catalog/product/view.phtml comes within the wrap of product type. Then we can tag product name (in this instance within the <h1> tag).
Now to tag description we need to modify the following lines of code:
<div class=”std”><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) ?></div>
— change to —
<div class=”std” itemprop=”description” ><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) ?></div>
ADDING THE PRODUCT IMAGE PROPERTY
Next we should tag the product image, which will mean us editong the app/design/frontend/[package]/[theme]/template/catalog/product/view/media.phtml file:
$_img = ‘<img ….
— change to —
$_img = ‘<img itemprop=”image”
SETTING UP DEFAULT PRODUCT OFFERS SCOPE
app/design/frontend/[package/[theme]/template/catalog/product/view/type/default.phtml
Having set up a basic product scope, lets now set up a simple offer which includes price and availability. We do this to keep the offer scope separate depending on different product types.
Open up default.phtml and wrap everything in an Offer Itemscope starting on Line 28.
<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>…</div>
Then we can add a Meta tag for the product currency on Line 30…
<meta itemprop=”priceCurrency” content=”<?php echo Mage::app()->getStore()->getCurrentCurrencyCode();?>” />
and links for the Item Availablity on Lines 34 and 36.
<?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; ?>
ADDING PRODUCT PRICE
app/design/frontend/[package]/[theme]/template/catalog/product/price.phtml
Price, however, is a bit trickier; you will have to dive into the complex price template file, which while powerful can appear overwhelming. Since we only want to show the basic non-sale price right now there are two cases to look for:
<span itemprop=”price” class=”price” id=”price-excluding-tax-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>”>…</span>
<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)); ?>
Implementing Aggregate Schema
Aggregate schema will be displayed if your products have reviews. We shall update the following codes of review/helper/summary.phtml
<div class=”ratings”>
— change to —
<div class=”ratings” itemprop=”aggregateRating” itemscope itemtype= “http://schema.org/AggregateRating”>
The next step is to inform the search engine about your product’s best, average and worst review ratings, plus how many reviews they have in total. For this we’ll edit the following code.
— just underneath <div class=”ratings” add the following —
<span class = “no-display” itemprop = “reviewCount”><?php echo $this->getReviewCount() ?> reviews </span>
— then just within <?php if ($this->getRatingSummary()):?> add the following —
<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>
The above code will set 0 to 5 average ratings for your product.
Implementation of product URL and SKU Schema
To include the SKU and Product URL information, add the following code to view.phtml:
<meta itemprop= “url” content= “<?php echo $_product->getUrlModel()->getUrl($_product, array(‘_ignore_category’=>true’));?)” /> <meta itemprop= “sku” content= “<?php echo $_product->getSku() ?>” />
Implementation of Breadcrumbs Schema
Make a separate file called breadcrumbs.phtml in “template/page/breadcrumbs.phtml”. The code should be as follows:
<?php if($crumbs && is_array($crumbs)): ?>
<div class=”breadcrumbs”>
<ul xmlns:v=”http://rdf.data-vocabulary.org/#”>
<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
<li class=”<?php echo $_crumbName ?>” typeof=”v:Breadcrumb”>
<?php if($_crumbInfo[‘link’]): ?>
<a href=”<?php echo $_crumbInfo[‘link’] ?>” title=”<?php echo $this->htmlEscape($_crumbInfo[‘title’]) ?>” rel=”v:url” property=”v:title”>
<span><?php echo $this->htmlEscape($_crumbInfo[‘label’]) ?></span>
</a>
<?php elseif($_crumbInfo[‘last’]): ?>
<span rel=”v:child” property=”v:title”>
<strong><?php echo $this->htmlEscape($_crumbInfo[‘label’]) . ‘ for sale’ ?></strong>
</span>
<?php else: ?>
<span><?php echo $this->htmlEscape($_crumbInfo[‘label’]) ?></span>
<?php endif; ?>
<?php if(!$_crumbInfo[‘last’]): ?>
<span>/ </span>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
Learn now How to setup Blog/Articles in Magento
Leave a Reply