rich snippets in magento product page - #mug020

hans2103 30 augustus 2013hans2103 30 augustus 2013

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>


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>


<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


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>


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>


hopsakee... aan de slag!


add ?ath=1 to url


file to edit


• itemtype = http://schema.org/Product

• itemscope

add scope Product

http://schema.org/Product



opentemplate/catalog/product/view.phtml

find

replace with

save&close

<div class="product-view" itemscope itemtype="http://schema.org/Product">

<div class="product-view">


• itemprop = name

• is part of itemtype = Product

name


<div class="product-name"> <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1></div>


find

replace with

save&close

<div class="product-name"> <h1 itemprop="name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1></div>


• itemprop = description


description


<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>


find

replace with

save&close

<div class="std" itemprop="description"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>


• itemprop = image


image


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')

opentemplate/catalog/product/view/media.phtml

find

replace with

save&close


• itemprop = url


url



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() ?>"/>


• itemtype = http://schema.org/Offer

• itemscope

add scope Offer




<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <?php echo $this->getChildHtml('product_type_data') ?> <?php echo $this->getTierPriceHtml() ?></div>


find

replace with

save&close

<?php echo $this->getChildHtml('product_type_data') ?><?php echo $this->getTierPriceHtml() ?>


• itemprop = priceCurrency

• is part of itemtype = Offer

•

priceCurrency

<meta itemprop="priceCurrency" content="<?php echo $currency_code = Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/>


<?php echo $this->getChildHtml('alert_urls') ?><div itemprop="offers" itemscope itemtype="http://schema.org/Offer">


find

<meta itemprop="priceCurrency" content="<?php echo $currency_code = Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/>

add after

save&close


• itemprop = availability


itemAvailability


<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>

opentemplate/catalog/product/view/type/default.phtml

find

replace with

save&close


<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.phtmlopen

find

replace with

save&close


• itemprop = ItemCondition


• create new attribute first

•

itemCondition

<link itemprop="itemCondition" href="http://schema.org/<echo_attribute>Condition" />


<?php echo $this->getChildHtml('alert_urls') ?><div itemprop="offers" itemscope itemtype="http://schema.org/Offer">


find

<link itemprop="itemCondition" href="http://schema.org/<?php echo $_product->getResource()->getAttribute('offeritemcondition')->getFrontend()->getValue($_product) ?>Condition" />

add after

save&close


• itemprop = price


• download https://gist.github.com/hans2103/5635901

• Adding a itemprop to price in upsell is not wanted.

price

https://gist.github.com/hans2103/5635901





opentemplate/catalog/product/view/type/default.phtml

find

replace with

save&close

<?php echo $this->getPriceHtml($_product, false, '-aggregate') ?>

<?php echo $this->getPriceHtml($_product) ?>


• itemtype = http://schema.org/AggregateRating

• itemscope

• rating from Upsell is not wanted

• install https://github.com/hans2103/Hans2103_ReviewSummaryTemplates

add scope AggregateRating





https://github.com/hans2103/Hans2103_ReviewSummaryTemplates




http://schema.org/AggregateRating

http://schema.org/AggregateRating


Hans2103_ReviewSummaryTemplates

• 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


<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>


find

replace with

save&close

<?php echo $this->getReviewsSummaryHtml($_product, 'aggregate', true)?>


<div class="ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <?php if ($this->getRatingSummary()):?>

<div class="ratings"> <?php if ($this->getRatingSummary()):?>

opentemplate/review/helper/summary_aggregate.phtml

find

replace with

save&leave_open


• 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

http://data-vocabulary.org/Breadcrumb

http://data-vocabulary.org/Breadcrumb


opentemplate/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">


still opentemplate/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>


hopsakee... testen!


nu jij!have fun

http://www.flickr.com/photos/trasimac/1217071176

thank your for your time

http://slideshare.net/hans2103

hans2103

http://about.me/hans2103
















rich snippets in magento product page - #mug020

Education

augustus 2013hans2103

james cameron

itemprop avatar director

science fiction span

itemscope avatar director

markup avatar director

embedded items avatar

product description