SEO: Structured Data Markup for Ecommerce Product Pages

Structured data markup enables rich results on Google and Bing.

Structured data markup enables rich results on Google and Bing.

Structured data markup helps search engines identify product information and display that information in rich results, potentially increasing how many clicks the product page will earn.

When shoppers search for products in a search engine like Google or Bing, they will likely get a long list of ads and relevant organic listings. If a page ranks well for a particular product search, its link and description will appear on the list of returned results. But ranking well on a search engine results page is only part of the task. Someone still has to click.

Structured Data Markup Enables Rich Results

One way to stand out on a search engine results page is to include more or better information, like a product review, price information, and some indication of inventory level.

The image below is a screen capture from a Google search results page taken on June 6, 2016. Notice the Lego Technic Compact Track Loader has been rated 10 times on the Walmart site for an average rating of four and a half stars out of five. It is currently priced at $14.62, and it is in stock.

This Google search results page listing shows the structured data.

This Google search results page listing shows the structured data.

Google understands and displays this additional information thanks to the structured data markup on this particular product detail page. While the additional work Walmart has done to help describe its content for Google may not impact how it ranks among the results returned (more about this below), it may help the Walmart listing receive more clicks from the search engine results page.

Structured Data Markup with Microdata Vocabulary

Microdata is a web standard used “to annotate content with specific machine-readable labels.” Effectively, it places short bits of markup inline with other HTML to better describe the associated HTML content.

Google and Bing can both understand product-related microdata featuring Schema.org’s product, offer, and review vocabulary.

Implementing Schema.org vocabulary microdata on an ecommerce product detail page begins with the outermost element surrounding the product information. In this example, a div is used.

<div itemscope itemtype=”http://schema.org/Product”>
    ...
</div>

In the normal course of laying out the product detail page, identify additional information about the product using an itemprop property.

<div itemscope itemtype=”http://schema.org/Product”>
    <h1 itemprop=”name”>Some Amazing Product</h1>
    <img src=”some-amazing-product.png” alt=”Amazing product picture” itemprop=”image” />
    <p itemprop=”description”>
        This is a really amazing product. In fact, we think you will be amazed.
        <span itemprop=”sku”>123456789</span>
    </p>
</div>

Notice in the example above, the product’s name, image, description, and stock keeping unit (SKU) are all identified using Schema.org product vocabulary.

There is also a Schema.org vocabulary for describing product ratings. In the code below, aggregateRating, ratingValue, and reviewCount are used to help search engines identify the product rating and enable them to show it in a rich result.

<div itemscope itemtype=”http://schema.org/Product”>
    <h1 itemprop=”name”>Some Amazing Product</h1>
    <img src=”some-amazing-product.png” alt=”Amazing product picture” itemprop=”image” />
    <p itemprop=”description”>
        This is a really amazing product. In fact, we think you will be amazed.
        <span itemprop=”sku”>123456789</span>
    </p>
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        <span itemprop=”ratingValue”>4</span> stars, based on 
        <span itemprop=”reviewCount”>1,987</span> reviews.
    </div>
</div>

Lastly, one can add information about the product’s price and inventory levels using the Schema.org offer vocabulary.

<div itemscope itemtype=”http://schema.org/Product”>
    <h1 itemprop=”name”>Some Amazing Product</h1>
    <img src=”some-amazing-product.png” alt=”Amazing product picture” itemprop=”image” />
    <p itemprop=”description”>
        This is a really amazing product. In fact, we think you will be amazed.
        <span itemprop=”sku”>123456789</span>
    </p>
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        <span itemprop=”ratingValue”>4</span> stars, based on 
        <span itemprop=”reviewCount”>1,987</span> reviews.
    </div>
    <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>
        <meta itemprop=”priceCurrency” content=”USD” />
        $<span itemprop=”price”>9.99</span> |
        <span itemprop=”availability”>In-stock</span>
    </div>
</div>

You can find a Schema.org property for just about anything you want to describe on a product detail page. Once you have some structured data markup, you can even test it for validity using Google’s Structured Data Testing Tool.

Structured Data Markup with JSON-LD

Recently, Google has begun to prefer JSON for Linking Data or JSON-LD over microdata. JSON-LD has advantages over microdata, including being separate — i.e., inside of a script tag nested in the document head — from the HTML markup. At the time of writing, Bing did not yet support JSON-LD for structured data markup.

For JSON-LD, begin with a script tag, setting the type to “application/ld+json.”

<script type="application/ld+json">
    ...
</script>

Next, write the JSON-LD object. Notice that the context points to Schema.org in the example. Thus, you can use the same properties described in the microdata section above.

{
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": "Some Amazing Product",
    "image": "some-amazing-product.png",
    "description": "This is a really amazing product. In fact, we think you will be amazed.",
    "sku": “123456789",
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4",
        "reviewCount": "1,987"
    },
    "offers": {
        "@type": "Offer",
        "priceCurrency": "USD",
        "price": "9.99",
        "availability": "http://schema.org/InStock"
    }
}

Structured Data Markup May Impact Ranking

Structured data markup, whether implemented with microdata or JSON-LD, can enable rich results, possibly increasing the likelihood a particular product page listing on a search engine results page will get clicked. For several years now, this was the primary reason to include structured data markup.

However, on Sept. 11, 2015 Google Webmaster Trends Analyst John Mueller said structured data “over time might flow into the rankings” during an hour-long Webmaster Central Hangout. Mueller’s comment — see, roughly, at 21:40 minutes into the video — has encouraged some marketers to include structured data markup.

Leave a Reply