SlideShare a Scribd company logo
Implement Rich Snippets
in Your Webshop
Arjen Miedema
twitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl
Let’s see how it works!
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
We can do that!
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
Questions?

More Related Content

What's hot

SproutCore is Awesome - HTML5 Summer DevFest
SproutCore is Awesome - HTML5 Summer DevFestSproutCore is Awesome - HTML5 Summer DevFest
SproutCore is Awesome - HTML5 Summer DevFest
tomdale
 
Plug in development
Plug in developmentPlug in development
Plug in development
Lucky Ali
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998
Filippo Dino
 
You're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp OrlandoYou're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp Orlando
Chris Scott
 
Seven deadly theming sins
Seven deadly theming sinsSeven deadly theming sins
Seven deadly theming sins
George Stephanis
 
Mastering Twig (DrupalCon Barcelona 2015)
Mastering Twig (DrupalCon Barcelona 2015)Mastering Twig (DrupalCon Barcelona 2015)
Mastering Twig (DrupalCon Barcelona 2015)
Javier Eguiluz
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas
 
Rails 3: Dashing to the Finish
Rails 3: Dashing to the FinishRails 3: Dashing to the Finish
Rails 3: Dashing to the Finish
Yehuda Katz
 
ARIA Gone Wild
ARIA Gone WildARIA Gone Wild
ARIA Gone Wild
Jared Smith
 
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Alessandro Nadalin
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
Jens-Christian Fischer
 
Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5
성일 한
 
Css web gallery
Css web galleryCss web gallery
Css web gallery
Daniel Downs
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
Ted Kulp
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Leonardo Balter
 
Hooks WCSD12
Hooks WCSD12Hooks WCSD12
Hooks WCSD12
Jeffrey Zinn
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
elliotjaystocks
 
Unit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxUnit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBenelux
Michelangelo van Dam
 
Stole16
Stole16Stole16
Stole16
rworldoffice
 
Joomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template DesignJoomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template Design
Andy Wallace
 

What's hot (20)

SproutCore is Awesome - HTML5 Summer DevFest
SproutCore is Awesome - HTML5 Summer DevFestSproutCore is Awesome - HTML5 Summer DevFest
SproutCore is Awesome - HTML5 Summer DevFest
 
Plug in development
Plug in developmentPlug in development
Plug in development
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998
 
You're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp OrlandoYou're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp Orlando
 
Seven deadly theming sins
Seven deadly theming sinsSeven deadly theming sins
Seven deadly theming sins
 
Mastering Twig (DrupalCon Barcelona 2015)
Mastering Twig (DrupalCon Barcelona 2015)Mastering Twig (DrupalCon Barcelona 2015)
Mastering Twig (DrupalCon Barcelona 2015)
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Rails 3: Dashing to the Finish
Rails 3: Dashing to the FinishRails 3: Dashing to the Finish
Rails 3: Dashing to the Finish
 
ARIA Gone Wild
ARIA Gone WildARIA Gone Wild
ARIA Gone Wild
 
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5
 
Css web gallery
Css web galleryCss web gallery
Css web gallery
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
Hooks WCSD12
Hooks WCSD12Hooks WCSD12
Hooks WCSD12
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
 
Unit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxUnit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBenelux
 
Stole16
Stole16Stole16
Stole16
 
Joomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template DesignJoomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template Design
 

Similar to Implement rich snippets in your webshop

Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
Kyle Cearley
 
Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress
Maurizio Pelizzone
 
May the core be with you - JandBeyond 2014
May the core be with you - JandBeyond 2014May the core be with you - JandBeyond 2014
May the core be with you - JandBeyond 2014
Chad Windnagle
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable Applications
Alessandro Molina
 
Django crush course
Django crush course Django crush course
Django crush course
Mohammed El Rafie Tarabay
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
Jesse James Arnold
 
Utilization of zend an ultimate alternate for intense data processing
Utilization of zend  an ultimate alternate for intense data processingUtilization of zend  an ultimate alternate for intense data processing
Utilization of zend an ultimate alternate for intense data processing
Career at Elsner
 
Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel
Engine Yard
 
Gail villanueva add muscle to your wordpress site
Gail villanueva   add muscle to your wordpress siteGail villanueva   add muscle to your wordpress site
Gail villanueva add muscle to your wordpress site
references
 
WordPress Structure and Best Practices
WordPress Structure and Best PracticesWordPress Structure and Best Practices
WordPress Structure and Best Practices
markparolisi
 
Jquery tutorial
Jquery tutorialJquery tutorial
Jquery tutorial
Bui Kiet
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
Hardeep Asrani
 
D7 theming what's new - London
D7 theming what's new - LondonD7 theming what's new - London
D7 theming what's new - London
Marek Sotak
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
Max Claus Nunes
 
Cakephp's Cache
Cakephp's CacheCakephp's Cache
Cakephp's Cache
vl
 
