A Guide To Structured Data For Ecommerce Websites

Whether you are new to the world of SEO or an experienced search engine optimiser, in the past few years you probably came across terms such as structured data, JSON-LD or Schema markup. You will find these terms mentioned in a plethora of SEO articles online, but you may still wonder what exactly is structured data and how it can benefit ecommerce websites.

Woman amidst code
Photo credit: ThisIsEngineering

Wonder no more! In this blog post we will explain what structured data (or Schema markup) is and what are the most important types of structured data for ecommerce websites. You’ll even find structured data markup examples you can copy and adapt for your own website.

But first, let’s start from the beginning… What exactly is structured data?

What is structured data?

Structured data, also called Schema markup, is a way to give search engines information about your website, using a language that can be easily processed by the major search engines; Schema.org.

This language enables to organize the data of a webpage and to feed this information to search engines in a way that is quick and easy to understand.

In short, instead of relying on search engine algorithms’ ability to correctly understand the content of your web pages, structured data feed this information to them.

For example, let’s imagine that you have a website on which you sell bike parts. On your website, users can find bike parts to buy but also informative content to help them install these parts on their bike.

With structured data, you will be able to indicate to search engines what are the products offered on the website and give them detailed information about each product, such as its price, availability, images but also customer ratings and review, or even if the product is on sale for a certain period of time.

You will also be able to give information to search engines about your educational content. If you have great guides detailing step by step how to replace bike parts, you can add ‘How To’ structured data to these pages and indicate in this markup all the steps, tools needed, total time and more information included in your guide.

To implement this structured data on a webpage, Google recommends using the JSON-LD format, which uses a JavaScript object to insert the Schema markup into the head or body section of a webpage. If you’re not quite sure what this all means, don’t worry it will become much clearer as we look at Schema markup examples.

What are the benefits of structured data?

Structured data supports SEO in many ways.

Thanks to structured data, search engines better understand your website content and can match this content to relevant search terms more accurately. This means that structured data can help to grow your site’s visibility for relevant searches and drive more qualified traffic to your site.
Structured data also enables webpages to achieve special search result features and enhancements, giving more information about the page content to users directly in search results.

For instance, a product page result can show star ratings based on customer reviews, increasing users trust in the product and likelihood of them clicking on the result.

Here is an example of an enhanced product result in Google search results, showing the product price, availability, star rating and the number of customer reviews for this product:

Supporting screenshot

Concerning blog pages and how to guides, marking these pages up with structured data can help achieving a top ranking and enhanced result with snippet of text and or images, helping pages to gain more real estate on search, as shown in the screenshot below.

Supporting screenshot

In short, structured data gives brands and websites greater visibility on search, higher click-through rates and allows for a better comprehension of businesses by search engines and users alike.

The most important Structured Data types for ecommerce websites

There are many types of structured data, including recipe, event, organization, local business, movie… in fact there are almost as many types of structured data as there are types of contents and actors on the web.

To help you navigate this veritable sea of Schema types, we have listed important schema types you should start implementing on your ecommerce website today.

Organization Schema Markup

Organization Schema markup gives search engines information about your company, including business and marketing details such as your company’s address, phone number, social media profiles, logo or even its diversity policy. Adding Organization schema to your website can enhance the visibility and appearance of your website in search results and add visual elements to your business’ Knowledge Graph card.

In the Halfords’ knowledge graph screenshot below, information such as the company’s website URL, social media profiles and its logo are provided in the website’s Organization Schema markup.

Supporting screenshot

In the Organization Schema markup code below, we have included sample data for an organisation including its logo, address, telephone, founding date, founders, and social media profiles. You can copy this code and adapt it with your own company information.

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

{ "@context": "https://schema.org", "@type": "Organization", "name": "ACF Bikes", "url": "http://www.acf-bikes.com", "logo": "http://www.acf-bikes.com/photos/2021/08/acfbikeslogo.png", "foundingDate": "2021", "founders": [ { "@type": "Person", "name": "Anne Smith" }, { "@type": "Person", "name": "Charlotte Jones" } ], "address": { "@type": "PostalAddress", "streetAddress": "1 Beach Street", "addressLocality": "Brighton", "addressRegion": "East Sussex", "postalCode": "BN12LH", "addressCountry": "GB" }, "contactPoint": { "@type": "ContactPoint", "contactType": "customer support", "telephone": "[+44123456789]", "email": "hello@acf-bikes.com" }, "sameAs": [ "http://www.facebook.com/acf-bikes", "http://www.twitter.com/acf-bikes", "http://instagram.com/acf-bikes/", "http://www.linkedin.com/company/acf-bikes" ]} </script >

Pro tip: Implement the Organization Schema markup in the head or body section of your home page or about page only, it should not be implemented on every page of your website.

