Magento18 min lezen

Magento Rich Snippets made easy

Door Hans op vrijdag, 26 april, 2013

In dit artikel

magento-richt-snippets

Magento Rich Snippets

Stand out in the search results can be done by using Magento Rich Snippets. Snippets—the few lines of text that appear under every search result—are designed to give users a sense for what’s on the page and why it’s relevant to their query. (source: Google Webmasters Tools Help). They give users quicker access to information. And by the way it’s presented in the search results it draws a user’s attention to relevant results. Finally it will increase the click-through rates (CTR) and lessen the bounce-rate. Using the code snippets in this blogpost you (or your webdeveloper) can add structured data to your Magento product page. These structured data will help search engines to understand your website even better. 

Quick implementation made easy

The code snippets used in this blog are written using the default theme of Magento CE 1.7.0.2. It will most likely also work for any other edition. (update July 2014: also tested on Magento 1.8.x and 1.9.x) Don’t just copy & paste the snippets. You should try to understand them. We’re not writing new code, we just add structured data to the default theme. But… since you never change Magento provided files we create a new theme. Read my “Magento Theme – set the basics right – #mm12nl” and learn how you can create your own new theme.
The structured data we use come from Schema.org. It’s a collaboration between Google, Yahoo, Bing and Yandex. Also read the Google Webmasters Tools Help article ‘Rich Snippets – Products‘ for guidelines and use of allowed non-visible text. We’re using http://schema.org/Product, http://schema.org/Offer and http://schema.org/AggregateRating

Start to copy some files

Copy the following files to your own Magento theme:

  • app/design/frontend/base/default/template/catalog/product/view.phtml
  • app/design/frontend/base/default/template/catalog/product/view/media.phtml
  • app/design/frontend/base/default/template/catalog/product/view/type/default.phtml
  • app/design/frontend/base/default/template/catalog/product/price.phtml
  • app/design/frontend/base/default/template/review/helper/summary.phtml

Note: Since this example is based on a default Magento install there are no existing template overrides. Therefor we copy files from Magento base. Otherwise copy the given files from your installed theme to your newly created theme. Every step in the proces we provide two blocks of code. The old and new situation. The marked line(s) will be touched with some changes.

Define scope of Product

more info: http://schema.org/Product
file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/view.phtml
before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Add product name

file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/view.phtml
before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after 

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Add product description

file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/view.phtml
before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Add product image

file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/view/media.phtml
before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Define scope of Offer or AggregateOffer

According to http://schema.org/Offer and http://schema.org/AggregateOffer the itemtype=”Offer” contains both price and availability. In Magento these two items are defined in two different files. Both items are initiated from one file. (Update July 2014: Magento 1.9.x has a different implementation. Please follow the instructions on blog post Rich Snippets in Magento 1.9.x and come back to continue with paragraph “add product price”.) The itemtype AggregateOffer is best used for Bundle products.
file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/view.phtml

before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Note: as you can see I also added the priceCurrency. You can also add other item properties like itemCondition and category.

Add availability

file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/view/type/default.phtml
file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/view/type/grouped.phtml
file: app/design/frontend/<your_package>/<your_theme>/template/bundle/catalog/product/view/type/bundle.phtml
before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Note: other instances of ItemAvailability can be used

Add product price

file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/price.phtml
file: app/design/frontend/<your_package>/<your_theme>/template/bundle/catalog/product/price.phtml
This file contains a lot of places where you can add the

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

. It’s advisable to add the item property to the prices excluding tax (excluding the price excluding tax for minimal prices) and prices with class=”regular-price” only. On the product page the

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

should only appear once. Otherwise the search engines will show no price since they cannot decide what price to show. It should not appear on the cloned price (configurable product) nor should appear on the price of upsell products. In the php code these two can be defined by the idSuffix (_clone and -upsell).
The adjustments should be done in two files, since Magento uses another price.phtml for the bundled products.
add in top

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Mind that the code above starts with the first part of an if-then-else statement. It should be close with

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

.
before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Mind that the code above starts with the first part of an if-then-else statement.
It should be close with

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

.
Note: To make implementation on this matter more easy I’ve created two adjusted copies of price.phtml on Gihtub:

Define scope of review

The reviews shown on a product page of a default Magento install are the aggregate rating. We’re going to add an itemprop since aggregate rating is a property of a product and we’re defining the scope since aggregate rating consists of more items. The implementation of aggregate rating value and summary in this example is an ugly one. It’s not allowed by Google to hide this information.
more info: http://schema.org/AggregateRating
file: app/design/frontend/<your_package>/<your_theme>/template/catalog/product/view.phtml
before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

file: app/design/frontend/<your_package>/<your_theme>/template/review/helper/summary_aggregate.phtml
this file is a copy from summary.phtml
before

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Note: To make implementation on this matter more easy I’ve created a Magento module Hans2103_Review SummaryTemplates. This module provides the ability to add more review summary templates. First written in blogpost by Fontis.com. Later converted in a module by Arjen Miedema. Now added on Github by hans2103.

Breadcrumbs

file: app/design/frontend/<your_package>/<your_theme>/template/page/html/breadcrumbs.phtml
For the implementation of Rich Snippets for breadcrumbs I prefer using the method by data-vocabulary.org instead of schema.org. The presentation of search results using data-vocabulary is better. It shows clickable categories.
before:

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after:

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

before:

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

after: 

</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">

Test your work using the testing tool
While adding the structured data to your productpages you can check your work using Google’s Rich Snippets Testing tool (http://www.google.nl/webmasters/tools/richsnippets). Just add the weblink of your product page and press the button. Google will provide you with the results of the product page with extracted stuctured data.

implemented Rich Snippets

implemented Rich Snippets

For more information about structured data for product page you can visit the Google Webmasters Help topic Rich snippets – Products. A list of all types represented in Schema.org.
By now you probably are addicted to add even more structured data to your Magento webshop. Just take a look at http://schema.org to get more inspiration. If you need some help implementing them don’t hesitate to contact one of our Byte Partners specialised in SEO.
Have fun adding structured data to your Magento product page and draw more attention to relevant search in Google, Yahoo, Bing and Yandex.

Presented at Magento User Group Amsterdam

Rich Snippets in Magento product page from Hans Kuijpers

This presentation was first given at Meet Magento Netherlands (meet-magento.nl).

Updates

update 20-11-2014: thanks to Jason Tipton for adding the AggregateOffer. Works better with Bundle products.
update 24-09-2014: added Magento 1.9.x version of price.phtml
update 07-07-2014: added reference to Magento 1.9.x implementation of itemscope Offer
update 21-01-2014: fix in breadcrumbs.pthml -> htmlEscape in M1.7 is changed into escapeHtml in M1.8 (thx Richard Blezer)
update 08-01-2014: fix in price.phtml for M1.8 -> added itemprop=price to configurable products with discount.
update 25-11-2013: added Magento 1.8 version of price.phtml
update 16-09-2013: added itemprop=price to bundled products. Rewritten implementation of price.phtml. Added breadcrumbs
update 23-05-2013: new insights and information lead to some changes in the blogpost.
update 11-06-2013: thanks to Jelle reminding me that I still had some changes to add. Also added my presentation about Implementation of Rich Snippets on a Magento productpage given on Meet Magento 31 May 2013.

[widget id=”magereport_widget-5″ /]

Hi! Mijn naam is Dion, Account Manager at Hypernode

Wil je meer weten over Hypernode's Managed E-commerce Hosting? Plan je online meeting.

plan een een-op-een meeting tel:+31648362102

Visit Hypernode at