There has been a lot of buzz recently about Rich Snippets and Microformats. The tags that give your website valuable search engine real estate and help to attract more traffic. There are several modules that claim to add this markup to your pages, however most of them do so by adding hidden html tags. This will give you a positive result in the Google Rich Snippet testing tool, but essentially the extra data will never be shown by Google in the search results. Why? Its against Google’s terms for the markup to be hidden, therefore any hidden content will not be used.
The best way to implement Rich Snippets in your Magento project is to code the extra tags in to your front end template. Over the next few steps I am going to walk you through how to edit your Magento theme to add the markup required.
Product Snippet
These snippets will give google extra valuable information about the product, before you start inserting these in to your Magento product page it’s important to note which attributes are available in your product page model.
Once you have decided which attributes are available you will need to edit these into the templates. Below I have shown an example of rich snippets on a Magento demo store code base:
PACKAGE/THEME/template/catalog/product/view.phtml
Line 40 becomes:
|
1 |
<div class="product-view" itemscope itemtype="http://schema.org/Product"> |
This adds the overall product data type to the markup on the page, next we will add some the of product attributes defined in the Product schema:
Name, Line 51 becomes:
|
1 |
<h1><span itemprop="name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span></h1> |
PACKAGE/THEME/template/catalog/product/view/description.phtml
Description, Line 36 becomes:
|
1 |
<div class="std" itemprop="description"> |
PACKAGE/THEME/template/catalog/product/view/media.phtml
Image, Line 40 becomes:
|
1 |
$_img = '<img itemprop="image" id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />'; |
PACKAGE/THEME/template/catalog/product/price.phtml
Price
Line 66 becomes:
|
1 |
<div class="price-box" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>" /> |
Line 437 becomes:
|
1 |
<div class="price-box" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>" /> |
In the price.phtml there are 32 examples of how the price can be rendered, to add the correct markup to all of these instances in one go please search for:
|
1 |
class="price" |
and replace all with:
|
1 |
class="price" itemprop="price" |
The end result will be 32 modified span’s that looks something like:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="price" itemprop="price" id="price-excluding-tax-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"></span> Next thing we want to look at is adding additional attributes and data. Now the location of these tags may depend on your theme and layout of the product page, for the purpose of this example I added the code to the view.phtml file however once you understand the tags you could put them anywhere in the theme that has access to the product model, you can also add as many attrubutes as you feel you have relative data for defined inside the Product rich snippets schema at <a href="http://schema.org/Product" target="_new">http://schema.org/Product</a> PACKAGE/THEME/template/catalog/product/view.phtml <em>Around Line 88 add: (assuming $_product contains the current product model)</em> [crayon-5f0701417aabd833699297] <span itemprop="sku"><?php echo $_product->getSku(); ?></span> <span itemprop="color"><?php echo $_product->getAttributeText('color'); ?></span> <span itemprop="brand" itemscope itemtype="http://schema.org/Organization"><span itemprop="name"><?php echo $_product->getAttributeText('manufacturer'); ?></span></span> <span itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue"><span itemprop="value"><?php echo $_product->getWeight(); ?></span></span> |
Please note that the above line numbers relate to the base/default phtml files for a Magento 1.8.1.0 store. You may need to alter some lines numbers in alternative versions, but the basics should be there.
Reviews Snippet
Phew gaps one of the most important snippets for your Magento store and the one that everyone want to get working is the reviews rich snippet, this is the markup that will get you the golden stars to show in the Google serps!
You will need to edit template files to get the markup in, I have shown below example changes to templates using the standard Magento theme, no other code changes were required.
Author Snippet
Although not always supported/relevant with eCommerce sites, a popular rich snippet is the Auth Tag. If you are wanting to add this to your Magento site, you need to edit the PACKAGE/THEME/template/page/html/head.phtml file. If you haven’t already got this file in your local theme you will need to copy the file over to your local theme directory (*remember! never edit the base theme files inside base/default/template as these will be overwritten if you ever upgrade).
The code that you need to add is replacing the Google Plus URL with that of your author:
|
1 |
<link rel="author" href="https://plus.google.com/11206123460541869422/posts" /> |
It should be noted that the above code would attribute one author to every page on the Magento website, if you were wanting to add authors to just product pages then you could use a if statement such as:
|
1 2 3 |
<?php if($product = Mage::registry('current_product')): ?> <link rel="author" href="https://plus.google.com/11206123460541869422/posts" /> <?php endif; ?> |
The above code could also be modified to have a different author for each product page, if you were to create a attribute in Magento called “Author” (author) then assigned authors to each product (by means of a Google+ URL) then the following code could be used:
|
1 2 3 |
<?php if($product = Mage::registry('current_product')): ?> <link rel="author" href="<?php echo $product->getAuthor(); ?>" / > <?php endif; ?> |
Conclusion
Using the above guide you should now have successfully added the Rich Snippet data on to your Magento template. Next thing you’ll want to do is start testing the markup to make sure it has all gone in correctly. To do this Google offer a great tool called “Rich Snippet Testing Tool”, this is available here: http://www.google.com/webmasters/tools/richsnippets
Further information on what tags and options as well as the recommended setup for Rich Snippets can be found directly on the Google website at: https://support.google.com/webmasters/answer/99170?hl=en
Alternatives
Some great templates on sites such as ThemeForest are already coming with markup in them, themes such as: have the correctly configured markup in them from the offset to help.
If you would like a quote for adding snippets to your store please contact us.
Leave a reply