Product Schema allows webmasters to identify information about a product including product IDs, price and reviews. It’s a helpful tool and one that we add to Magento sites so that Google can easily calculate the purpose of a product page – allowing it to identify the main attributes of any given product.
This information is helpful as it means that search engines can find product information easily, presenting rich snippets based on the info that they find which is beneficial for SEO and for users searching for products. The rich snippets display pricing or reviews which make users more likely to click on them when compared to competitor information with no rich snippet.
So how do you implement product scheme into your Magento store?
Product Schema for your Magento Store
To implement product schema on your site, you need to edit the product view to wrap the dynamic product pages in the schema markup. Firstly, open up the theme file, go to:
[your_theme]/template/catalog/product/view.phtml. You’ll need to edit these lines:
<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>
This wraps the view.phtml into the Product item type. Then we can set the attributes such as product name using the H1 tag. Next, add markup to the description and image.
Find the line pertaining to the short description.
<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>
To change the image attribute, go to [your_theme]/template/catalog/product/view/media.phtml.
Change:
$_img = ‘<img ….etc
to:
$_img = ‘<img itemprop=”image” ….etc
Implement AggregateRating schema
If you have reviews for your products and the theme you use allows these, you can display these as part of the AggregateRating schema. To do this, you need to go to [your_theme]/template/review/helper/summary.phtml and edit these lines:
<div class=”ratings”>
change to:
<div class=”ratings” itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating“>
Then you need to ensure that search engines are displaying the appropriate reviews by telling them which are the best and worst reviews, average ratings and how many reviews in total. This can be done by adding hidden fields.
// underneath <div class=”ratings” add
<span class=”no-display” itemprop=”reviewCount”><?php echo $this->getReviewsCount() ?> reviews</span>
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>
This sets a star rating along with a number of reviews snippet to the search results.
Implement Offer Schema
Finally, we can add the offer schema. This can be done through the price.phtml, but it’s overly complicated. It’s easier instead to add a hidden field in [your_theme]/template/catalog/product/view.phtml. Where the <h1 itemprop=”name” has been set, add:
<?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; ?>
This checks that the product is in stock and displays the availability.
For hints and tips for your Magento store, why not subscribe to our Twitter feed so that you don’t miss a blog post?