E-commerce Example for Structured Data Carousels
Below are step by step instructions
You will need:
- A “summary” or “Product Listings Page” with structured data
- Structured data on the product pages themselves
At the time of writing, this feature is only available in EU countries.
Step 1: Choose and Implement a Summary Page
Create a summary page that lists multiple products, each linking to a detailed product page.
For example, a category page that lists “Top 5 Winter Coats.”
Step 2: Add Required Properties to the Summary Page
Add the ItemList
structured data to your summary page. Here’s an example in JSON-LD format:
<html>
<head>
<title>Top 5 Winter Coats</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "Product",
"name": "Puffy Coat Series by Goat Coat",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"offers": {
"@type": "AggregateOffer",
"lowPrice": 45.00,
"highPrice": 60.00,
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 4.9,
"reviewCount": 50
},
"url": "https://www.example.com/puffy-coats"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@type": "Product",
"name": "Wool Coat Series by Best Coats Around",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"offers": {
"@type": "AggregateOffer",
"lowPrice": 189.00,
"highPrice": 200.00,
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 4.7,
"reviewCount": 827
},
"url": "https://www.example.com/wool-coats"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@type": "Product",
"name": "Antarctic Coat by Cold Coats",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"offers": {
"@type": "Offer",
"price": 45.00,
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 4.9,
"reviewCount": 1290
},
"url": "https://www.example.com/antarctic-coat"
}
}
]
}
</script>
</head>
<body>
</body>
</html>
Step 3: Validate Your Code
- Rich Results Test: Validate your structured data using the Rich Results Test.
- URL Inspection Tool: Use the URL Inspection tool in Google Search Console to ensure your page is accessible and not blocked by
robots.txt
ornoindex
tags.
Step 4: Deploy Your Page
- Deploy your summary page and a few detail pages.
- Use the URL Inspection tool to request indexing of your new pages.
Step 5: Submit a Sitemap
- Create a sitemap including your summary and detail pages.
- Submit the sitemap through Google Search Console to ensure Google knows about all your pages.
Step 6: Follow Guidelines
- Ensure compliance with Search Essentials.
- Adhere to general structured data guidelines and specific requirements for carousel rich results.
Example Detail Pages
Each product linked from the summary page should have its own detail page with structured data. For example:
<html>
<head>
<title>Puffy Coat Series by Goat Coat</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Puffy Coat Series by Goat Coat",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"description": "A stylish and warm puffy coat perfect for winter.",
"offers": {
"@type": "Offer",
"price": 45.00,
"priceCurrency": "USD",
"url": "https://www.example.com/puffy-coats"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 4.9,
"reviewCount": 50
}
}
</script>
</head>
<body>
</body>
</html>
That should be it!