Product Schema Markup

Product Schema markup provides detailed information to search engines about your products and enables the display of the product price, rating and availability in search results. You can even expand your Product Schema markup to include sales, reviews, shipping costs and delivery times.

In the example below, Wiggle’s enhanced product result includes the product star rating, number of customer reviews and its price range.

Supporting graphic

Product Schema markup also make products eligible to be shown with a product label in Google Images:

Supporting screenshot

The Product Schema script below includes sample data for a product page, including the product image, colour, category, rating, and availability.

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

{ "@context": "https://schema.org/", "@type": "Product", "name": "Memoryfoam Blue Saddle", "image": [ "http://www.acf-bikes.com/photos/2021/08/bluesaddle1.jpg", "http://www.acf-bikes.com/photos/2021/08/bluesaddle2.jpg", "http://www.acf-bikes.com/photos/2021/08/bluesaddle3.jpg" ], "description": "Ergonomic saddle with memory foam for comfortable bike rides ", "sku": "123456", "brand": { "@type": "Brand", "name": "ACF Bikes" }, "category": "Bike Saddles", "color": "blue", "offers": { "@type": "Offer", "availability": "https://schema.org/InStock", "price": "40.00", "priceCurrency": "GBP" }, "review": { "@type": "Review", "reviewRating": { "@type": "Rating", "ratingValue": "4.5", "bestRating": "5" }, "author": { "@type": "Person", "name": "Sarah Davies" } }, "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "123" } } </script>

Here are essential Product Schema items to include in your markup:

  • Product name
  • Product description
  • Price
  • Availability
  • Brand
  • Images
  • Reviews
  • Aggregate rating

Breadcrumb Schema Markup

Breadcrumb trails are text paths that are often found on the top of website pages, as a way to indicate to users the position of the page in the site hierarchy and give them the opportunity to easily backstep to previous pages in the path.

Breadcrumbs Schema markup helps search engines understand further how your website is structured and enable enhanced results in search, breaking the URL into a breadcrumb trail.

Although Google now often break URLs into breadcrumb automatically, it is still important to implement breadcrumb schema to ensure the breadcrumbs shown in search results are correct.

Supporting screenshot

Here is an example of breadcrumb Schema you can steal and adapt to your own website:

 

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Bike Parts", "item": "http://www.acf-bikes.com/bike-parts" },{ "@type": "ListItem", "position": 2, "name": "Seating", "item": "http://www.acf-bikes.com/bike-parts/seating" },{ "@type": "ListItem", "position": 3, "name": "Saddles", "item": "http://www.acf-bikes.com/bike-parts/seating/saddles" }] } </script>

 

Article Schema Markup

If you have an ecommerce website, there’s a good chance that you also have a blog with awesome content that inspires and informs your customers and target audiences.

Marking up your blog articles with Article Schema enables your content to show as rich snippets in search result pages, and for your pages to gain more search real estate by including your post headline, image and a preview of its content.

Supporting screenshot

The features you can achieve with Article Schema depend on how your pages are coded. Accelerated Mobile Pages (AMP) with Article Schema markup are enabled to appear in the Top stories carousel, visual stories and rich results in mobile, while non-AMP pages marked up with Article Schema help Google understand further the content of the post and show better headline and images.

Get started with Article Schema implementation with the below markup .

 

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Best Bike Saddles In 2021", "image": [ "http://www.acf-bikes.com/photos/2021/08/greatsaddle.jpg", "http://www.acf-bikes.com/photos/2021/08/awesomesaddle.jpg", "http://www.acf-bikes.com/photos/2021/08/comfysaddle.jpg" ], "description": "We selected the best bike saddles for men and women in 2021", "articleBody": "This is the body content of the article, you can past the entire content of your blog article.", "datePublished": "2021-08-13", "dateCreated": "2021-08-13", "dateModified": "2021-08-13", "author": { "@type": "Person", "name": "Anne Smith", "url": "http://www.acf-bikes.com/about-founders/anne-smith" }, "publisher": { "@type": "Organization", "name": "ACF Bikes", "logo": { "@type": "ImageObject", "url": "http://www.acf-bikes.com/photos/2021/08/acfbikeslogo.png" } } } </script>

 

Schema Markup tips and useful resources

  • Head to Schema.org to find all Schema types and their description
  • Generate your schema markup in JSON-LD format and add it to either the head or body sections of your pages.
  • Find more information about the different structured data formats supported by Google in this Google description.
  • Validate your Schema mark-up with the Schema Markup Validator before implementing on your website, using the ‘Code Snippet’ function, and after implementation using the ‘Fetch URL’ function
  • Test your pages using Google’s Rich Results Test to see which rich results can be achieved by your pages containing structured data.