Here are steps for tagging your Magento product pages with the correct Product Schema tags. Please beware of extensions that claim to do this for you -- many use incorrect schema tags and almost all of them simply add hidden content with the schema tags, which will be ignored by Google.
Why add Product Schema tags?
- They will attach rich data to shares using AddShoppers (image, price, title, description, and stock status).
- Google will crawl them and add rich data to your search engine results (makes your site look better in search results!).
- With Product Schema tags, you can apply for Pinterest Rich Pins.
Add your Product itemtype declaration to a <div> that surrounds all of your product information. In most cases, you can add this to your "product-view" <div>.
Search in the view.phtml template (app/design/frontend/default/YOUR_ACTIVE_THEME/template/catalog/product/view.phtml) for your active theme for the following line:
And add the itemtype so that it becomes:
<div class="product-view" itemscope itemtype="http://schema.org/Product">
Tag the product name.
Search in the view.phtml template (same as in step 1) for the following line:
Add the "name" itemprop so that it becomes:
<div class="product-name" itemprop="name">
Note: If you can't find the first div, try searching for "getName()". That should help you find the <div> that contains your product name so you can add the "name" itemprop.
Tag the product description.
Search in your view.phtml template for one of the following 2 things:
Add the "description" itemprop:
<div id="description" itemprop="description">
Note: if you can't find your product description <div>, try searching for "getDescription()".
Add your "offer" itemscope.
Open up app/design/frontend/default/YOUR_ACTIVE_THEME/template/catalog/product/view/type/default.phtml. Add this to the beginning of this file, right after the beginning comment:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
And then put a closing </div> at the end of this file (Important, don't forget this!)
Add your product availability tags.
In the same file from step 4, find the following:
<?php if ($_product->isAvailable()): ?>
And add this snippet right after that tag:
<meta itemprop='availability' content='InStock' />
Find the following (make sure it's the first "else" after the previous line):
<?php else: ?>
And add this snippet right after that:
<meta itemprop='availability' content='OutOfStock' />
Tag your product price.
In the same file from step 4 and 5, find the following:
<?php echo $this->getPriceHtml($_product) ?>
Add a <div> with the "price" itemprop around it so that it becomes:
<div itemprop="price"><?php echo $this->getPriceHtml($_product) ?></div>
Last step -- almost done! Now, just tag your product image.
Open up app/design/frontend/default/YOUR_ACTIVE_THEME/template/catalog/product/view/media.phtml.
Search for "<img" to find image tags on the page. Add the "image" itemprop to your main image so it becomes:
(There will be other stuff after the itemprop attribute, of course). Also, there will probably be more than one image tag in this file. Usually, the first one is the main product image, or sometimes it has an id of "image" (id="image").
If you're using any image/gallery extensions, there is a good chance that they'll conflict here and this won't work. In that case, you'll have to find the template that the extension is using and add the image itemprop to that.
Now, you should be done!
You can check to see if this worked by using Google's Structured Data Testing Tool.