How to markup different product sizes with schema.org?

Member

rusty.rosenbaum

by rusty.rosenbaum , in category: SEO , 6 months ago

12 | 0

1 answer

Member

bertha

by bertha , 6 months ago

@rusty.rosenbaum

To markup different product sizes with schema.org, you can use the Product schema and specify the available sizes using the offers property. Here's an example of how you can markup different product sizes:

Start by adding the required schema.org namespace to your HTML's tag:

1	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:product="https://schema.org/Product">

Then, define the product on your page and specify the main details like the name, description, brand, and image. For example:

<div itemscope itemtype="https://schema.org/Product" id="product123">
  <h1 itemprop="name">Product Name</h1>
  <img itemprop="image" src="product-image.jpg" alt="Product Image" />

  <p itemprop="description">Product description goes here.</p>
  
  <div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Brand Name</span>
  </div>
</div>

Next, use the offers property to specify the different available sizes of the product. You can use the AggregateOffer schema to represent a collection of offers with different sizes. For example:

<div itemprop="offers" itemscope itemtype="https://schema.org/AggregateOffer">
  <span itemprop="lowPrice">$10.00</span> - 
  <span itemprop="highPrice">$15.00</span> USD
  
  <link itemprop="availability" href="https://schema.org/InStock" />

  <meta itemprop="offerCount" content="3" />

  <meta itemprop="priceCurrency" content="USD" />

  <span itemprop="itemOffered" itemscope itemtype="https://schema.org/Product">
    <link itemprop="url" href="product123" />
    <span itemprop="name">Product Name</span>

    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
      <link itemprop="url" href="product123-size-s" />
      <meta itemprop="price" content="10.00" />
      <meta itemprop="priceCurrency" content="USD" />
      <meta itemprop="availability" content="https://schema.org/InStock" />
      <span itemprop="description">Small</span>
    </div>
    
    <!-- Define other available sizes here in the same way -->
    
  </span>
</div>

Repeat Step 3 for each available size, defining a separate
You can repeat the entire structure defined in Steps 2-4 for other products on the page, providing unique IDs for each product and its variations.

Remember to replace the example values (e.g., product names, prices, image URLs) with your actual product data. The examples above assume the usage of Microdata. If you're using JSON-LD or RDFa, the structure will vary slightly, but the same principles apply.

0 | 0

How to markup a floating price product in schema.org?

How to implement schema.org markup for a breadcrumb?

What is the best schema.org markup for a video platform?

How to remove schema.org microdata markup in woocommerce?

How can I embed schema.org markup in svg?

How to markup different product sizes with schema.org?

1 answer

Related Threads: