color

color · Recommended by Google

Appears in

Product

What is it?

The color of a product. This plain text field tells search engines and AI assistants the exact color or color combination an item comes in, such as "Red" or "Navy/White."

For ecommerce sites, color is one of the key variant attributes that helps Google match product listings to color-specific searches.

Why this matters for AEO

When a shopper asks an AI assistant "Does the Patagonia Nano Puff come in blue?", the engine scans Product markup for color values to answer directly. Without structured color data, the AI falls back to parsing page text and image alt tags, which produces less reliable answers and reduces the chance of your product being cited.

What the specs say

Schema.org: Text. The color of the product. View on schema.org

Google: Recommended. "The color or color combination of the product (for example, 'red' or 'yellow/sky blue')." View Google docs

How to find your value

• Product page — Color selector, swatch labels, variant dropdown
• Ecommerce platform — Product variant attributes, color field
• Supplier data feed — Color column in product CSV/XML
• Google Merchant Center — Color attribute in product feed

Use the same color name your customers see on the page. If the product has multiple colors, separate them with a slash: "Red/Blue."

Format and code

Expected type: Text

The value is a plain string. Use common color names rather than hex codes or internal color IDs.

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Wool Winter Coat",
  "color": "Green"
}

For products that vary by color, use ProductGroup with hasVariant:

{
  "@context": "https://schema.org/",
  "@type": "ProductGroup",
  "name": "Wool Winter Coat",
  "variesBy": ["https://schema.org/color"],
  "hasVariant": [
    {
      "@type": "Product",
      "name": "Small Green Coat",
      "color": "Green",
      "sku": "44E01-M11000",
      "offers": {
        "@type": "Offer",
        "price": 39.99,
        "priceCurrency": "USD"
      }
    }
  ]
}

Common invalid patterns:

• Hex codes: "color": "#00FF00" (use "Green" instead)
• Internal IDs: "color": "CLR-447" (use human-readable names)

Webflow implementation

Static pages

Add color directly in the JSON-LD block in Page Settings > Custom Code (Head):

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Classic Oxford Shoes",
  "color": "Brown"
}
</script>

CMS template pages

Map a Webflow CMS text field (e.g., "Product Color") to the color property using a CMS field reference:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{wf {"path":"name","type":"PlainText"} }}",
  "color": "{{wf {"path":"product-color","type":"PlainText"} }}"
}
</script>

In Schema HQ

The value is read from Webflow CMS color field and maps it to color in the Product JSON-LD automatically. For static pages, set the color value in the Schema HQ editor and publish.

Real examples

From Google's product variant documentation:

{
  "@type": "Product",
  "sku": "44E01-M11000",
  "gtin14": "98766051104214",
  "image": "https://www.example.com/coat_small_green.jpg",
  "name": "Small green coat",
  "color": "Green",
  "size": "small",
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/coat?size=small&color=green",
    "priceCurrency": "USD",
    "price": 39.99,
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock"
  }
}

Source: Google Product Variants documentation

Related fields

• name · the product title
• sku · merchant-specific product identifier
• material · what the product is made from
• offers · pricing and availability
• image · product photos (use color-specific images per variant)

FAQ

Should I use hex codes or color names?

Use human-readable color names. Google expects plain text like "Red" or "Navy Blue," not hex codes like "#FF0000." The value should match what shoppers see on your product page.

How do I handle multi-color products?

Use a slash to separate colors: "Red/Blue" or "Black/White/Gold." This matches Google's documented format for color combinations.

Is color required for Google rich results?

Color is Recommended, not Required. Google can still show Product rich results without it. But for merchant listings and Shopping tab results, providing color helps Google match your products to color-specific queries and improves variant grouping.