Google Rich Snippets in Magento

Featured Image

Probably most of the store owners would like to have their products to be highlighted among other search results in search engines.
Google’s Rich snippets can help you to get desired results. All you need is to integrate them in your Magento store.

About rich snippets and structured data you can read more here.

Sample of Breadcrumbs integration into magento is pretty simple,
code of “template/page/breadcrumbs.phtml”

<?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; ?>

Rich snippets types that you can implement:

  • Reviews
  • Review ratings
  • People
  • Events
  • Recipes
  • Shopping and products
  • Marking up products for rich snippets
  • Organizations
  • Breadcrumbs
  • Videos: Facebook Share and RDFa

Rich Snippets Testing Tool is at url: http://www.google.com/webmasters/tools/richsnippets
We’ll take an example of gas masks. Just copy/paste the link:
http://www.keepshooting.com/finnish-m-61-military-gas-mask.html
into input field and you’ll see results like this:

Snippets that you can implement on Magento store are breadcrumbs, products, reviews and ratings as you can see on the described example.

Enjoy coding!


53 comments

  1. <?php if($crumbs && is_array($crumbs)): ?>
    <div class="breadcrumbs">
        <ul itemscope itemtype="http://schema.org/BreadcrumbList">
            <?php $i=1; foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
                <li class="<?php echo $_crumbName ?>" itemprop="itemListElement" itemscope
          itemtype="http://schema.org/ListItem" >
                <?php if($_crumbInfo['link']): ?>
                    <a  itemprop="item"  href="<?php echo $_crumbInfo['link'] ?>"  title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>">
    				 <label itemprop="name"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></label></a>
    				 <meta itemprop="position" content="<?php echo $i;?>" />
                <?php elseif($_crumbInfo['last']): ?>
                    <strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong>
                <?php else: ?>
                    <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
                <?php endif; ?>
                <?php if(!$_crumbInfo['last']): ?>
                     <span>»</span> 
                <?php endif; ?>
                </li>
            <?php $i++; endforeach; ?>
            	<li class="back">
                	<a href="javascript: history.go(-1)"><?php echo $this->__('Return to Previous Page') ?></a>
                </li>
        </ul>
    </div>
    <?php endif; ?>
    1. I am looking for a rich snippet codes for breadcrumbs and searchbox, we are using magento 2, i dont know how to write them, can you let me know where can i get the code or how to write it. Since the file system of magento 2 is completely changed to previous version im unable to find core files.

  2. $_crumbInfo): ?>
    <li class="” itemprop=”itemListElement” itemscope
    itemtype=”http://schema.org/ListItem” >

    <a itemprop="item" href="” title=”htmlEscape($_crumbInfo[‘title’]) ?>”>
    htmlEscape($_crumbInfo[‘label’]) ?>
    <meta itemprop="position" content="” />

    htmlEscape($_crumbInfo[‘label’]) ?>

    htmlEscape($_crumbInfo[‘label’]) ?>

     » 

    __(‘Return to Previous Page’) ?>

  3. hi Vedran,
    thank you share this post,i have a questions ,my site is business for picture frame of b2b. did i need do Rich Snippets in B2B site?

  4. Have a doubt and just now I am learning on rich snippets. is it possible to implement rich snippets for breadcrumb too?

    1. I am searching for RDFa extension and found this article. Thank you Mark for the information. I will try it on my client site.

  5. Thanks for the article. It got us moving forward with getting rich snippets installed. Now we’re trying to bring it to the next level and include all of the relevant data from our ecommerce site into the SERPs. We’re using a schema.org plugin to get the basics like aggregate reviews and image and description, but we’re trying to figure out how to do Product Video, Product Manual or other PDF, and a link to our review of the product (not aggregate product data or ratings). We can’t seem to find markup for these on the schema.org website but I see people doing it in the search results like here: http://i.imm.io/O0Ea.png
    Any suggestions on what markup they’re using to get this data to display?
    Thanks!

    1. @Isaac

      I realize I’m like three years later than you asking about this, but for those who come later as well those are Google Sitelinks. You can control what sitelinks appear for your website by using Google’s Webmaster Tools.

  6. MSemantic, our extension for semantic SEO yields display of rich snippets. We have strong evidence that this leads to higher CTR, and better converting traffic. A scientific paper about that is in the making.

    MSemantic counts more than 5000 downloads to date.

    The extension is completely free as it is LGPL-licensed.

  7. @Vedran.
    Really great code, thank you so much.
    But unfortunately it dosen’t work with me, my site is working on Magento 1.62, can anyone help me?
    I have replaced the original code like following

    <?php if($crumbs && is_array($crumbs)): ?>
    <div class="breadcrumbs">
        <ul>
            <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
                <li class="<?php echo $_crumbName ?>">
                <?php if($_crumbInfo['link']): ?>
                    <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
                <?php elseif($_crumbInfo['last']): ?>
                    <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
                <?php else: ?>
                    <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
                <?php endif; ?>
                <?php if(!$_crumbInfo['last']): ?>
                    <span><em>»</em></span>
                <?php endif; ?>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <?php endif; ?>
  8. Hello Vedran, thanks for this usefull post!

    i have one question about the rich snippet for breadcrumbs: If I use your code, it adds the text “for sale” behind my breadcrumb on my productpage. I guess this is because this code:

    <strong><?php echo $this->htmlEscape($_crumbInfo['label']) . ' for sale' ?></strong>

    Is it possible to remove this? So that nothing will be added? Thanks in advance.

    Grtz Arne

  9. @Roswell Balentien: Yea, it seems we shouldn’t do it this way after all, however, this article is now pretty much depricated now that we have scheme.org standard.

  10. It seems you’re hiding data though, a practice which is frowned upon and even advised against by google. At the same time, even though you’re hiding additional data and Google announces it won’t be displayed, it is being displayed in the testing tool.

  11. Thanks for the help, but it seems this markup does not validate as HTML5. Anyway, after a bit of digging, I found this, which Google recommends on its Webmaster Tools page and which validates as HTML5:

    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/dresses" itemprop="url">
        <span itemprop="title">Dresses</span>
      </a> ›
    </div>  
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/dresses/real" itemprop="url">
        <span itemprop="title">Real Dresses</span>
      </a> ›
    </div>  
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
        <span itemprop="title">Real Green Dresses</span>
      </a>
    </div>
  12. Hi,
    I have tried this and it work fine for me, but can you please tell us how to use it with images.

    Thanks in advance,

  13. hello, thank you for the post., quick question, i looked at the source and it seems that the page uses all formats (microdata, microformat and RDFa)? is that okay to do, what’s the reason behind it?

  14. UPDATE: Just for peoples info it took about 3 days for greenpeg.co.uk to start updating the breadcrumbs in the google’s index. Not bad speed at all.

  15. Fantastic content… it open my eyes to the Google Rich Snippet (something that I liked but never had the time to research).

    It takes some time to nail the other snippets, products specially as everything is spread out through a bunch of files, but… THANK YOU

    :o)

  16. My one like this, is it batter? I add a link for the last one.

    <?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"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
                <?php elseif($_crumbInfo['last']): ?>
                     <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>" rel="v:url" property="v:title"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
                <?php else: ?>
                    <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
                <?php endif; ?>
                <?php if(!$_crumbInfo['last']): ?>
                    <span>/ </span>
                <?php endif; ?>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <?php endif; ?>
  17. @Vedran
    Don’t get me wrong – I just awaited more “Magento” in this post and it actually is 90+% Google and 10-% Magento (and your comment also does 90+% Google…). So the title of this post suggests the opposit to me.

    I do not expect to get full code… I am really thankful for all the ideas, hints and snippets…

  18. Really cool! We have implemented this and Rich Snippets for products and waiting for Google reindex 🙂

  19. @Olaf

    The title of post suggest the exact content which is in the post. Problem seems that you wanted whole code with full implementation of Google Rich Snippets, for that you have a form down below “Get a Quote”.

    If you read the post carefully you would see the link wich leads you to sample pages of Google Rich Snippets.
    for products:

    http://www.google.com/support/webmasters/bin/answer.py?answer=146750

    for reviews:

    http://www.google.com/support/webmasters/bin/answer.py?answer=146645

    @sjolzy
    Of course it’s usefull

  20. Nice post – I would like to see some more code of the actual rich snippet data, than a re-display of the breadcrumbs-project… 😉 The title of this posts suggests a different content…

  21. @Neil

    Thanks for correcting me…
    full path of breadcrumbs file would be (if you use default package):

    webroot/app/design/frontend/default/default/template/page/html/breadcrumbs.phtml
  22. Hey Vedran,
    I think the path for the breadcrumbs.phtml should be template/page/html/breadcrumbs.phtml instead of template/page/breadcrumbs.phtml?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.