How to Add Rich Snippets to a Magento Ecommerce Website?

Aim of an Ecommerce website is to increase revenue through the hike of product’s sale to make it directly proportional to the professional look and feel that goes well with its being an extremely user friendly website. Rising popularity of an Ecommerce website heavily depends upon high search engine ranks as higher the rank, higher is its probability to be found in the search engine results. Approximately 78% of traffic comes from search engine results. Schema markups have embedded codes. Addition of schema-markups and rich snippets make it easier to different search engines to effectively parse and interpret information included in the web pages. It makes the search queries to be better served by search engines. Thus the SERPs (Search Engine Result Pages) look immensely professional and it increases the probability of better sales.

If you hire a web development company for your eCommerce development project then they will take advantages of the addition of schema markups is when you add it with your products page. Here the SERPs would embed rich snippets that are in general absent in regular SERPs. Take for example the new SERPs contain star ratings, review counts, category breadcrumbs, prices and the products that is displayed between page title and description on search results. The website stands out among other result pages as all information is included in it. The visitors are offered with goods’ snapshots and with it the rate of click would increase by 20-30 percent of average rate. Addition of schema markups helps to share information across many multi-linguistic platforms.

Search Engines with its Schema.org
For targeting a greater semantic website, the Magento developers add the rich snippets by using schema.org tags. Schema.org was formed through a collection of initiatives through Yahoo, Google and Bing. Thus a common group of schemas is created and supported for setting up a set of structured markups on your web pages. Schema.org acts as your webmaster’s one stop and primary resource pool. Schema.org stores the markups that help search engines for a quick recognition to your website. Rich snippets comprising of visitor’s contact information as well as social information and reviews made by them and this concept was introduced in the year 2009. Later on some new schema markups like recipes, products and events were introduced.

Recently added Schema Markups

Some recent popular schema markups have been enlisted below:

• For creative works: Creative Work, Movie, Recipe, Book, TVSeries, MusicRecording.
• Organisation
• Event
• Embedded non-textual objects: AudioObject, VideoObject, ImageObject.
• LocalBusiness, Place, Restaurant.
• Person
• Review and AggregateRating.
• Offer, Product and AggregateOffer.

The 3 standards for structured data mark-ups are explained at the next paragraph.
Explanation of microdata with an example
Microdata, microformats and RDFa are the 3 standards of the structured data markups. For the simplification of the entire process and for maintaining consistency throughout various search engines Google webmasters have decided to put on more stress on micro-data. They strike a healthy balance between simple microformats and RDFa extensions.

Identical with other markup formats the associated microdata is implemented with page content. The associated attributes and schema elements are directly added with HTML code so as to providing additional information for the crawlers of search engines. Take for example the item scope of the div section is on a certain subject.

<div itemscope><h1>Avatar>/h1><span>Director: James Cameron (DOB Aug. 16, 1954) </span><span Science Fiction </span><a href=”../movies/avatar-theatrical-trailer.html”> Trailer </a></div>

But without describing an item the above method would not help. For this we are explaining a term in the section below.

<div itemscope itemtype=”http://schema.org/Movie”><h1>Avatar</h1><span> Director: James Cameron (DOB Aug. 16, 1954) </span><span> Science Fiction </span><a href=”../movies/avatar-theatrical-trailer.html”> Trailer </a></div>

After going through this section it is clearly mentioned that the included thing of the div section is a movie. Through its url, the item is given a link.

After the selection and implementation of the standard markup, you should test it via the tools provided for rich snippets.

Implementation of different schema markups for Magento

Default SERP look:

After you implement schema mark-ups the above SERP will look like:
Now the product offer, price, product, its average rating, product URL, breadcrumbs and the SKUs shall be integrated. For this you shall be required to edit template files. Please keep a backup before editing the files.

• Implementing the Product schema: At first edit your product page’s view.phtml. This is needed to wrap up your dynamic product page inside our latest schema markup. Now edit the next lines of the view.phtml:<div class = “product-view”>
  //to
  <div class = “product-view” itemscope itemtype = “http://schema.org/Product”>
  //and<h1> [php tag start] echo $_helper-> productAttribute($_product, $_product-> getName(), ‘name’)[php tag end];</h1>
  //to
  <h1 itemprop = “name”>[php tag start] echo $_helper-> productAttribute($_product, $_product-> getName(), ‘name’)[php tag end]</h1>

Now the view.phtml has come within the range of the particular product type. After this the product name can be tagged.
Let us modify the below-mentioned codes for tagging the product description:

<div class=”std”>[php tag start] echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) [php tag end]</div>

// change to

<div class=”std” itemprop=”description” >[php tag start] echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) [php tag end]</div>

Next step is tagging the product image and modify following codes inside the media.phtml file.

$_img = ‘<img ….etc// change to$_img = ‘<img itemprop=”image” ….etc

• Implementing the Aggregate schema: Aggregate schema is displayed when your products have some reviews. In addition there should be the theme of your website. The theme must support scope for your reviews. We must update the following codes of the file summary.phtml-<div class=”ratings”>// change to<div class=”ratings” itemprop=”aggregateRating” itemscope itemtype= “http://schema.org/AggregateRating”>
• Now you should inform the engines about the product’s worst, average and best review rates as well as the total number of reviews. Wrap up your visible items inside your markup as depended upon the matters you want to display on your store. For now we shall add some hidden fields.
• // just underneath <div class=”ratings” add the following
  <span class = “no-display” itemprop = “reviewCount”>[php tag start] echo $this->getReviewCount() [php tag end] reviews </span>

  // then just within [php tag start] if ($this->getRatingSummary()):[php tag end] add the following
  <span class = “no-display” itemprop = “worstRating”>0</span>
  <span class = “no-display” itemprop = “bestRating”>0</span>
  <span class = “no-display” itemprop = “ratingValue”>[php tag start] echo round($this->getRatingSummary()/20,1);[php tag end]</span>

  Now your product shall be rated within 0 to 5 marks.

