Ask Question Sign In Sign Up

How to markup different product sizes with schema.org?

Member

by rusty.rosenbaum , in category: SEO , a year ago

How to markup different product sizes with schema.org?

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

1 answer

Member

by bertha , a year 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.

Related Threads:

How to markup different product sizes with schema.org?
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?