implement rich snippets in your webshop
Post on 08-Feb-2017
642 Views
Preview:
TRANSCRIPT
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
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
Requirements
Google’s Structured Data Testing Tool
Basic Magento Theming experience
These slides :-)
<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
<div itemscope itemtype="http://schema.org/Movie"> <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
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') ? 'http://schema.org/Product' : 'http://schema.org/WebPage';?><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
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
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
Open file: app/design/frontend/[package]/[theme]/template/catalogsearch/form.mini.phtml
Add to the end of the file:
<?php if(Mage::getBlockSingleton('page/html_header')->getIsHomePage()): ?><script type="application/ld+json">{ "@context": "http://schema.org", "@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
Product Information
Product name, description, image, SKU
Prices
Stock information
Reviews
Related products and similar (upsell) products
Product ratings
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
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
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') ? 'http://schema.org/AggregateOffer' : 'http://schema.org/Offer'; ?>"<?php endif; ?>> <?php if(!$_product->isGrouped()): ?> <meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/> <?php endif; ?> <?php echo $this->getPriceHtml($_product); ?>
Prices
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
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="http://schema.org/InStock"/> <?php else: ?> <link itemprop="availability" href="http://schema.org/OutOfStock"/> <?php endif; ?></div>
Stock Information
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="http://schema.org/AggregateRating"> <?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
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="http://schema.org/Review"> <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
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="http://schema.org/Rating"> <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
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
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="http://schema.org/Product">
Related Products
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
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/AggregateOffer' : 'http://schema.org/Offer'; ?>"> <meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/> <?php echo $this->getPriceHtml($_item, true, '-related') ?> </div>
Related Products
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') ? 'http://schema.org/AggregateOffer' : 'http://schema.org/Offer'; ?>"> <meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/> <?php echo $this->getPriceHtml($_link, true, '-upsell') ?></div><?php echo $this->getReviewsSummaryHtml($_link) ?>
Upsells
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="http://schema.org/Product"> <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
Open file: app/design/frontend/[package]/[theme]/template/catalog/product/price.phtml
Download the code from this page and replace the existing code:
gist.github.com/ArjenMiedema/1877ce02e02e0aaedb60
Product Price
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
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
top related