Implement Product Markup into Magento

In this tutorial we’ll be looking at how we can add all the main features of Product Schema into your Magento template files – editing the files and then testing it through Google’s own structured data testing tool.

As mentioned in my Magento SEO book, we add product schema into our Magento websites in order for search engines such as Google to be able to identify the main purpose of our page – in this case the main attributes of our product.

The main benefits of adding product schema markup to our pages is for search engines to be able to read them more easily and present ‘rich snippets’ in their own results pages based on the information they find.

These ‘rich snippets’ typically display our product price or price-range and any aggregated reviews that our product may have accumulated. Although not a ranking factor in itself they do present the user with a ‘juicier’ search result – giving your listing a bit of an edge over the competition (those not displayed with rich snippets).

Without rich snippets your listing in the results pages of Google may look a little ‘standard’.

Standard Listing

In this tutorial we’re going to implement the following on our Magento templates:

  • Product Schema
  • Aggregate Rating Schema
  • Offer Schema

Implementing Product Schema

First of all we must edit our product view.phtml to wrap our dynamic product pages in our new markup. Open up your [your_theme]/template/catalog/product/view.phtml and edit the following lines:

<div class="product-view">

// to

<div class="product-view" itemscope itemtype="">

// 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 will wrap our view.phtml inside the “Product” item type. We can then set attributes such as the product name (in this case using the <h1> tag. Now we need to add markup to our product description and our product image.

Still within view.phtml (depending on your theme) find the line that calls our product description (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 add our image attribute to the markup we should venture inside [your_theme]/template/catalog/product/view/media.phtml:

$_img = '<img ....etc

// change to

$_img = '<img itemprop="image" ....etc

Next we need to add our Aggregate Rating Schema.

Implementing AggregateRating Schema

The AggregateRating schema will only show up if there are reviews for our product and also whether our theme supports showing these reviews. Typically within [your_theme]/template/review/helper/summary.phtml we would change the following lines:

<div class="ratings">

// change to

<div class="ratings" itemprop="aggregateRating" itemscope itemtype="">

Next, we need to add a way to tell search engines what our best and worst ratings are, as well as what our average rating is for our product and how many reviews we have had in total. To do this we’ll simply add a few hidden fields – it’s always better to wrap visible items in our markup but it depends on what you are displaying on your store. For now we’ll just add a few hidden fields:

// just underneath <div class="ratings" add the following
<span class="no-display" itemprop="reviewCount"><?php echo $this->getReviewsCount() ?> 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 the review count as well as work out the /5 rating average for our product.

Once we’ve added this we should start to see some change on our structured data testing tool:

Reviews and Ratings

Implementing Offer Schema

The last stage is to add in our Offer schema. To do this we would usually go into a couple of files and edit where we bring out out “availability” and “price”. Unfortunately the price.phtml is quite complex – so for simplicities sake we can simply add a hidden field to our [your_theme]/template/catalog/product/view.phtml:

// just underneath where we set our <h1 itemprop="name" add the following
<?php if($_product->isAvailable()): ?>
<div class="no-display" itemprop="offers" itemscope itemtype="">
     <span itemprop="price"><?php echo Mage::helper('core')->currency($_product->getFinalPrice()); ?></span>
     <link itemprop="availability" href="" />
<?php endif; ?>

This will check first of all to see if the product is available (in stock) and if so will display our products’ price and availability.

If all of the above has been implemented successfully we should be able to see all 3 markup’s in action.

Reviews and Prices
  • wdxtreme

    thanks…nice tutorial..

    • mihai

      thank you for your tutorial, works great with magento 1.8.1

  • LuizSantos

    I have followed the tuto, but curiously nothing happened, actually it got worse, my Yotpo Review Stars are not showing anymore 🙁

    • CannyCookie

      If you’re using yotpo then the magento ratings block is probably disabled anyway

      • LuizSantos

        U did not get my point. Yes, Magento ratings are disable. But rating stars were showing up on Google search. Now it doesn’t anymore. I have disabled schema and reinstalled Yotpo and still no stars on Google search. Hope within the next two weeks they come back

        • James Birch

          Hi, did they come back? mine dissapeared too!!

          • LuizSantos

            Partially yes, I had to uninstall everything and install Yotpo Reviews again.
            Now some links are showing up on Google, but other ones that I had before is still not showing.

  • APP-US

    Great tutorial! Thank you very much for providing this. Works perfectly on 1.7!

  • Cristian Vultur

    How can I retrieve the brand out of the manufacturer attribute?

  • That’s a must have for e-commerce sites.

  • Marx

    How can I retrieve the brand out of the manufacturer attribute?

  • Kevin

    Can you tell me how do i remove the price from showing on schema?

  • Surao

    For implementing aggrate schema, you say

    // then just within getRatingSummary()):?> add the following

    getRatingSummary()/20,1); ?>

    So do you replace getRatingSummary()):?>

  • James Stubbs

    weird I made these changes and nothing changed as far as structured data testing tool was concerned. No ratings showing up even though they are enabled and the product I tested had ratings, yet in google test tool still wouldn’t display the rating. Also the price never showed either. I know my site is on a CDN network maybe that is why I don’t see the instant changes?

  • Vessler

    Also works for Magento 1.9?

    • Hi Vessler,

      it also works for M1.9
      just give it a try on your development website.
      Mind that things have been changed and code might look different then the examples above.

  • I get the following errors with this;

    Error: Page contains property “reviewcount” which is not part of the schema.
    Error: Page contains property “price” which is not part of the schema.
    Error: Page contains property “price” which is not part of the schema.

    Is there a way to correct this? :/

  • Himel

    I implemented all rich snippets for magento product. But I wasn’t able to implemented this code for manufacturer (product brand) name.

    Where I have to put snippets code for brand name?

  • Steve

    I had to use Mage::helper(‘tax’)->getPrice($_product, $_product->getFinalPrice()); to get final price because Mage::helper(‘core’)->currency($_product->getFinalPrice()) was creating a invalid schema number as it brought html in.

  • Hannah Jackson ❄️

    Price isn’t working for me, but everything else is. Google is throwing the error “£12.00 (The property £12.00 is not a valid price specification. Find out more about “

  • I would suggest using Mage::helper(‘core’)->currency($_product->getFinalPrice(), false, false); for the price. The price in schema should never include the currency symbol, since this is declared using PriceCurrency.

  • Lisa Stuart

    i have all things but in google its displaying same as before no change. Is there anything else we need to do to display in google ?