Embed Rich Snippets in your Magento product page.

1. hans2103 30 May 201330 May 2013hans2103

2. hans2103 30 May 2013

3. hans2103 30 May 2013

4. hans2103 30 May 2013

5. hans2103 30 May 2013

6. hans2103 30 May 2013

7. hans2103 30 May 2013

8. hans2103 30 May 2013

9. hans2103 30 May 2013

10. hans2103 30 May 2013

11. hans2103 30 May 2013

12. hans2103 30 May 2013

13. hans2103 30 May 2013

14. hans2103 30 May 2013
markup
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August
16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-
trailer.html">Trailer</a>
</div>

15. hans2103 30 May 2013
itemscope
<div itemscope>
<h1>Avatar</h1>
<span>Director: James Cameron (born August
16, 1954) </span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-
trailer.html">Trailer</a>
</div>

16. hans2103 30 May 2013
<div itemscope itemtype="http://schema.org/
Movie">
<h1>Avatar</h1>
<span>Director: James Cameron (born August
16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-
trailer.html">Trailer</a>
</div>
itemtype

17. hans2103 30 May 2013
itemprop
<div itemscope itemtype ="http://schema.org/
Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span
itemprop="director">James Cameron</span>
(born August 16, 1954)</span>
<span itemprop="genre">Science fiction</
span>
<a href="../movies/avatar-theatrical-
trailer.html" itemprop="trailer">Trailer</a>
</div>

18. hans2103 30 May 2013
embedded items
<div itemscope itemtype ="http://schema.org/
Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope
itemtype="http://schema.org/Person">
Director: <span itemprop="name">James
Cameron</span> (born <span
itemprop="birthDate">August 16, 1954)</span>
</div>
<span itemprop="genre">Science fiction</
span>
<a href="../movies/avatar-theatrical-
trailer.html" itemprop="trailer">Trailer</a>

19. hans2103 30 May 2013
hopsakee... aan de slag!

20. hans2103 30 May 2013

21. hans2103 30 May 2013

22. hans2103 30 May 2013

23. hans2103 30 May 2013

24. hans2103 30 May 2013
add ?ath=1 to url

25. hans2103 30 May 2013

26. hans2103 30 May 2013
file to edit

27. hans2103 30 May 2013
• itemtype = http://schema.org/Product
• itemscope
add scope Product

28. hans2103 30 May 2013

29. hans2103 30 May 2013
open
template/catalog/product/view.phtml
find
change by
save&close
<div class="product-view" itemscope
itemtype="http://schema.org/Product">
<div class="product-view">

30. hans2103 30 May 2013
• itemprop = name
• is part of itemtype = Product
name

31. hans2103 30 May 2013
<div class="product-name">
<h1><?php echo $_helper-
>productAttribute($_product, $_product-
>getName(), 'name') ?></h1>
</div>
open
template/catalog/product/view.phtml
find
change by
save&close
<div class="product-name">
<h1 itemprop="name"><?php echo $_helper-
>productAttribute($_product, $_product-
>getName(), 'name') ?></h1>
</div>

32. hans2103 30 May 2013
• itemprop = description
• is part of itemtype = Product
description

33. hans2103 30 May 2013
<div class="std"><?php echo $_helper-
>productAttribute($_product, nl2br($_product-
>getShortDescription()),
'short_description') ?></div>
open
template/catalog/product/view.phtml
find
change by
save&close
<div class="std" itemprop="description"><?php
echo $_helper->productAttribute($_product,
nl2br($_product->getShortDescription()),
'short_description') ?></div>

34. hans2103 30 May 2013
• itemprop = image
• is part of itemtype = Product
image

35. hans2103 30 May 2013
repeat
<?php
$_img = '<img id="image" itemprop="image"
src="'.$this->helper('catalog/image')-
>init($_product, 'image')
<?php
$_img = '<img id="image" src="'.$this-
>helper('catalog/image')->init($_product,
'image')
open
template/catalog/product/view/media.phtml
find
change by
save&close

36. hans2103 30 May 2013
• itemprop = url
• is part of itemtype = Product
url

37. hans2103 30 May 2013
open
template/catalog/product/view.phtml
find
change by
save&close
<div class="product-view" itemscope
itemtype="http://schema.org/Product">
<div class="product-view" itemscope
itemtype="http://schema.org/Product">
<meta itemprop="url" content="<?php echo
$_product->getProductUrl() ?>"/>

38. hans2103 30 May 2013
• itemtype = http://schema.org/Offer
• itemscope
add scope Offer

39. hans2103 30 May 2013

40. hans2103 30 May 2013
<div itemprop="offers" itemscope
itemtype="http://schema.org/Offer">
<?php echo $this-
>getChildHtml('product_type_data') ?>
<?php echo $this->getTierPriceHtml() ?>
</div>
open
template/catalog/product/view.phtml
find
change by
save&close
<?php echo $this-
>getChildHtml('product_type_data') ?>
<?php echo $this->getTierPriceHtml() ?>

41. hans2103 30 May 2013
• itemprop = priceCurrency
• is part of itemtype = Offer
•
priceCurrency
<meta itemprop="priceCurrency"
content="<?php echo $currency_code
= Mage::app()->getStore()-
>getCurrentCurrencyCode(); ?>"/>

42. hans2103 30 May 2013

43. hans2103 30 May 2013
<?php echo $this-
>getChildHtml('alert_urls') ?>
<div itemprop="offers" itemscope
itemtype="http://schema.org/Offer">
open
template/catalog/product/view.phtml
find
<meta itemprop="priceCurrency" content="<?php
echo $currency_code = Mage::app()-
>getStore()->getCurrentCurrencyCode(); ?>"/>
add after
save&close

44. hans2103 30 May 2013
• itemprop = availability
• is part of itemtype = Offer
itemAvailability

45. hans2103 30 May 2013

46. hans2103 30 May 2013
<p class="availability in-stock"><link
itemprop="availability" href="http://
schema.org/InStock"><?php echo $this-
>__('Availability:') ?> <span><?php echo
$this->__('In stock') ?></span></p>
<p class="availability in-stock"><?php echo
$this->__('Availability:') ?> <span><?php
echo $this->__('In stock') ?></span></p>
open
template/catalog/product/view/type/default.phtml
find
change by
save&close

47. hans2103 30 May 2013
<p class="availability out-of-stock"><link
itemprop="availability" href="http://
schema.org/OutOfStock"><?php echo $this-
>__('Availability:') ?> <span><?php echo
$this->__('Out of stock') ?></span></p>
<p class="availability out-of-stock"><?php
echo $this->__('Availability:') ?> <span><?
php echo $this->__('Out of stock') ?></
span></p>
template/catalog/product/view/type/default.phtml
open
find
change by
save&close

48. hans2103 30 May 2013
• itemprop = ItemCondition
• is part of itemtype = Offer
• create new attribute first
•
itemCondition
<link itemprop="itemCondition"
href="http://schema.org/
<echo_attribute>Condition" />

49. hans2103 30 May 2013

50. hans2103 30 May 2013

51. hans2103 30 May 2013

52. hans2103 30 May 2013
<?php echo $this-
>getChildHtml('alert_urls') ?>
<div itemprop="offers" itemscope
itemtype="http://schema.org/Offer">
open
template/catalog/product/view.phtml
find
<link itemprop="itemCondition"
href="http://schema.org/<?php echo $_product-
>getResource()-
>getAttribute('offeritemcondition')-
>getFrontend()->getValue($_product) ?
>Condition" />
add after
save&close

53. hans2103 30 May 2013
• itemprop = price
• is part of itemtype = Offer
• download https://gist.github.com/
hans2103/5635901
• Adding a itemprop to price in upsell is not
wanted.
price

54. hans2103 30 May 2013
open
template/catalog/product/view/type/default.phtml
find
add after
save&close
<?php echo $this->getPriceHtml($_product,
false, '-aggregate') ?>
<?php echo $this->getPriceHtml($_product) ?>

55. hans2103 30 May 2013
• itemtype = http://schema.org/
AggregateRating
• itemscope
• rating from Upsell is not wanted
• install https://github.com/hans2103/
Hans2103_ReviewSummaryTemplates
add scope AggregateRating

56. hans2103 30 May 2013
Hans2103_Review
SummaryTemplates
• Provides ability to add more review summary
templates.
• First written in blogpost by Fontis.com
• Later converted in a module by Arjen Miedema
• Now added to Github by Hans2103

57. hans2103 30 May 2013

58. hans2103 30 May 2013
<?php echo $this-
>getReviewsSummaryHtml($_product, false,
true)?>
open
template/catalog/product/view.phtml
find
change by
save&close
<?php echo $this-
>getReviewsSummaryHtml($_product,
'aggregate', true)?>

59. hans2103 30 augustus 2013
<div class="ratings"
itemprop="aggregateRating" itemscope
itemtype="http://schema.org/AggregateRating">
<?php if ($this->getRatingSummary()):?>
<div class="ratings">
<?php if ($this->getRatingSummary()):?>
open
template/review/helper/summary_aggregate.phtml
find
replace with
save&leave_open

60. hans2103 30 augustus 2013
<meta itemprop="ratingValue" content="<?php
echo $this->getRatingSummary(); ?>">
<meta itemprop="reviewCount" content="<?php
echo $this->getReviewsCount(); ?>">
<meta itemprop="bestRating" content="100">
<meta itemprop="worstRating" content="0">
<?php if ($this->getRatingSummary()):?>
open
template/review/helper/summary_aggregate.phtml
find
add after
save&close

61. hans2103 30 May 2013
• using other method
• http://data-vocabulary.org/Breadcrumb
• Schema.org can be used too, but the result
in Rich Snippets is not as good as this
method.
add Breadcrumbs

62. hans2103 30 May 2013

63. hans2103 30 May 2013
open
template/page/html/breadcrumb.phtml
find
change by
save&leave_open
<li class="<?php echo $_crumbName ?>">
<li class="<?php echo $_crumbName ?>"
itemscope itemtype="http://data-
vocabulary.org/Breadcrumb">

64. hans2103 30 May 2013
still open
template/page/html/breadcrumb.phtml
find
change by
save&close
<a href="<?php echo $_crumbInfo['link'] ?>"
title="<?php echo $this-
>htmlEscape($_crumbInfo['title']) ?>"
itemprop="url"><span itemprop="title"><?php
echo $this->htmlEscape($_crumbInfo['label']) ?
></span></a>
<a href="<?php echo $_crumbInfo['link'] ?>"
title="<?php echo $this-
>htmlEscape($_crumbInfo['title']) ?>"
itemprop="url"><?php echo $this-
>htmlEscape($_crumbInfo['label']) ?></a>

65. hans2103 30 May 2013
hopsakee... testen!

66. hans2103 30 May 2013

67. hans2103 30 May 2013
nu jij!
have fun

68. http://www.flickr.com/photos/trasimac/1217071176
thank your for your time
http://slideshare.net/hans2103
hans2103
http://about.me/hans2103