Practical Ecommerce

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.

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Sean McGown June 9, 2016 Reply

    Great overview Armando. One thing I noticed is that people who copy the code segments above need to make sure all of the smart quotes are changed to straight quotes…I’ve had similar difficulties posting code to the web on numerous occasions.

  2. Grahame Palmer January 23, 2017 Reply

    There are two fundamental considerations for effective implementation of Structured Data Markup that ecommerce site owners need to know.

    1. The implementation of the format is firstly a technical process. As all (good) ecommerce sites are based on complex CMS platforms, where data is stored in a database and “parsed” into HTML dynamically, the structured data markup needs to be programatically called through the file code… be this PHP, ASP or whatever… It’s better if this can be embedded in the file that builds the header, and that the data is rendered as JSON-ld, rather than in the body text of the pages – where it would be identified within meta tags using the itemscope and itemtype nesting protocols described at schema.org. In MOST cases, this is a task for a code expert… building code that calls the database for dynamic page composition requires knowledge of the architecture of the database, and how to query it. It’s not possible (in a complex ecommerce CMS) to “manually” input this into “page HTML” because the HTML is programatically compiled “on-the-fly”, depending on what the website visitor is requesting. So… while it’s “nice” to see examples of this stuff as it should appear, getting it to appear is something a programmer has to do.

    2. There’s no harm embedding as many of the schema.org definitions as you can – as long as they are relevant to the content and context of the website, and more specifically, to the web page being rendered. The schema MUST be a “summary” of what each page contains. SO… if you know what definitions you are using, and how these are “managed” by the CMS, the vwebsite owner can then start to add content that fills each of the schema definitions that will be parsed into the section of any given page. The key here is to make your content specific… If the content is about a specific product, then it’s usually not a good idea to pepper the product description text with names of other products – even if your desire is to cross-sell / up-sell to associated or perhaps lure shoppers to a more expensive (higher nett margin) product or products. The key is to have the description (which is also used in the JSON-ld schema markup) to be as specific as possible, because that’s what you want the search engines to focus on. If the desire is to have cross-sell / up-sell info, then the content for these alternative/associated products should be contained in a separate database field so that they do not feature in the schema markup – and which would consequently dilute the relevance of the product being showcased.

    Each element of the schema markup (as nested in the JSON-ld header) ought to be called from a separate table/field in the dbase.

    This ensures that each schema element is highly specific, pertinent and above all – relevant.

    In this way – with comprehensive schema markup defining the page – it will be almost 100% relevant to the item being showcased – increasing the relevance of what appears in search engine search results.

  3. Nukid September 26, 2017 Reply

    Hey, can you please verify the schema added here is correct or not: https://www.pk-domain.com/domain-registration.html

    also being a beginner, i need to know whether we need to add schema in both ways or it is okay to go with any of the methods explained above?