Backbone - TDC 2011 Floripa
Backbone - TDC 2011 FloripaBackbone - TDC 2011 Floripa
Backbone - TDC 2011 Floripa
Rafael Felix da Silva
 
Making Magento flying like a rocket! (A set of valuable tips for developers)
Making Magento flying like a rocket! (A set of valuable tips for developers)Making Magento flying like a rocket! (A set of valuable tips for developers)
Making Magento flying like a rocket! (A set of valuable tips for developers)
Ivan Chepurnyi
 
CodeIgniter PHP MVC Framework
CodeIgniter PHP MVC FrameworkCodeIgniter PHP MVC Framework
CodeIgniter PHP MVC Framework
Bo-Yi Wu
 
Django design-patterns
Django design-patternsDjango design-patterns
Django design-patterns
Agiliq Info Solutions India Pvt Ltd
 
How to Create A Magento Adminhtml Controller in Magento Extension
How to Create A Magento Adminhtml Controller in Magento ExtensionHow to Create A Magento Adminhtml Controller in Magento Extension
How to Create A Magento Adminhtml Controller in Magento Extension
Hendy Irawan
 

Similar to Implement rich snippets in your webshop (20)

Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
 
Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress
 
May the core be with you - JandBeyond 2014
May the core be with you - JandBeyond 2014May the core be with you - JandBeyond 2014
May the core be with you - JandBeyond 2014
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable Applications
 
Django crush course
Django crush course Django crush course
Django crush course
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
 
Utilization of zend an ultimate alternate for intense data processing
Utilization of zend  an ultimate alternate for intense data processingUtilization of zend  an ultimate alternate for intense data processing
Utilization of zend an ultimate alternate for intense data processing
 
Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel
 
Gail villanueva add muscle to your wordpress site
Gail villanueva   add muscle to your wordpress siteGail villanueva   add muscle to your wordpress site
Gail villanueva add muscle to your wordpress site
 
WordPress Structure and Best Practices
WordPress Structure and Best PracticesWordPress Structure and Best Practices
WordPress Structure and Best Practices
 
Jquery tutorial
Jquery tutorialJquery tutorial
Jquery tutorial
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
 
D7 theming what's new - London
D7 theming what's new - LondonD7 theming what's new - London
D7 theming what's new - London
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
Cakephp's Cache
Cakephp's CacheCakephp's Cache
Cakephp's Cache
 
Backbone - TDC 2011 Floripa
Backbone - TDC 2011 FloripaBackbone - TDC 2011 Floripa
Backbone - TDC 2011 Floripa
 
Making Magento flying like a rocket! (A set of valuable tips for developers)
Making Magento flying like a rocket! (A set of valuable tips for developers)Making Magento flying like a rocket! (A set of valuable tips for developers)
Making Magento flying like a rocket! (A set of valuable tips for developers)
 
CodeIgniter PHP MVC Framework
CodeIgniter PHP MVC FrameworkCodeIgniter PHP MVC Framework
CodeIgniter PHP MVC Framework
 
Django design-patterns
Django design-patternsDjango design-patterns
Django design-patterns
 
How to Create A Magento Adminhtml Controller in Magento Extension
How to Create A Magento Adminhtml Controller in Magento ExtensionHow to Create A Magento Adminhtml Controller in Magento Extension
How to Create A Magento Adminhtml Controller in Magento Extension
 

Recently uploaded

一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
uqbyfm
 
peru primero de la alianza con el pacifico
peru primero de la alianza con el pacificoperu primero de la alianza con el pacifico
peru primero de la alianza con el pacifico
FernandoGuevaraVentu2
 
IPv6: Unlocking the Potential, presented by Paul Wilson at CommunicAsia 2024
IPv6: Unlocking the Potential, presented by Paul Wilson at CommunicAsia 2024IPv6: Unlocking the Potential, presented by Paul Wilson at CommunicAsia 2024
IPv6: Unlocking the Potential, presented by Paul Wilson at CommunicAsia 2024
APNIC
 
Unlimited Fun With Call Girls Hyderabad ✅ 7737669865 💘 FULL CASH PAYMENT
Unlimited Fun With Call Girls Hyderabad ✅ 7737669865 💘 FULL CASH PAYMENTUnlimited Fun With Call Girls Hyderabad ✅ 7737669865 💘 FULL CASH PAYMENT
Unlimited Fun With Call Girls Hyderabad ✅ 7737669865 💘 FULL CASH PAYMENT
keshavtiwari584
 
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENTUnlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
rajesh344555
 
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
Febless Hernane
 
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call GirlsBangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
narwatsonia7
 
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
Web Inspire
 
DocSplit Subsequent Implementation Activation.pptx
DocSplit Subsequent Implementation Activation.pptxDocSplit Subsequent Implementation Activation.pptx
DocSplit Subsequent Implementation Activation.pptx
AmitTuteja9
 
