Should you really describe every product variant in your canonical page?

Why does Google insist on text content for variants?

Search engines index text first and foremost. When a user searches "blue jeans size 42", Google needs to find these terms somewhere on the page to consider it relevant.

Many e-commerce sites build their variant selectors with pure JavaScript or images without alt attributes. Result: Google doesn't "see" that the product exists in blue or size 42, even though it technically does.

What is a canonical page in this context?

Alan Kent is talking about the main product page — the one that groups all variations of the same item. Not one URL per color, not one URL per size.

This approach consolidates the SEO signal on a single resource and avoids duplication. But it requires clearly indicating in the HTML of this single page that all variants exist.

How do you concretely describe these variants in text?

Two main methods:

• Enriched product description: "Available in red, navy blue, black — Sizes from S to XXL"
• Alt attributes on visual selectors: <img src="swatch-blue.jpg" alt="Navy blue"> for each color swatch
• Accessible hidden text: aria-label tags or text hidden visually but readable by crawlers (watch out for unintentional cloaking)
• Size charts: display available sizes in a clear text format

Is this recommendation consistent with observed practices?

Yes, and it aligns with field observations over many years. Sites that clearly expose their variants in text rank better for specific long-tail searches ("black Nike Air Max sneakers size 43").

The problem: many e-commerce platforms (Shopify, Magento) generate variant selectors without alt text by default. You need to customize templates, which requires development work.

What nuances should be added to this guideline?

Alan Kent doesn't clarify whether Schema.org structured data (Product → offers → itemOffered) alone is sufficient. In theory, Google can extract variants from there — but this statement suggests it's not guaranteed. [To verify]

Another gray area: what about variants generated dynamically on the client side? If a user selects "blue" and JavaScript injects content, can Google crawl it effectively through rendering? The answer isn't clear here.

When does this rule not fully apply?

If your e-commerce model uses a unique URL per variant (for example, a separate page for each color), then each page should describe its own variant — no need to list everything.

But this architecture creates other problems: cannibalization, PageRank dilution, complex canonical management. Google has always preferred consolidating variants on a parent page when possible.

What do you need to do concretely on your product pages?

Audit your product page templates: does the text explicitly mention available colors, sizes, or other attributes? If not, enrich the description or add a dedicated section ("Available colors: ...").

Verify that your visual selectors (color swatches, size buttons) have proper alt, title, or aria-label attributes. Inspect the rendered DOM in Chrome DevTools.

What errors must you avoid at all costs?

Don't rely solely on JavaScript to display variants. If content only appears after a user click or asynchronous loading, Google might miss it — especially if rendering budget is limited.

Also avoid hiding text with display:none or visibility:hidden without clear accessibility reasons. Google tolerates certain techniques (accordions, tabs) but remains wary of cloaking.

How do you verify your site is compliant?

• Run a crawl with Screaming Frog or Oncrawl and extract plain text from product pages: do variants appear?
• Use Google Search Console → URL Inspection to see the HTML rendering as Googlebot perceives it
• Test a Google search with site:yoursite.com "color variant" to verify Google has indexed these terms
• Compare your rankings on long-tail queries ("product X color Y size Z") before/after optimization
• Analyze server logs to confirm Googlebot is accessing variant content properly