Your SlideShare is downloading. ×
0
hans2103 30 augustus 2013hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
markup
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August
16, 1954)</span>
<span>S...
hans2103 30 augustus 2013
itemscope
<div itemscope>
<h1>Avatar</h1>
<span>Director: James Cameron (born August
16, 1954) <...
hans2103 30 augustus 2013
<div itemscope itemtype="http://schema.org/
Movie">
<h1>Avatar</h1>
<span>Director: James Camero...
hans2103 30 augustus 2013
itemprop
<div itemscope itemtype ="http://schema.org/
Movie">
<h1 itemprop="name">Avatar</h1>
<s...
hans2103 30 augustus 2013
embedded items
<div itemscope itemtype ="http://schema.org/
Movie">
<h1 itemprop="name">Avatar</...
hans2103 30 augustus 2013
hopsakee... aan de slag!
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
add ?ath=1 to url
hans2103 30 augustus 2013
hans2103 30 augustus 2013
file to edit
hans2103 30 augustus 2013
• itemtype = http://schema.org/Product
• itemscope
add scope Product
hans2103 30 augustus 2013
hans2103 30 augustus 2013
open
template/catalog/product/view.phtml
find
replace with
save&close
<div class="product-view" i...
hans2103 30 augustus 2013
• itemprop = name
• is part of itemtype = Product
name
hans2103 30 augustus 2013
<div class="product-name">
<h1><?php echo $_helper-
>productAttribute($_product, $_product-
>get...
hans2103 30 augustus 2013
• itemprop = description
• is part of itemtype = Product
description
hans2103 30 augustus 2013
<div class="std"><?php echo $_helper-
>productAttribute($_product, nl2br($_product-
>getShortDes...
hans2103 30 augustus 2013
• itemprop = image
• is part of itemtype = Product
image
hans2103 30 augustus 2013
repeat
<?php
$_img = '<img id="image" itemprop="image"
src="'.$this->helper('catalog/image')-
>i...
hans2103 30 augustus 2013
• itemprop = url
• is part of itemtype = Product
url
hans2103 30 augustus 2013
open
template/catalog/product/view.phtml
find
replace with
save&close
<div class="product-view" i...
hans2103 30 augustus 2013
• itemtype = http://schema.org/Offer
• itemscope
add scope Offer
hans2103 30 augustus 2013
hans2103 30 augustus 2013
<div itemprop="offers" itemscope
itemtype="http://schema.org/Offer">
<?php echo $this-
>getChild...
hans2103 30 augustus 2013
• itemprop = priceCurrency
• is part of itemtype = Offer
•
priceCurrency
<meta itemprop="priceCu...
hans2103 30 augustus 2013
hans2103 30 augustus 2013
<?php echo $this-
>getChildHtml('alert_urls') ?>
<div itemprop="offers" itemscope
itemtype="http...
hans2103 30 augustus 2013
• itemprop = availability
• is part of itemtype = Offer
itemAvailability
hans2103 30 augustus 2013
hans2103 30 augustus 2013
<p class="availability in-stock"><link
itemprop="availability" href="http://
schema.org/InStock"...
hans2103 30 augustus 2013
<p class="availability out-of-stock"><link
itemprop="availability" href="http://
schema.org/OutO...
hans2103 30 augustus 2013
• itemprop = ItemCondition
• is part of itemtype = Offer
• create new attribute first
•
itemCondi...
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
hans2103 30 augustus 2013
<?php echo $this-
>getChildHtml('alert_urls') ?>
<div itemprop="offers" itemscope
itemtype="http...
hans2103 30 augustus 2013
• itemprop = price
• is part of itemtype = Offer
• download https://gist.github.com/
hans2103/56...
hans2103 30 augustus 2013
open
template/catalog/product/view/type/default.phtml
find
replace with
save&close
<?php echo $th...
hans2103 30 augustus 2013
• itemtype = http://schema.org/
AggregateRating
• itemscope
• rating from Upsell is not wanted
•...
hans2103 30 augustus 2013
Hans2103_Review
SummaryTemplates
• Provides ability to add more review summary
templates.
• Firs...
hans2103 30 augustus 2013
hans2103 30 augustus 2013
<?php echo $this-
>getReviewsSummaryHtml($_product, false,
true)?>
open
template/catalog/product...
hans2103 30 augustus 2013
<div class="ratings"
itemprop="aggregateRating" itemscope
itemtype="http://schema.org/AggregateR...
hans2103 30 augustus 2013
<meta itemprop="ratingValue" content="<?php
echo $this->getRatingSummary(); ?>">
<meta itemprop=...
hans2103 30 augustus 2013
• using other method
• http://data-vocabulary.org/Breadcrumb
• Schema.org can be used too, but t...
hans2103 30 augustus 2013
hans2103 30 augustus 2013
open
template/page/html/breadcrumb.phtml
find
replace with
save&leave_open
<li class="<?php echo ...
hans2103 30 augustus 2013
still open
template/page/html/breadcrumb.phtml
find
replace with
save&leave_open
<a href="<?php e...
hans2103 30 augustus 2013
hopsakee... testen!
hans2103 30 augustus 2013
hans2103 30 augustus 2013
nu jij!
have fun
http://www.flickr.com/photos/trasimac/1217071176
thank your for your time
http://slideshare.net/hans2103
hans2103
http://ab...
Upcoming SlideShare
Loading in...5
×

Rich Snippets in Magento product page - #MUG020

12,138

Published on

Embed Rich Snippets in your Magento product page. Slides of my presentation during Magento User Group 29-08-2013 in Amsterdam

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,138
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
13
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Rich Snippets in Magento product page - #MUG020"

  1. 1. hans2103 30 augustus 2013hans2103 30 augustus 2013
  2. 2. hans2103 30 augustus 2013
  3. 3. hans2103 30 augustus 2013
  4. 4. hans2103 30 augustus 2013
  5. 5. hans2103 30 augustus 2013
  6. 6. hans2103 30 augustus 2013
  7. 7. hans2103 30 augustus 2013
  8. 8. hans2103 30 augustus 2013
  9. 9. hans2103 30 augustus 2013
  10. 10. hans2103 30 augustus 2013
  11. 11. hans2103 30 augustus 2013
  12. 12. hans2103 30 augustus 2013
  13. 13. hans2103 30 augustus 2013
  14. 14. hans2103 30 augustus 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. 15. hans2103 30 augustus 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. 16. hans2103 30 augustus 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. 17. hans2103 30 augustus 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. 18. hans2103 30 augustus 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. 19. hans2103 30 augustus 2013 hopsakee... aan de slag!
  20. 20. hans2103 30 augustus 2013
  21. 21. hans2103 30 augustus 2013
  22. 22. hans2103 30 augustus 2013
  23. 23. hans2103 30 augustus 2013
  24. 24. hans2103 30 augustus 2013 add ?ath=1 to url
  25. 25. hans2103 30 augustus 2013
  26. 26. hans2103 30 augustus 2013 file to edit
  27. 27. hans2103 30 augustus 2013 • itemtype = http://schema.org/Product • itemscope add scope Product
  28. 28. hans2103 30 augustus 2013
  29. 29. hans2103 30 augustus 2013 open template/catalog/product/view.phtml find replace with save&close <div class="product-view" itemscope itemtype="http://schema.org/Product"> <div class="product-view">
  30. 30. hans2103 30 augustus 2013 • itemprop = name • is part of itemtype = Product name
  31. 31. hans2103 30 augustus 2013 <div class="product-name"> <h1><?php echo $_helper- >productAttribute($_product, $_product- >getName(), 'name') ?></h1> </div> open template/catalog/product/view.phtml find replace with save&close <div class="product-name"> <h1 itemprop="name"><?php echo $_helper- >productAttribute($_product, $_product- >getName(), 'name') ?></h1> </div>
  32. 32. hans2103 30 augustus 2013 • itemprop = description • is part of itemtype = Product description
  33. 33. hans2103 30 augustus 2013 <div class="std"><?php echo $_helper- >productAttribute($_product, nl2br($_product- >getShortDescription()), 'short_description') ?></div> open template/catalog/product/view.phtml find replace with save&close <div class="std" itemprop="description"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
  34. 34. hans2103 30 augustus 2013 • itemprop = image • is part of itemtype = Product image
  35. 35. hans2103 30 augustus 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 replace with save&close
  36. 36. hans2103 30 augustus 2013 • itemprop = url • is part of itemtype = Product url
  37. 37. hans2103 30 augustus 2013 open template/catalog/product/view.phtml find replace with 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. 38. hans2103 30 augustus 2013 • itemtype = http://schema.org/Offer • itemscope add scope Offer
  39. 39. hans2103 30 augustus 2013
  40. 40. hans2103 30 augustus 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 replace with save&close <?php echo $this- >getChildHtml('product_type_data') ?> <?php echo $this->getTierPriceHtml() ?>
  41. 41. hans2103 30 augustus 2013 • itemprop = priceCurrency • is part of itemtype = Offer • priceCurrency <meta itemprop="priceCurrency" content="<?php echo $currency_code = Mage::app()->getStore()- >getCurrentCurrencyCode(); ?>"/>
  42. 42. hans2103 30 augustus 2013
  43. 43. hans2103 30 augustus 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. 44. hans2103 30 augustus 2013 • itemprop = availability • is part of itemtype = Offer itemAvailability
  45. 45. hans2103 30 augustus 2013
  46. 46. hans2103 30 augustus 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 replace with save&close
  47. 47. hans2103 30 augustus 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 replace with save&close
  48. 48. hans2103 30 augustus 2013 • itemprop = ItemCondition • is part of itemtype = Offer • create new attribute first • itemCondition <link itemprop="itemCondition" href="http://schema.org/ <echo_attribute>Condition" />
  49. 49. hans2103 30 augustus 2013
  50. 50. hans2103 30 augustus 2013
  51. 51. hans2103 30 augustus 2013
  52. 52. hans2103 30 augustus 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. 53. hans2103 30 augustus 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. 54. hans2103 30 augustus 2013 open template/catalog/product/view/type/default.phtml find replace with save&close <?php echo $this->getPriceHtml($_product, false, '-aggregate') ?> <?php echo $this->getPriceHtml($_product) ?>
  55. 55. hans2103 30 augustus 2013 • itemtype = http://schema.org/ AggregateRating • itemscope • rating from Upsell is not wanted • install https://github.com/hans2103/ Hans2103_ReviewSummaryTemplates add scope AggregateRating
  56. 56. hans2103 30 augustus 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. 57. hans2103 30 augustus 2013
  58. 58. hans2103 30 augustus 2013 <?php echo $this- >getReviewsSummaryHtml($_product, false, true)?> open template/catalog/product/view.phtml find replace with save&close <?php echo $this- >getReviewsSummaryHtml($_product, 'aggregate', true)?>
  59. 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. 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. 61. hans2103 30 augustus 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. 62. hans2103 30 augustus 2013
  63. 63. hans2103 30 augustus 2013 open template/page/html/breadcrumb.phtml find replace with save&leave_open <li class="<?php echo $_crumbName ?>"> <li class="<?php echo $_crumbName ?>" itemscope itemtype="http://data- vocabulary.org/Breadcrumb">
  64. 64. hans2103 30 augustus 2013 still open template/page/html/breadcrumb.phtml find replace with save&leave_open <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']) ?>"><?php echo $this- >htmlEscape($_crumbInfo['label']) ?></a>
  65. 65. hans2103 30 augustus 2013 hopsakee... testen!
  66. 66. hans2103 30 augustus 2013
  67. 67. hans2103 30 augustus 2013 nu jij! have fun
  68. 68. http://www.flickr.com/photos/trasimac/1217071176 thank your for your time http://slideshare.net/hans2103 hans2103 http://about.me/hans2103
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×