Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Implement rich snippets in your webshop

My presentation about implementing rich snippets into your Magento webshop.

  • Login to see the comments

  • Be the first to like this

Implement rich snippets in your webshop

  1. 1. Implement Rich Snippets in Your Webshop
  2. 2. Arjen Miedema |
  3. 3. Let’s see how it works!
  4. 4. Extension vs. Template Installing an extension is easy (most of the times) You can manage everything in your Magento backend You don’t want to be able to enable or disable rich snippets in your Magento backend The extension needs to make changes to your template files as well Extension You don’t know if the extension works out-of-the-box with your custom template
  5. 5. Extension vs. Template You can set all rich snippets you want in your own, custom template No unnecessary configuration options are added You’ll need some knowledge of HTML It will take some time to implement and check the rich snippets Template It’s free (if you know how to implement them yourself) Easy to extend in the future with additional information
  6. 6. Requirements Google’s Structured Data Testing Tool Basic Magento Theming experience These slides :-)
  7. 7. <div> <h1>The Minions</h1> <ul> <li> <span class="label">Directors:</span> <span class="value">Pierre Coffin, Kyle Balda</span> </li> <li> <span class="label">Duration:</span> <span class="value">1:31</span> </li> <li> <span class="label">Genre:</span> <span class="value">Animation</span> </li> </ul> <div class="description"> The movie before Despicable Me, which tells you more about the Minions. </div> </div> Example
  8. 8. <div itemscope itemtype=""> <h1 itemprop="name">The Minions</h1> <ul> <li> <span class="label">Directors:</span> <span class="value"> <span itemprop="director">Pierre Coffin</span>, <span itemprop="director">Kyle Balda</span> </span> </li> <li> <span class="label">Duration:</span> <span class="value">1:31</span> </li> <li> <span class="label">Genre:</span> <span class="value" itemprop="genre">Animation</span> </li> </ul> <div class="description" itemprop="description"> The movie before Despicable Me, which tells you more about the Minions. </div> <meta itemprop="duration" content="T1H31M"/> </div> Example
  9. 9. We can do that!
  10. 10. Open file: app/design/frontend/[package]/[theme]/template/page/1column.phtml Find: <body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>> Replace with: <?php $action = Mage::app()->getFrontController()->getAction()->getFullActionName(); $itemtype = ($action == 'catalog_product_view') ? '' : ''; ?> <body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?> itemscope itemtype="<?php echo $itemtype; ?>"> Repeat this for all page templates (2 columns and 3 columns) Set Content Type
  11. 11. Open file: app/design/frontend/[package]/[theme]/template/page/html/breadcrumbs.phtml Find: <li class="<?php echo $_crumbName ?>"> Replace with: <li class="<?php echo $_crumbName ?>"<?php if($_crumbInfo['link']):?> itemscope itemtype="http://data-vocabulary. org/Breadcrumb"<?php endif; ?>> Breadcrumbs
  12. 12. Open file: app/design/frontend/[package]/[theme]/template/page/html/breadcrumbs.phtml Find: <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->escapeHtml($_crumbInfo['title']) ?>"><?php echo $this->escapeHtml($_crumbInfo['label']) ?></a> Replace with: <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->escapeHtml($_crumbInfo['title']) ?>" itemprop=" url"><span itemprop="title"><?php echo $this->escapeHtml($_crumbInfo['label']) ?></span></a> Breadcrumbs
  13. 13. Open file: app/design/frontend/[package]/[theme]/template/catalogsearch/ Add to the end of the file: <?php if(Mage::getBlockSingleton('page/html_header')->getIsHomePage()): ?> <script type="application/ld+json"> { "@context": "", "@type": "WebSite", "url": "<?php echo Mage::getBaseUrl(); ?>", "potentialAction": { "@type": "SearchAction", "target": "<?php echo $this->getUrl('search?q={q}'); ?>", "query-input": "required name=q" } } </script> <?php endif; ?> Search Box
  14. 14. Product Information Product name, description, image, SKU Prices Stock information Reviews Related products and similar (upsell) products Product ratings
  15. 15. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml Find: <div class="product-name"> <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1> </div> Replace with: <div class="product-name"> <h1 itemprop="name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1> <meta itemprop="sku" content="<?php echo $_product->getSku() ?>"/> </div> Product Name & SKU
  16. 16. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml Find: <div class="short-description"> <h2><?php echo $this->__('Quick Overview') ?></h2> <div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div> </div> Replace with: <div class="short-description"> <h2><?php echo $this->__('Quick Overview') ?></h2> <div class="std" itemprop="description"><?php echo $_helper->productAttribute($_product, nl2br($_product- >getShortDescription()), 'short_description') ?></div> </div> Product Description
  17. 17. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml Find: <div class="price-info"> <?php echo $this->getPriceHtml($_product); ?> Replace with: <div class="price-info"<?php if(!$_product->isGrouped()): ?> itemprop="offers" itemscope itemtype="<?php echo ($_product->getTypeId() == 'giftcard' || $_product->getTypeId() == 'bundle') ? '' : ''; ?>"<?php endif; ?>> <?php if(!$_product->isGrouped()): ?> <meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/> <?php endif; ?> <?php echo $this->getPriceHtml($_product); ?> Prices
  18. 18. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/view/media.phtml Find: <img id="image-main" class="gallery-image visible" src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>" title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" /> Replace with: <img id="image-main" itemprop="image" class="gallery-image visible" src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>" title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" /> Product Image
  19. 19. Open file: Open file: app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml Find: <?php echo $this->getTierPriceHtml() ?> </div> Replace with: <?php echo $this->getTierPriceHtml() ?> <?php if ($_product->isAvailable()): ?> <link itemprop="availability" href=""/> <?php else: ?> <link itemprop="availability" href=""/> <?php endif; ?> </div> Stock Information
  20. 20. Open file: app/design/frontend/[package]/[theme]/template/review/helper/summary.phtml Find: <?php if ($this->getReviewsCount()): ?> <div class="ratings"> <?php if ($this->getRatingSummary()):?> Replace with: <?php if ($this->getReviewsCount()): ?> <div class="ratings" itemprop="aggregateRating" itemscope itemtype=""> <?php if ($this->getRatingSummary()):?> <meta itemprop="ratingValue" content="<?php echo $this->getRatingSummary()/10; ?>"/> <meta itemprop="reviewCount" content="<?php echo $this->getReviewsCount(); ?>"/> <meta itemprop="bestRating" content="10"/> <meta itemprop="worstRating" content="0"/> Product Ratings
  21. 21. Open file: app/design/frontend/[package]/[theme]/template/review/product/view/list.phtml Find: <dd> <?php $_votes = $_review->getRatingVotes(); ?> <?php echo nl2br($this->escapeHtml($_review->getDetail())) ?> Replace with: <dd itemprop="review" itemscope itemtype=""> <meta itemprop="url" content="<?php echo $this->getReviewUrl($_review->getId()) ?>"/> <meta itemprop="name" content="<?php echo $_review->getTitle() ?>"/> <?php $_votes = $_review->getRatingVotes(); ?> <div itemprop="description"><?php echo nl2br($this->escapeHtml($_review->getDetail())) ?></div> Reviews
  22. 22. Open file: app/design/frontend/[package]/[theme]/template/review/product/view/list.phtml Find: <td> <div class="rating-box"> <div class="rating" style="width:<?php echo $_vote->getPercent() ?>%;"></div> </div> </td> Replace with: <td> <div class="rating-box" itemprop="reviewRating" itemscope="itemscope" itemtype=""> <meta itemprop="worstRating" content="1" /> <meta itemprop="ratingValue" content="<?php echo $_vote->getPercent() / 10; ?>" /> <meta itemprop="bestRating" content="10" /> <div class="rating" style="width:<?php echo $_vote->getPercent() ?>%;"></div> </div> </td> Reviews
  23. 23. Open file: app/design/frontend/[package]/[theme]/template/review/product/view/list.phtml Find: <span class="review-meta"> <?php echo $this->__('Review by %s', $this->escapeHtml($_review->getNickname())) ?> / <?php echo $this->__('(Posted on %s)', $this->formatDate($_review->getCreatedAt()), 'long') ?> </span> Replace with: <span class="review-meta"> <meta itemprop="datePublished" content="<?php echo Mage::app()->getLocale()->date(strtotime($_review- >getCreatedAt()))->get('YYYY-MM-dd'); ?>"> <meta itemprop="author" content="<?php echo $this->escapeHtml($_review->getNickname()); ?>"> <?php echo $this->__('Review by %s', $this->escapeHtml($_review->getNickname())) ?> / <?php echo $this->__('(Posted on %s)', $this->formatDate($_review->getCreatedAt()), 'long') ?> </span> Reviews
  24. 24. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/list/related.phtml Find: <ol class="mini-products-list" id="block-related"> <?php foreach($this->getItems() as $_item): ?> <li class="item"> Replace with: <ol class="mini-products-list" id="block-related"> <?php foreach($this->getItems() as $_item): ?> <li class="item" itemprop="isRelatedTo" itemscope itemtype=""> Related Products
  25. 25. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/list/related.phtml Find: <div class="product"> <a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>" class=" product-image"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75) ?>" width=" 75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a> Replace with: <div class="product"> <a href="<?php echo $_item->getProductUrl() ?>" itemprop="url" title="<?php echo $this->escapeHtml($_item- >getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')- >resize(75) ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a> Related Products
  26. 26. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/list/related.phtml Find: <div class="product-details"> <p class="product-name"><a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->escapeHtml($_item- >getName()) ?></a></p> <?php echo $this->getPriceHtml($_item, true, '-related') ?> Replace with: <div class="product-details"> <p class="product-name" itemprop="name"><a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this- >escapeHtml($_item->getName()) ?></a></p> <div class="price-info" itemprop="offers" itemscope itemtype="<?php echo ($_item->isGrouped() || $_item- >getTypeId() == 'giftcard' || $_item->getTypeId() == 'bundle') ? '' : 'http://schema. org/Offer'; ?>"> <meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/> <?php echo $this->getPriceHtml($_item, true, '-related') ?> </div> Related Products
  27. 27. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/list/upsell.phtml Find: <h3 class="product-name"><a href="<?php echo $_link->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_link- >getName()) ?>"><?php echo $this->escapeHtml($_link->getName()) ?></a></h3> <?php echo $this->getPriceHtml($_link, true, '-upsell') ?> <?php echo $this->getReviewsSummaryHtml($_link) ?> Replace with: <h3 class="product-name" itemprop="name"><a href="<?php echo $_link->getProductUrl() ?>" title="<?php echo $this- >escapeHtml($_link->getName()) ?>"><?php echo $this->escapeHtml($_link->getName()) ?></a></h3> <div class="price-info" itemprop="offers" itemscope itemtype="<?php echo ($_link->isGrouped() || $_link->getTypeId() == 'giftcard' || $_link->getTypeId() == 'bundle') ? '' : ''; ? >"> <meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/> <?php echo $this->getPriceHtml($_link, true, '-upsell') ?> </div> <?php echo $this->getReviewsSummaryHtml($_link) ?> Upsells
  28. 28. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/list/upsell.phtml Find: <li> <a href="<?php echo $_link->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_link->getName()) ?>" class=" product-image"> <img src="<?php echo $this->helper('catalog/image')->init($_link, 'small_image')->resize(280) ?>" alt="<?php echo $this->escapeHtml($_link->getName()) ?>" /> </a> Replace with: <li class="item" itemprop="isSimilarTo" itemscope itemtype=""> <a href="<?php echo $_link->getProductUrl() ?>" itemprop="url" title="<?php echo $this->escapeHtml($_link- >getName()) ?>" class="product-image"> <img itemprop="image" src="<?php echo $this->helper('catalog/image')->init($_link, 'small_image')->resize(280) ?>" alt="<?php echo $this->escapeHtml($_link->getName()) ?>" /> </a> Upsells
  29. 29. Open file: app/design/frontend/[package]/[theme]/template/catalog/product/price.phtml Download the code from this page and replace the existing code: Product Price
  30. 30. Test Your Rich Snippets Open a product page in your webshop View the source code Copy the entire source code Go to the Google Structured Data Testing Tool Paste your source code in the left column and validate Check the result in the right column Repeat with different product and product types
  31. 31. Extend Your Data Send the product condition (used, new, etc.) Add attribute related data (manufacturer, color, etc.) Extend it with other rich snippets (Organization, blog) It’s easy to extend the data you send to Google
  32. 32. Questions?