• Implementing the Offer schema: To add offer schema, we would edit some files so as to bringing out the ‘availability’ and ‘price’. To do this we would add a hidden field along with the view.phtml.
• // just below where we have set our <h1 itemprop=”name” add the following
  [php tag start] if($_product->isAvailable()): [php tag end]
  <div class-“no-display” itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>
  <span itemprop = “price”>[php tag start] echo Mage::helper(‘core’)->currency($_product->getFinalPrice());[php tag end]</span>
  </div>
  [php tag start] endif; [php tag end]The if($_product->isAvailable()): checks the product availability and if found it displays its price.
• Implementing the URL of the Product and its SKU schema:  For including the information with the base product add the below-mentioned codes within the view.phtml:
• <meta itemprop= “url” content= “[php tag start] echo $_product->getUrlModel()->getUrl($_product, array(‘_ignore_category’=>true’));[php tag end]” /> <meta itemprop= “sku” content= “[php tag start] echo $_product->getSku() [php tag end]” />
• Implementing the breadcrumbs schema: A separately named file that is breadcrumbs.phtml should be created with the path’template/page/ breadcrumbs.phtml’. Codes of this file are as follows:[php tag start] if($crumbs && is_array($crumbs)): [php tag end]
  <div class=”breadcrumbs”>
  <ul xmlns:v=”http://rdf.data-vocabulary.org/#”>
  [php tag start] foreach($crumbs as $_crumbName=>$_crumbInfo): [php tag end]
  <li class=”[php tag start] echo $_crumbName [php tag end]” typeof=”v:Breadcrumb”>

  [php tag start] if($_crumbInfo[‘link’]): [php tag end]
  <a href=”[php tag start] echo $_crumbInfo[‘link’] [php tag end]” title=”[php tag start] echo     $this->htmlEscape($_crumbInfo[‘title’]) [php tag end]” rel=”v:url” property=”v:title”>
  <span>[php tag start] echo $this->htmlEscape($_crumbInfo[‘label’]) [php tag end]</span>
  </a>
  [php tag start] elseif($_crumbInfo[‘last’]): [php tag end]
  <span rel=”v:child” property=”v:title”>
  <strong>[php tag start] echo $this->htmlEscape($_crumbInfo[‘label’]) . ‘ for sale’ ?></strong>
  </span>
  [php tag start] else: [php tag end]
  <span>[php tag start] echo $this->htmlEscape($_crumbInfo[‘label’]) [php tag end]</span>
  [php tag start] endif; [php tag end]
  [php tag start] if(!$_crumbInfo[‘last’]): [php tag end]
  <span>/ </span>
  [php tag start] endif; [php tag end]
  </li>
  [php tag start] endforeach; [php tag end]
  </ul>
  </div>
  [php tag start] endif; [php tag end]

• Methods to test your HTML markups
  It is vital to test your web pages with the help of markups and the testing tools for rich snippets. The tools would display parsed information within the page. After this, Google will search you soon after it crawl through your website.
  Now copy your page URL at the input field of ‘Fetch URL’ via the Testing Tool for Google Developers (https://developers.google.com/structured-data/testing-tool/) and click upon ‘Fetch & Validate’ button. For example copy and then paste the URL http://www.keepshooting.com/finnish-m-61-military-gas-mask.html that would generate a below-mentioned result:
• Another way is to copy your web page’s source code into your input text box then click on ‘Validate’ button. Next you can generate the source code through ctrl+u.
  Now along with the structured data Google would deliver results for your web pages.
  Your added markups would be verified by the Bing mark-up validator. This report would include the related HTML microdata, microformats, OpenGraph, RDFa and the Schema.org.
• Extensions for Magento Rich Snippet
  Want to avoid manual coding then take help of the following rich snippets of Magento extensions:
• Google Rich Snippets v1.2.2 (https://amasty.com/magento-google-rich-snippets.html)- ): Advantages are as follows-
  i) Easy customisation.
  ii) The maintained architecture of Magento codes.
  iii) Separate HTML codes and CSS/JS.
  iv) Validated codes by the W3C.
• Magento Rich Snippets
  Extension(http://www.fmeaddons.com/magento/rich-snippets-extension.html: Advantages are as follows-
  i) Product rates are shown.
  ii) Product prices are displayed.
  iii) Availability of the stock details.
  iv) Name of the brand, manufacturer and the model are displayed.
• Rich Snippet Suite (http://www.magmodules.eu/schema-org-rich-snippets.html) ): Advantages are as follows-
  i) Enabling and disabling properties of snippets are available.
  ii) Breadcrumbs are functional.
  iii) Custom extensions for online Magento stores are available.
  iv) Singularly enabled and configured extensions.
  v) A quick installation process.
• Concluding Thoughts:
  Now the implementation of the above-mentioned processes would make your SERPs more user-friendly as well as professional. To boost up the traffic as well as sales of products all you need is to hire Magento developer. Simultaneously test the schemas and keep backup files.
  If you had liked the article or if it needs some positive additions please give your positive feedbacks.