A presentation at Magento User Group Amsterdam in in Amsterdam, Netherlands by Hans Kuijpers
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 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-theatricaltrailer.html”>Trailer</a> </div> hans2103 Monday 02 September 13 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-theatricaltrailer.html”>Trailer</a> </div> hans2103 Monday 02 September 13 30 augustus 2013
itemtype <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-theatricaltrailer.html”>Trailer</a> </div> hans2103 Monday 02 September 13 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-theatricaltrailer.html” itemprop=”trailer”>Trailer</a> </div> hans2103 Monday 02 September 13 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-theatricaltrailer.html” itemprop=”trailer”>Trailer</a> hans2103 Monday 02 September 13 30 augustus 2013
hopsakee… aan de slag! hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
add ?ath=1 to url hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
file to edit hans2103 Monday 02 September 13 30 augustus 2013
add scope Product • itemtype = http://schema.org/Product • itemscope hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view.phtml find <div class=”product-view”> replace with
<div class=”product-view” itemscope itemtype=”http://schema.org/Product”> save&close hans2103 Monday 02 September 13 30 augustus 2013name • itemprop = name • is part of itemtype = Product hans2103 Monday 02 September 13 30 augustus 2013
open 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> </div> save&close hans2103 Monday 02 September 13 30 augustus 2013description • itemprop = description • is part of itemtype = Product hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view.phtml find <div class=”std”><?php echo $_helper>productAttribute($_product, nl2br($_product>getShortDescription()), ‘short_description’) ?></div> replace with
<div class=”std” itemprop=”description”><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) ?></div> save&close hans2103 Monday 02 September 13 30 augustus 2013image • itemprop = image • is part of itemtype = Product hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view/media.phtml find <?php $_img = ‘<img id=”image” src=”’.$this>helper(‘catalog/image’)->init($_product, ‘image’) replace with
<?php $_img = ‘<img id=”image” itemprop=”image” src=”’.$this->helper(‘catalog/image’)>init($_product, ‘image’) repeat save&close hans2103 Monday 02 September 13 30 augustus 2013url • itemprop = url • is part of itemtype = Product hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view.phtml find <div class=”product-view” itemscope itemtype=”http://schema.org/Product”> replace with <div class=”product-view” itemscope itemtype=”http://schema.org/Product”> <meta itemprop=”url” content=”<?php echo $_product->getProductUrl() ?>”/> save&close hans2103 Monday 02 September 13 30 augustus 2013
add scope Offer • itemtype = http://schema.org/Offer • itemscope hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view.phtml find <?php echo $this>getChildHtml(‘product_type_data’) ?> <?php echo $this->getTierPriceHtml() ?> replace with
<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”> <?php echo $this>getChildHtml(‘product_type_data’) ?> <?php echo $this->getTierPriceHtml() ?> </div> save&close hans2103 Monday 02 September 13 30 augustus 2013priceCurrency • itemprop = priceCurrency • is part of itemtype = Offer itemprop=”priceCurrency” • <meta content=”<?php echo $currency_code = Mage::app()->getStore()>getCurrentCurrencyCode(); ?>”/> hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view.phtml find <?php echo $this>getChildHtml(‘alert_urls’) ?> <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”> add after <meta itemprop=”priceCurrency” content=”<?php echo $currency_code = Mage::app()>getStore()->getCurrentCurrencyCode(); ?>”/> save&close hans2103 Monday 02 September 13 30 augustus 2013
itemAvailability • itemprop = availability • is part of itemtype = Offer hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view/type/default.phtml find <p class=”availability in-stock”><?php echo $this->__(‘Availability:’) ?> <span><?php echo $this->__(‘In stock’) ?></span></p> replace with <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> save&close hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view/type/default.phtml find <p class=”availability out-of-stock”><?php echo $this->__(‘Availability:’) ?> <span><? php echo $this->__(‘Out of stock’) ?></ span></p> replace with <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> save&close hans2103 Monday 02 September 13 30 augustus 2013
itemCondition • itemprop = ItemCondition • is part of itemtype = Offer • create new attribute first itemprop=”itemCondition” • <link href=”http://schema.org/ <echo_attribute>Condition” /> hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view.phtml find <?php echo $this>getChildHtml(‘alert_urls’) ?> <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”> add after
<link itemprop=”itemCondition” href=”http://schema.org/<?php echo $_product>getResource()>getAttribute(‘offeritemcondition’)>getFrontend()->getValue($_product) ? >Condition” /> save&close hans2103 Monday 02 September 13 30 augustus 2013price • itemprop = price • is part of itemtype = Offer • download https://gist.github.com/ hans2103/5635901 • Adding a itemprop to price in upsell is not wanted. hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view/type/default.phtml find
<?php echo $this->getPriceHtml($_product) ?>replace with
<?php echo $this->getPriceHtml($_product, false, ‘-aggregate’) ?>save&close hans2103 Monday 02 September 13 30 augustus 2013
add scope AggregateRating • itemtype = http://schema.org/ AggregateRating • itemscope • rating from Upsell is not wanted • install https://github.com/hans2103/ Hans2103_ReviewSummaryTemplates hans2103 Monday 02 September 13 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 hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
open template/catalog/product/view.phtml find
<?php echo $this>getReviewsSummaryHtml($_product, false, true)?>replace with
<?php echo $this>getReviewsSummaryHtml($_product, ‘aggregate’, true)?>save&close hans2103 Monday 02 September 13 30 augustus 2013
open template/review/helper/summary_aggregate.phtml find
<div class=”ratings”> <?php if ($this->getRatingSummary()):?> replace with <div class=”ratings” itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”> <?php if ($this->getRatingSummary()):?> save&leave_open hans2103 Monday 02 September 13 30 augustus 2013open template/review/helper/summary_aggregate.phtml find <?php if ($this->getRatingSummary()):?> add after
<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”> save&close hans2103 Monday 02 September 13 30 augustus 2013add Breadcrumbs • 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. hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
open template/page/html/breadcrumb.phtml find <li class=”<?php echo $_crumbName ?>”> replace with <li class=”<?php echo $_crumbName ?>” itemscope itemtype=”http://datavocabulary.org/Breadcrumb”> save&leave_open hans2103 Monday 02 September 13 30 augustus 2013
still open template/page/html/breadcrumb.phtml find <a href=”<?php echo $_crumbInfo[‘link’] ?>” title=”<?php echo $this>htmlEscape($_crumbInfo[‘title’]) ?>” itemprop=”url”><?php echo $this>htmlEscape($_crumbInfo[‘label’]) ?></a> replace with <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> save&leave_open hans2103 Monday 02 September 13 30 augustus 2013
hopsakee… testen! hans2103 Monday 02 September 13 30 augustus 2013
hans2103 Monday 02 September 13 30 augustus 2013
nu jij! have fun hans2103 Monday 02 September 13 30 augustus 2013
thank your for your time http://about.me/hans2103 hans2103 http://slideshare.net/hans2103 http://www.flickr.com/photos/trasimac/1217071176 Monday 02 September 13
Embed Rich Snippets in your Magento product page. Slides of my presentation during Magento User Group 29-08-2013 in Amsterdam