Product Variants
How to handle product variants (size, color) without duplicate pages. One-URL strategy and correct Product Schema for variants.
Product variants are different SKUs of the same product (size, color, volume). A proper technical strategy (one URL with JS switching or separate pages) and correct markup prevent cannibalization and improve indexing.
Variant types
Products can vary along several dimensions:
- Size – S, M, L, XL.
- Color – red, blue, black.
- Volume – 50ml, 100ml, 200ml.
- Material – leather, textile.
URL strategy for variants
Choosing between one URL or separate pages depends on how different the variants are.
A single URL with JavaScript switching works when variants differ only in attributes (size, color) but share the same product identity. The URL stays the same while JS updates the price, availability, and image without a page reload. This prevents content duplication.
Separate URLs are necessary when variants represent distinct products: iPhone 15 Pro 128GB vs 256GB (different SKUs, prices). Each page gets its own Product Schema and unique canonical URL.
Product Schema for variants
For one-URL pages, list variants in the offers array. Example for a t-shirt with sizes:
{
"@type": "Product",
"name": "Nike T-shirt",
"offers": [
{
"@type": "Offer",
"sku": "NIKE-S-RED",
"price": "1990",
"size": "S",
"color": "Red"
},
{
"@type": "Offer",
"sku": "NIKE-M-RED",
"price": "1990",
"size": "M",
"color": "Red"
}
]
}Common questions
Discuss your project?
Share your goals and website context — I will suggest a practical next step.