Rich Snippets in Magento product page - #MUG020
5 likes13,812 views
The document primarily discusses the implementation of structured data for the movie 'Avatar' directed by James Cameron, including details such as its genre and trailer link. It outlines various HTML and PHP code adjustments necessary for integrating schema markup into a website to enhance SEO and rich snippets. Additionally, it covers changes to product templates to include relevant item properties for e-commerce purposes.
![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>](https://image.slidesharecdn.com/mug-rich-snippets-in-magento-product-page-130902042046-phpapp02/85/Rich-Snippets-in-Magento-product-page-MUG020-64-320.jpg)
Rich Snippets in Magento product page - #MUG020
- 1. hans2103 30 augustus 2013hans2103 30 augustus 2013
- 2. hans2103 30 augustus 2013
- 3. hans2103 30 augustus 2013
- 4. hans2103 30 augustus 2013
- 5. hans2103 30 augustus 2013
- 6. hans2103 30 augustus 2013
- 7. hans2103 30 augustus 2013
- 8. hans2103 30 augustus 2013
- 9. hans2103 30 augustus 2013
- 10. hans2103 30 augustus 2013
- 11. hans2103 30 augustus 2013
- 12. hans2103 30 augustus 2013
- 13. hans2103 30 augustus 2013
- 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. 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. 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. 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. 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. hans2103 30 augustus 2013 hopsakee... aan de slag!
- 20. hans2103 30 augustus 2013
- 21. hans2103 30 augustus 2013
- 22. hans2103 30 augustus 2013
- 23. hans2103 30 augustus 2013
- 24. hans2103 30 augustus 2013 add ?ath=1 to url
- 25. hans2103 30 augustus 2013
- 26. hans2103 30 augustus 2013 file to edit
- 27. hans2103 30 augustus 2013 • itemtype = http://schema.org/Product • itemscope add scope Product
- 28. hans2103 30 augustus 2013
- 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. hans2103 30 augustus 2013 • itemprop = name • is part of itemtype = Product name
- 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. hans2103 30 augustus 2013 • itemprop = description • is part of itemtype = Product description
- 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. hans2103 30 augustus 2013 • itemprop = image • is part of itemtype = Product image
- 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. hans2103 30 augustus 2013 • itemprop = url • is part of itemtype = Product url
- 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. hans2103 30 augustus 2013 • itemtype = http://schema.org/Offer • itemscope add scope Offer
- 39. hans2103 30 augustus 2013
- 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. 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. hans2103 30 augustus 2013
- 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. hans2103 30 augustus 2013 • itemprop = availability • is part of itemtype = Offer itemAvailability
- 45. hans2103 30 augustus 2013
- 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. 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. 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. hans2103 30 augustus 2013
- 50. hans2103 30 augustus 2013
- 51. hans2103 30 augustus 2013
- 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. 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. 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. 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. 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. hans2103 30 augustus 2013
- 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. 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 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. hans2103 30 augustus 2013
- 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. 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. hans2103 30 augustus 2013 hopsakee... testen!
- 66. hans2103 30 augustus 2013
- 67. hans2103 30 augustus 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