How to add rich snippets to Magento 2 products using Schema.org tags

What are schema.org tags?

Schema.org tags allow us to define our page content by structured microdata. Providing search engine spiders as much data of our page allows site indexing to be further accurate and provide better search results. The most useful thing about attaching microdata to your Magento product pages is that they allow rich snippets on search engine results pages.

Setting Up A Product Item Scope

Directory

app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml

Content

Declaring an itemscope of product on line 41

<div class=”product-view” itemscope itemtype=”http://schema.org/Product” itemid=”#product_base”> 

If you are only using a simple product you can neglect the itemid as this is a link between parent product schema and the children product schema. This id can be whatever you want it to be as this static data is for references and not being indexed itself.

Tag of Product Name on line 50

h1 itemprop=”name”><?php echo $_helper->productAttribute($_product,$_product->getName(), ‘name’) ?></h1>

Product Short description on Line 81

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

We can also use the meta tag to add further information, Like:

<meta itemprop=”url” content=”<?php echo $_product->getUrlModel()->getUrl($_product, array(‘_ignore_category’=>true)); ?>” />

<meta itemprop=”sku” content=”<?php echo $_product->getSku() ?>” />

Adding The Product Image Property

Directory

app/design/frontend/[package]/[theme]/template/catalog/product/view/media.phtml

Content

To declare the product image, you will need to make changes in two locations that are Line 40 and Line 62.  

$_img = ‘<img itemprop=”image” id=”image” src=”‘.$this->helper(‘catalog/image’)->init($_product, ‘image’).'” alt=”‘.$this->escapeHtml($this->getImageLabel()).'” title=”‘.$this->escapeHtml($this->getImageLabel()).'” />’;

$_img = ‘<img itemprop=”image” src=”‘.$this->helper(‘catalog/image’)->init($_product, ‘image’).'” alt=”‘.$this->escapeHtml($this->getImageLabel()).'” title=”‘.$this->escapeHtml($this->getImageLabel()).'” />’;

Setting Up Default Product Offers Scope

Directory

app/design/frontend/[package/[theme]/template/catalog/product/view/type/default.phtml

Content

Having configured a basic product scope, let's now configure a simple offer that adds price and availability. We do this to keep the offer scope separate depending on different product types. 

in the default.phtml, cover everything in an Offer Itemscope starting on Line 28.

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>…</div>

We also can use the meta tag for the product currency online 30.

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

and can link for the Item Availability on lines 34 and 36.

<?php if ($_product->isAvailable()): ?>

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

<?php else: ?>

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

<?php endif; ?>

Adding Product Price

Directory

app/design/frontend/[package]/[theme]/template/catalog/product/price.phtml

Content

span itemprop=”price” class=”price” id=”price-excluding-tax-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>”>…</span>

<span class=”regular-price” id=”product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>”>

<?php echo str_replace(‘class=”price”‘, ‘class=”price” itemprop=”price”‘, $_coreHelper->currency($_price + $_weeeTaxAmount, true, true)); ?>

Aggregate Rating Scope Information

Directory

app/design/frontend/[package]/[theme]/template/review/helper/summary.phtml

Content

Aggregate rating is a schema tag of a product to show the basic star rating in your rich snippets.

<span itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>

<?php if ($this->getReviewsCount()): ?>

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

….

</span>

Setting up grouped product offers

Directory

app/design/frontend/[package]/default/template/catalog/product/view/type/grouped.phtml

Content

For Product schema, adding the grouped product offers isn’t that much more work. We will just need to open up the grouped.phtml template and make a few changes.

we have to add the availability of the main product scope on line 38

<?php if ($_product->isAvailable() && $_hasAssociatedProducts): ?>

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

<?php else: ?>

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

<?php endif; ?>

 The grouped product loop is where we have to represent a new offer, then under that offer, we create another product scope and link it to our main product. This is what links the product as a sub-product and gets us that pretty price range in our rich snippet.

Start the new scopes Line 64 and 65

<tr itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>

<span itemscope itemtype=”http://schema.org/Product” itemref=”#product_base”>

<td itemprop=”name”><?php echo $this->htmlEscape($_item->getName()) ?></td>

The new offers on Line 69 and 70:

<td class=”a-right”>

<meta itemprop=”price” content=”<?php echo number_format($_item->getPrice(), 2);?>” />

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

And lastly, add product availability on Lines 78-85:

<?php if ($_item->isSaleable()) : ?>

<link itemprop=”availability” href=”http://schema.org/InStock”>

<input type=”text” name=”super_group[<?php echo $_item->getId() ?>]” maxlength=”12″ value=”<?php echo $_item->getQty()*1 ?>” title=”<?php echo $this->__(‘Qty’) ?>” class=”input-text qty” />

<?php else: ?>

<link itemprop=”availability” href=”http://schema.org/OutOfStock”>

<p class=”availability out-of-stock”><span><?php echo $this->__(‘Out of stock’) ?></span></p>

<?php endif; ?>

</td>

<?php endif; ?>

If you are looking for Magento 2 Developers, visit Magento Digital Agency.