To tell Google that multiple URLs represent different variants of the same parent product (e.g., same shoe in different colors or sizes). This helps Google connect these variants and show better search results.
When to Use Product Variant Markup #
- Your product comes in different variants (color, size, model)
- Each variant has its own unique URL
- You want Google to group these variants together for better user experience
How to Implement #
You add structured data on both parent product pages and variant pages.
1. Parent Product Page #
- Use “@type”: “Product”
- Use the “hasVariant” property listing all variant URLs and minimal details for each variant
2. Variant Product Page #
- Use “@type”: “Product”
- Use the “isVariantOf” property pointing back to the parent product
- Include variant-specific details like color, size, SKU, price, availability
Key Properties #
| Property | Type | Description |
| hasVariant | Product (array) | List of variant products (URLs) |
| isVariantOf | Product | Reference to parent product |
| color | Text | Color of variant |
| size | Text or SizeSpecification | Size info |
| sku | Text | SKU of variant |
| mpn | Text | Manufacturer part number |
| gtin8/12/13/14 | Text | Barcodes for the variant |
| offers | Offer | Price, availability for variant |
Example JSON-LD #
Parent Product with variants #
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “Awesome T-Shirt”,
“description”: “Comfortable cotton t-shirt.”,
“sku”: “TSHIRT001”,
“brand”: {
“@type”: “Brand”,
“name”: “CoolBrand”
},
“hasVariant”: [
{
“@type”: “Product”,
“name”: “Awesome T-Shirt – Red”,
“url”: “https://example.com/tshirt-red”,
“color”: “Red”,
“sku”: “TSHIRT001-RED”
},
{
“@type”: “Product”,
“name”: “Awesome T-Shirt – Blue”,
“url”: “https://example.com/tshirt-blue”,
“color”: “Blue”,
“sku”: “TSHIRT001-BLUE”
}
]
}
Variant Product Page example #
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “Awesome T-Shirt – Red”,
“description”: “Comfortable cotton t-shirt in red color.”,
“sku”: “TSHIRT001-RED”,
“color”: “Red”,
“isVariantOf”: {
“@type”: “Product”,
“name”: “Awesome T-Shirt”,
“url”: “https://example.com/awesome-tshirt”
},
“offers”: {
“@type”: “Offer”,
“priceCurrency”: “USD”,
“price”: “19.99”,
“availability”: “https://schema.org/InStock”,
“url”: “https://example.com/tshirt-red”
}
}
Important Notes #
- Each variant page must have unique URL with its own markup.
- Variant pages point back to parent product using isVariantOf.
- Parent product page lists variants in hasVariant property with minimal info and URLs.
- Use variant-specific details (color, size, SKU, GTIN) on variant pages.
- This helps Google group products and provide richer search experiences like variant selectors.