Schema markup for E-commerce websites selling the same product in different sizes

Use the schema.org/Offer property for adding schema markups for products with multiple pricing options.

Schema.org is something which webmasters can use to improve the way their websites appear on Google, Bing and other search engines. It's important as it gives users more context about your product, and will also improve click through rates and traffic to your website.

Schema also makes your website stand out on search results. You can add stars, ratings, prices and much more with Schema to make your website unique among the rest that are displayed on Google.

In this post, we are specifically looking at how e-commerce stores can use schema markup to show different prices for their products on search and Google shopping results.

Let's imagine you have an e-commerce store (e.g. www.e-commer-store.com) selling home linen related items, and one of your most popular products is the 'Nike Cushions'.

The cushions comes in 2 different size - 16*16 inches and 20*20 inches. 
Also, you can buy just the cushion in two different types - just the cushion cover ; or both the cushion cover and the insert.

So, ideally you would have a page like e-commer-store.com/nike-cushions which is your default page for this product.
And for each option (size chosen and cushion type), you would have a custom URL. 

Example 4 URLs for 4 different 'Nike Cushion' options:
  • Default page for this product:  e-commer-store.com/nike-cushions 
  • For 16*16 and cushion cover + insert:  e-commer-store.com/nike-cushions?size=16x16&type=cushion_plus_insert
  • For 20*20 and only the cushion cover:  e-commer-store.com/nike-cushions?size=20x20&type=cushion_only 
  • For 20*20 and cushion cover + insert:  e-commer-store.com/nike-cushions?size=20x20&type=cushion_plus_insert 
As each of these 4 URLs are pointing to the same product, they should each have a canonical link pointing to the default page URL to avoid duplicate content.

Also, as each of these 4 URLs display different sizes and different cushion types, the pricing information displayed on each page is different.

This is an instance where you can use the Offer property from Schema.org to display the correct pricing on Google, and relate that to the correct landing page on your website.

For example for the default page with size: 16*16, and type: cushion only - which costs $21,  the schema markup would be:
<div itemscope itemtype="http://schema.org/Offer">  
  <meta itemprop="price" content="21.0"/>  
  <meta itemprop="priceCurrency" content="USD"/>

  <div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">    
    <meta itemprop="description" content="Home Linen - Nike Cushion"/>    
    <meta itemprop="image" content="https://www.e-commer-store.com/images/nike_cushion.jpg" />    
    <meta itemprop="name" content="Nike Cushion" />    
    <meta itemprop="url" content="https://www.e-commer-store.com/nike-cushions" />  
  </div>
</div>

And for the 16*16 inch size and cushion + insert page - which costs $39, the following markup should be present.
<div itemscope itemtype="http://schema.org/Offer">  
  <meta itemprop="price" content="39.0"/>  
  <meta itemprop="priceCurrency" content="USD"/>

  <div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">    
    <meta itemprop="description" content="Home Linen - Nike Cushion"/>    
    <meta itemprop="image" content="https://www.e-commer-store.com/images/nike_cushion.jpg" />    
    <meta itemprop="name" content="Nike Cushion" />    
    <meta itemprop="url" content="https://www.e-commer-store.com/nike-cushions" />  
  </div>
</div>

Similarly, for all the different variations of the product, you would have different schema markups.

This approach works well and there is no confusion because each price defaults to a different landing page.

And on each of these landing pages, the default price is selected by you based on the size and type for cushion for the page, and as this is a dropdown, the customer is free to choose different sizing and type options, and navigate to different pricing pages from this one page. So they are never stuck with just 1 size.
 
The AggregateOffer schema markup is another option - but it is more useful when the same product is sold by different manufacturers. 
For example if you had 4 different manufacturers selling cushions - Nike Cushions, Adidas Cushions, Puma Cushions, Reebok Cushions - then you could use the AggregateOffer schema on the main cushions index page (e.g. e-commer-store.com/cushions
<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
  <span itemprop="lowPrice">$39</span>
  <span itemprop="highPrice">$95</span> 
  from <span itemprop="offerCount">4</span> sellers
</div>
The AggregateOffer is ideal for index pages which shows all the available options, and the Offer is ideal for show pages which shows a particular product.

If for some reason you cannot create a new landing page for each price option, then the AggregateOffer schema markup will make sense. Otherwise using the Offer property and having one landing page for each price is a simpler and easier way to scale.

Also, do make sure that only the original default page (e-commer-store.com/nike-cushions) is indexed. None of the other pages needs to be indexed. Doing this will ensure that Google isn't wasting any crawl budgets on the duplicate pricing options pages.


Recent Blogs