rich snippets in magento product page - #mug020
Post on 06-May-2015
11.948 Views
Preview:
DESCRIPTION
TRANSCRIPT
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>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a></div>
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>
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
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>
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>
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
opentemplate/catalog/product/view.phtml
find
replace with
save&close
<div class="product-view" itemscope itemtype="http://schema.org/Product">
<div class="product-view">
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->getName(), 'name') ?></h1></div>
opentemplate/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>
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->getShortDescription()), 'short_description') ?></div>
opentemplate/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>
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')->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
hans2103 30 augustus 2013
• itemprop = url
• is part of itemtype = Product
url
hans2103 30 augustus 2013
opentemplate/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() ?>"/>
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->getChildHtml('product_type_data') ?> <?php echo $this->getTierPriceHtml() ?></div>
opentemplate/catalog/product/view.phtml
find
replace with
save&close
<?php echo $this->getChildHtml('product_type_data') ?><?php echo $this->getTierPriceHtml() ?>
hans2103 30 augustus 2013
• itemprop = priceCurrency
• is part of itemtype = Offer
•
priceCurrency
<meta itemprop="priceCurrency" content="<?php echo $currency_code = Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/>
hans2103 30 augustus 2013
hans2103 30 augustus 2013
<?php echo $this->getChildHtml('alert_urls') ?><div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
opentemplate/catalog/product/view.phtml
find
<meta itemprop="priceCurrency" content="<?php echo $currency_code = Mage::app()->getStore()->getCurrentCurrencyCode(); ?>"/>
add after
save&close
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"><?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
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.phtmlopen
find
replace with
save&close
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" />
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://schema.org/Offer">
opentemplate/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
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
hans2103 30 augustus 2013
opentemplate/catalog/product/view/type/default.phtml
find
replace with
save&close
<?php echo $this->getPriceHtml($_product, false, '-aggregate') ?>
<?php echo $this->getPriceHtml($_product) ?>
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
hans2103 30 augustus 2013
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
hans2103 30 augustus 2013
hans2103 30 augustus 2013
<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>
opentemplate/catalog/product/view.phtml
find
replace with
save&close
<?php echo $this->getReviewsSummaryHtml($_product, 'aggregate', true)?>
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()):?>
opentemplate/review/helper/summary_aggregate.phtml
find
replace with
save&leave_open
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()):?>
opentemplate/review/helper/summary_aggregate.phtml
find
add after
save&close
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
hans2103 30 augustus 2013
hans2103 30 augustus 2013
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">
hans2103 30 augustus 2013
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>
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://about.me/hans2103
top related