Lesson6 in spreadsheet 2024 for g12..ppt
Lesson6 in spreadsheet 2024 for g12..pptLesson6 in spreadsheet 2024 for g12..ppt
Lesson6 in spreadsheet 2024 for g12..ppt
ReyLouieSedigo1
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
Emre Gündoğdu
 
The Principal Up-and-Coming Risks to Cloud-Based Security!
The Principal Up-and-Coming Risks to Cloud-Based Security!The Principal Up-and-Coming Risks to Cloud-Based Security!
The Principal Up-and-Coming Risks to Cloud-Based Security!
Alec Kassir cozmozone
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
GNAMBIKARAO
 
HistorySrSec2024 daahi sadhin sgg-25.pdf
HistorySrSec2024 daahi sadhin sgg-25.pdfHistorySrSec2024 daahi sadhin sgg-25.pdf
HistorySrSec2024 daahi sadhin sgg-25.pdf
AdiySgh
 
169+ Call Girls In Navi Mumbai | 9930245274 | Reliability Escort Service Near...
169+ Call Girls In Navi Mumbai | 9930245274 | Reliability Escort Service Near...169+ Call Girls In Navi Mumbai | 9930245274 | Reliability Escort Service Near...
169+ Call Girls In Navi Mumbai | 9930245274 | Reliability Escort Service Near...
tanichadda371 #v08
 
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. ITNetwork Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Sarthak Sobti
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
dtagbe
 
India Cyber Threat Report of 2024 with year
India Cyber Threat Report of 2024 with yearIndia Cyber Threat Report of 2024 with year
India Cyber Threat Report of 2024 with year
AkashKumar1733
 
Decentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and EsportsDecentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and Esports
Federico Ast
 

Recently uploaded (20)

一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
 
peru primero de la alianza con el pacifico
peru primero de la alianza con el pacificoperu primero de la alianza con el pacifico
peru primero de la alianza con el pacifico
 
IPv6: Unlocking the Potential, presented by Paul Wilson at CommunicAsia 2024
IPv6: Unlocking the Potential, presented by Paul Wilson at CommunicAsia 2024IPv6: Unlocking the Potential, presented by Paul Wilson at CommunicAsia 2024
IPv6: Unlocking the Potential, presented by Paul Wilson at CommunicAsia 2024
 
Unlimited Fun With Call Girls Hyderabad ✅ 7737669865 💘 FULL CASH PAYMENT
Unlimited Fun With Call Girls Hyderabad ✅ 7737669865 💘 FULL CASH PAYMENTUnlimited Fun With Call Girls Hyderabad ✅ 7737669865 💘 FULL CASH PAYMENT
Unlimited Fun With Call Girls Hyderabad ✅ 7737669865 💘 FULL CASH PAYMENT
 
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENTUnlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
 
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
 
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call GirlsBangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
 
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
 
DocSplit Subsequent Implementation Activation.pptx
DocSplit Subsequent Implementation Activation.pptxDocSplit Subsequent Implementation Activation.pptx
DocSplit Subsequent Implementation Activation.pptx
 
Lesson6 in spreadsheet 2024 for g12..ppt
Lesson6 in spreadsheet 2024 for g12..pptLesson6 in spreadsheet 2024 for g12..ppt
Lesson6 in spreadsheet 2024 for g12..ppt
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
 
The Principal Up-and-Coming Risks to Cloud-Based Security!
The Principal Up-and-Coming Risks to Cloud-Based Security!The Principal Up-and-Coming Risks to Cloud-Based Security!
The Principal Up-and-Coming Risks to Cloud-Based Security!
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
 
HistorySrSec2024 daahi sadhin sgg-25.pdf
HistorySrSec2024 daahi sadhin sgg-25.pdfHistorySrSec2024 daahi sadhin sgg-25.pdf
HistorySrSec2024 daahi sadhin sgg-25.pdf
 
169+ Call Girls In Navi Mumbai | 9930245274 | Reliability Escort Service Near...
169+ Call Girls In Navi Mumbai | 9930245274 | Reliability Escort Service Near...169+ Call Girls In Navi Mumbai | 9930245274 | Reliability Escort Service Near...
169+ Call Girls In Navi Mumbai | 9930245274 | Reliability Escort Service Near...
 
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. ITNetwork Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
 
India Cyber Threat Report of 2024 with year
India Cyber Threat Report of 2024 with yearIndia Cyber Threat Report of 2024 with year
India Cyber Threat Report of 2024 with year
 
Decentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and EsportsDecentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and Esports
 

Implement rich snippets in your webshop

  • 2. Arjen Miedema twitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl
  • 3.
  • 4.
  • 5.
  • 6.
  • 7. Let’s see how it works!
  • 8. 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
  • 9. 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
  • 10. Requirements Google’s Structured Data Testing Tool Basic Magento Theming experience These slides :-)
  • 11. <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
  • 12. <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
  • 13.
  • 14. We can do that!
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. Product Information Product name, description, image, SKU Prices Stock information Reviews Related products and similar (upsell) products Product ratings
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36.
  • 37.
  • 38.
  • 39. 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