This article describes how to correctly introduce microdata for product pages in your e-store.

If you have no idea what microdata is, go first to Microdata in e-commerce – why does Google need it?
In order to implement the below changes you will need minimum technical HTML knowledge. It would be best if you just hand this article over to your IT team.

In order to present the whole process we will use a simple example:

HTML code without microdata:

<div class=”product”>
	<span class=”name”>Apple Iphone 7s</span>
	<div class=”offers”>
		<span class=”price”>1899.89<span class=”currency”> USD</span></span>
		<span class=”availability”>instock</span>
	</div>
</div>

HTML code with microdata:

<div class=”product” itemtype="http://schema.org/Product" itemscope>
	<meta itemprop="name" content="Apple Iphone 7s">
	<span class=”name”>Apple Iphone 7s</span>
	<div class=”offers” itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		<meta itemprop="price" content="1899.89" />
		<meta itemprop="priceCurrency" content="USD" />
		<meta itemprop="availability" content="http://schema.org/InStock" />
		<span class=”price”>1899,89<span class=”currency”> USD</span></span>
		<span class=”availability”>instock</span>
	</div>
</div>

The modifications that have been introduced are just about adding specific tags in accordance with http://schema.org

The code has been divided into two parts:

  1. Product part with information on product name (optionally also ID, SKU and others that you can find here: http://schema.org/Product)
    1. adding schema that will be used by engine robots to read data:
      1. itemtype=”http://schema.org/Product” itemscope
    2. adding meta tags with product titles:
      1. <meta itemprop=”name” content=”Apple Iphone 7s”>
  2. Offer part that has information on price and availability (optionally product condition and others that you can find here: http://schema.org/Offer)
    1. adding schema that will be used be engine robots to read data:
      1. itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”
    2. adding meta tags with product data
      1. <meta itemprop=”price” content=”1899.89″ />
      2. <meta itemprop=”priceCurrency” content=”USD” />
      3. <meta itemprop=”availability” content=”http://schema.org/InStock” />

As you can see the modifications are not very complex, the presented example should help you to correctly implement necessary changes.

The majority of e-commerce platforms offer product page templates that can contain data on price and availability in the form of macros in the HTML code, for example {{price}}, {{availability}}. When you use those tags, they will be automatically filled out on each product page.

Please note that introducing microdata will not be visible by the end user. In other words, the visual aspects of the site will not be changed.

When you introduce microdata, you should check their correctness by using the Google tool

More information can found in the article prepared by Google: https://support.google.com/merchants/answer/6069143?hl=en