How To: Author Product Variant Markup with the Schema App Editor

In February 2024, Google announced additional documentation and support for Product Variants. This support document explains what Product Variants are, how to recognize them, and how to use the Schema App Editor to author markup describing them.

TABLE OF CONTENTS

• Strategy: Recognizing and Describing Product Variants
• How To: Authoring Schema Markup for Product Variants on a Single URL
• How To: Authoring Schema Markup for Product Variants across Distinct URLs

Strategy: Recognizing and Describing Product Variants

A Product Variant is a concept used to describe products that share certain qualities but are distinct from one another. Some examples may include: 

• a specific shoe might be offered in different sizes
• a style of shirt might be offered in different colourways
• a cellphone might be offered with different storage capacity options 

Per Google's documentation, every individual Product Variant requires its own unique URL or URL parameters. There are two common approaches for structuring your site to account for product variants.

Option 1: Single Page with URL Parameters for every variant

In this configuration, all of the variants are described on a single URL where each variant has distinct parameters. The number of parameters you include will generally align with the attributes that vary for each product (e.g. size, color).

Base URL: https://www.shirtcompany.com/long-sleeved-shirt

Small Green Shirt: https://www.shirtcompany.com/long-sleeved-shirt?color=green&size=small

Large Yellow Shirt: https://www.shirtcompany.com/long-sleeved-shirt?color=yellow&size=large

Option 2: Multi Page with a distinct URL for every variant

In this configuration, distinct variants are described on distinct URLs. You can still use URL parameters to call out additional varying attributes, which may help reduce complexity. In this configuration, you will not have a "Base URL" that represents the Product Group. 

Small Green Shirt: https://www.shirtcompany.com/long-sleeved-shirt/green?size=small

Large Yellow Shirt: https://www.shirtcompany.com/long-sleeved-shirt/yellow?size=large

How To: Authoring Schema Markup for Product Variants on a Single URL

This example is based on the first Option: Single Page with URL Parameters for every variant

Step 1: Create a Product Group data item

Add information about the product. Only include information that is relevant to all of the individual variants. Use the variesBy property to define all the possible attributes that vary for the particular ProductGroup. Review Google's documentation on required and recommended properties for more insight on what to include.

Step 2: Create & nest a Product data item

The name of the Product should reflect the name of the unique variant. The URI and URL of the data item should reflect the unique URL parameters. Take the time to include all the information you can about that Product, following Google's required and recommended properties.

Step 3: Repeat Step 2 to create and nest Product data items for all remaining variants

For every unique Product parameter you want to reference, you will create a unique data item to reflect those specific attributes. For example, if a shirt had 3 colourways, in 4 possible sizes, there would be a total of 1 Product Group and 12 individual Product Variants.

How To: Authoring Schema Markup for Product Variants across Distinct URLs 

This example is based on the second Option: Multi Page with a distinct URL for every variant. In this variation, a user can typically click on the variant option (e.g green or yellow) to jump between the distinct URLs.

Step 1: Create a Product Group data item

Add information about the product. Only include information that is relevant to all of the individual variants. Use the variesBy property to define all the possible attributes that vary for the particular ProductGroup. Review Google's documentation on required and recommended properties for more insight on what to include.

Step 2: Create & nest a Product data item

The name of the Product should reflect the name of the unique variant. The URI and URL of the data item should reflect the unique URL parameters. Take the time to include all the information you can about that Product, following Google's required and recommended properties. 

Step 3: Repeat Step 2 for all the remaining sub-variants corresponding to the Distinct URL

There may be additional attributes that don't vary along by distinct URL. For example, a shirt in yellow (https://www.shirtcompany.com/long-sleeved-shirt/yellow) may come in different sizes represented by URL parameters (https://www.shirtcompany.com/long-sleeved-shirt/yellow?size=small). To represent each additional attribute, you will want to create additional Product data items nested under the Product Group. 

Step 4: Repeat Steps 1-3 for all the remaining URL level Variants

For each unique URL representing a unique parameter or attribute, you will want to create a Product Group data item. Within that ProductGroup data item you will add a Product data item that reflects the unique variant on that particular URL. For example, if a shirt had 3 colourways represented across 3 distinct URLs, in 4 different sizes, there would be a total of 3 identical Product Groups for each URL, with 4 unique Products nested under the hasVariant property corresponding to the 4 possible sizes in that colourway.