How to use Schema.org Markup for Your E-Commerce Sites
In this article, our friend David Darnes, will dive into Schema.org, a tool for annotating web pages to provide search engines with more meaning about the content. You'll better understand how we can use schema markup for e-commerce websites allowing people searching for our products to have a more enriched experience on the search engine results page (SERP).
Do you know what I love? ✨ Semantics ✨.
Providing meaning and structure to the web is a powerful thing. We achieve that by using appropriate HTML elements, attributes, and among other things, the content of the page itself. Semantics help people who visit our web pages to navigate and understand the content.
Screenshot of a small piece of HTML showing semantics.
But what about bots? Nah, I don’t mean those spambots who email you far-fetched promises; I’m referring to search engine crawler bots. These bots’ task is finding information about web pages and reporting it back to their respective search engines.
How can we help these bots, and ergo search engines like Google, Bing, and DuckDuckGo, find out more about our e-commerce websites and show that to possible new customers? That’s where Schema.org structured data comes into play.
Here’s a rundown of what we’ll be covering:
The backstory to Schema.org
Some example Schemas
Ways to implement Schema.org data
Some example of code written for e-commerce products
The SEO benefits
Some tips, tricks, and resources to help you with Schema data
What's Schema.org?
Schema.org data is a tool for annotating web pages with schemas. You can add code that you add to your website's HTML to provide search engines with more meaning about the page content, resulting in more detailed results for users. This enables you to take advantage of rich snippets on the SERP, which is important for overall search engine optimization (SEO).
Back in 2011, Google, Bing, and Yahoo (and later on, Yandex) created the Schema.org initiative. It was designed to create a common catalog of keys and values to help developers bring more semantic structure to their websites. This semantic structure would expose important information for web crawlers to pick up and pass onto search engines. Much like modern HTML elements provide more meaning to web pages.
As the Schema.org website refers to, this common structured data is designed to be a vocabulary for developers to describe their web pages and get the full benefits out of their work.
Let’s take a look at the Schema itself and some examples that apply directly to building the front-end of an e-commerce website.
Prerequisites
Before we get our hands dirty with Schema data, you need to be aware that it’s good to have some understanding of front-end code (HTML, specifically). While some find HTML approachable, others can find it overly verbose and hard to follow. If you want to head off and do a bit of cramming before coming back, then that’s cool. 😎
Schemas
Schema.org provides an extensive list of Types and DataTypes to describe the content. While the list is always changing and expanding, we can focus on a subset that offers benefits for e-commerce websites.
Product: Probably the most applicable Type for our use case. A Product Type can describe both physical and digital products. It can be used for product listing pages, as well as the product page itself.
Offer: While Offer Type applies to offers that come with a particular product, its actual use is more ambiguous. Depending on the use case, it will need to be adjusted to help the real meaning be exposed. An Offer could also be an offer on a house or an offer to make a deal.
ImageObject: Product pages will most likely include images to preview that product. An ImageObject Type can help expose that image as part of a search result.
Action: An Action can be defined as anything that can be performed to cause some kind of result. It’s ambiguous, but in the case of e-commerce, an Action Type could be for describing a ‘buy’ button.
Other Types that could be relevant are Review, AggregateRating, AggregateOffer, VideoObject. The full list of Schema.org Types is long and ever-changing, so it’s best to deduce what you want to expose and use the docs to research how to express it in structured data. Understanding Schema.org data is the first part, but we start to get our hands dirty when we start implementing it.
Now let’s look at how we can apply this to our e-commerce stores.
Implementation methods
There are three main ways of structuring your Schemas: Microdata, JSON-LD, and RDFa. They’re all slightly different but still based on the same set of Schemas. They can even be used in conjunction with each other for the best possible results.
These methods are as follows:
Microdata
<article itemscope itemtype="https://schema.org/Product">
<h1 itemprop="name">Gameboy Color - Green</h1>
<img itemprop="image" src="gameboycolor.jpg" alt='Gameboy Color - Green' />
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<h2>
<span itemprop="priceCurrency" content="USD">$</span>
<span itemprop="price" content="35.00">35.00</span>
</h2>
<a href="/buy-product/" itemprop="url" content="/buy-product/">Buy now</a>
</div>
</article>Microdata shares traits with typical HTML attributes and values, meaning you can mark specific elements that describe pieces of information. This is great if you want to be literal with your product pages, such as: using the content of your <h1> to be the Schema Product Type name of the page. The best part is that you can weave these attributes into your components and create a more direct relationship.
It’s great to be able to highly the actual content on the page as Schema data, but it becomes a little cumbersome with the attributes mixed in with others like classes, IDs, and data attributes. For most situations, abstraction is going to be more beneficial, which is what JSON-LD is better for.
JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Gameboy Color - Green",
"image": "gameboycolor.jpg",
"offers": {
"@type": "Offer",
"price": "35.00",
"priceCurrency": "USD",
"url": "/buy-product/"
}
}
</script>JSON is probably the most commonly used to formulate structured data. A block of JSON within the <head> of the page, wrapped with an attributed script element, describes all the structural information of the page. The good thing about this is all the data is abstracted, meaning the presentation of the data on the page itself isn’t a concern.
Additionally, it means that libraries can handle the feature on their own; SEO-focused libraries can inject it into the page alongside meta tags for Twitter, Open Graph, and other SEO additions.
RDFa
<article vocab="https://schema.org/" typeof="Product">
<h1 property="name">Gameboy Color - Green</h1>
<img property="image" src="gameboycolor.jpg" alt='Gameboy Color - Green' />
<div property="offers" typeof="Offer">
<h2>
<span property="priceCurrency" content="USD">$</span>
<span property="price" content="35.00">35.00</span>
</h2>
<a property="url" content="/buy-product/" href="/buy-product/">Buy now</a>
</div>
</article>RDFa attributes share some similarities to Microdata, mainly because Microdata was inspired by it. While RDFa is the least used out of the three, it’s capable of more fine-grain control with its ‘vocab’, ‘property’, and other attributes.
Check out this extensive article from Jeni Tennison on the differences between RDFa and Microdata and how you can even use them together.
Schema.org product examples
Let’s get down to the main course and start looking at some real examples of Schema.org structured data for your e-commerce website. The following will be in JSON-LD format due to their popularity. Remember that all formats are interchangeable and can be used in conjunction, but it’s best to use validation tools and refer to the official Schema.org website to understand their proper usage.
Base product page
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Gameboy Color - Green",
"image": "gameboycolor.jpg",
"offers": {
"@type": "Offer",
"price": "35.00",
"priceCurrency": "USD",
"url": "/buy-product/"
}
}
</script>In the line order of the code above, a Product schema object is defined. It has a product name and a URL pointing to an image of the product. Within this schema, an Offer type is defined that contains the actual offering being made to the possible buyer. The Offer contains a price, a currency, and a direct URL to buy the product.
Full product with details, reviews, and ratings
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Gameboy Color - Green",
"image": "gameboycolor.jpg",
"description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, numquam ea illum earum alias tempora quod cupiditate labore dicta nisi, laborum nihil dolorum? Modi nam asperiores obcaecati. Nesciunt, ullam deserunt.",
"sku": "1234567890",
"gtin8": "1234567890",
"brand": "Nintendo",
"offers": {
"@type": "Offer",
"price": "35.00",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2021-12-31",
"priceCurrency": "USD",
"url": "/buy-product/"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "3.5",
"reviewCount": "2"
},
"review": [
{
"@type": "Review",
"author": "Ellie",
"datePublished": "2020-04-01",
"reviewBody": "Kind of disappointed by the quality of the product, but it works pretty well.",
"name": "Not a happy camper",
"reviewRating": {
"@type": "Rating",
"bestRating": "5",
"ratingValue": "3.5",
"worstRating": "1"
}
},
{
"@type": "Review",
"author": "Wario",
"datePublished": "2020-07-11",
"reviewBody": "Exactly what I was looking for!",
"name": "Perfect!",
"reviewRating": {
"@type": "Rating",
"bestRating": "5",
"ratingValue": "5",
"worstRating": "1"
}
}
]
}
</script>In the extended example above, the product information has been greatly expanded. It now includes product details such as an SKU and GTIN8 and average reviews and individual reviews.
The SKU, GTIN8, and Brand have been added at the Product Type level, while the Aggregate Rating and individual Reviews have their own types entirely. Aggregate Rating value should be calculated from the average review rating value from each review. In the above example, there’s a review count of 2. Within each review, there is a Rating type with a best, worst, and the given rating.
All the examples shown within this article have been added to this CodePen so you can see, copy and interact with them on an adjacent live view. The pen also includes the Microdata counterparts to the two JSON-LD product examples above. This might be helpful when comparing the two most popular methods of implementation.
The results and SEO benefits
Due to the extensive list of Types on Schema.org, and the complexity you can fall into when structuring data for crawler bots, it can be hard to see the true benefits of this work. So, let’s take a look at some real-world examples of Schema.org data structuring as it changes the presentation of search results.
Example of the product “Google Home” appearing in Google search results, showing reviews, ratings, and stock supply.
The same “Google Home” product example but on mobile.
Example of the product “Walmart Lava Lamp” appearing in Google search results, showing reviews, ratings, and stock supply.
The same “Walmart Lava Lamp” product example but on mobile experience.
Tips, tricks, and resources
While there are a few places to read up on Schema.org and even validate your code, it’s not massively talked about or shared within the industry, at least from what I’ve experienced. So, I’ve put together a list of tools that will hopefully help you test your code, as well as develop your understanding of Schema.org data:
In addition to these resources, I recommend setting your website up with tools that monitor your indexing and search status, such as Google Search Console.
Closing thoughts
If we were to reflect on the above, I think the biggest challenge is the time and effort tradeoff to the actual benefits. Implementing Schema.org structured data as JSON-LD is time-consuming, even more so for Microdata when tagging individual components. However, this method could help your product stand out from the competitive crowd on search results pages. It could even make your products appear in other settings, such as the ‘Shopping’ view or relevant articles.
Granted, it’s a niche area of front-end development and not commonly implemented, but I do think it’s worth exploring, even on a small level. Thankfully, Schema.org isn’t something you need to go all-in on and can be sprinkled into your codebase in small amounts, either within the HTML or as an abstracted piece of JSON.
I hope you’ve found this write-up helpful and informative. If you wish to chat more about this, feel free to hit me up on Twitter or leave a comment below. We’d love to hear about your uses of Schema.org data and discover any exciting use cases.
