How to markup different product sizes with schema.org?

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

How to markup different product sizes with schema.org?

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

1 answer

Member

by bertha , 8 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:

  1. 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">


  1. Then, define the product on your page and specify the main details like the name, description, brand, and image. For example:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>


  1. 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:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>


  1. Repeat Step 3 for each available size, defining a separate
  2. 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.