How to add QuantitativeValue to Product instead of Offer?

Question

I have following structure of my page:

<div id="product" itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Product name</h1>
<!-- ... -->
<table itemprop="offers" itemscope itemtype="http://schema.org/Offer" id="product_description">
<tr><th>Weight:</th><td itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">3.75g</td></tr>
<tr><th>Width:</th><td itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
<tr><th>Height:</th><td itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
<tr><th>Availability:</th><td><link itemprop="availability" href="http://schema.org/InStock"/>available</td></tr>
<!-- ... -->

I would like to have weight, width and height being attached to Product scope instead of Offer.

How I can achieve that?

Answer 1

You could use itemref attributes to add these properties to the Product, but this would still be invalid as they would still apply to the Offer in addition (but these properties are not allowed for this type).

So you have to move them out of Offer’s scope.

There are various ways how to do that. Without seeing the full HTML, it’s not possible to decide which one works or is the best.

If the table wouldn’t contain anything else, you could use:

<table>
  <tr><th>Weight:</th><td itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">3.75g</td></tr>
  <tr><th>Width:</th><td itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
  <tr><th>Height:</th><td itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
  <tr itemprop="offers" itemscope itemtype="http://schema.org/Offer"><th>Availability:</th><td><link itemprop="availability" href="http://schema.org/InStock"/>available</td></tr>
</table>

If you have more rows that should belong to Offer, you could use the tbody element to group these:

<table>
  <tbody>
    <tr><th>Weight:</th><td itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">3.75g</td></tr>
    <tr><th>Width:</th><td itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
    <tr><th>Height:</th><td itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
  </tbody>
  <tbody itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <tr><th>Availability:</th><td><link itemprop="availability" href="http://schema.org/InStock"/>available</td></tr>
  </tbody>
</table>

If the rows are mixed (e.g., the first 3 for Product, then 1 for Offer, then some for Product again), you would have to use itemref and omit the nesting:

<div itemscope itemtype="http://schema.org/Product" itemref="product-weight product-width product-height">
  <h1 itemprop="name">Product name</h1>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="offer-availability">
  </div>

</div>

<!-- not nested under any itemscope -->
<table>
  <tr><th>Weight:</th><td id="product-weight" itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">3.75g</td></tr>
  <tr><th>Width:</th><td id="product-width" itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
  <tr><th>Height:</th><td id="product-height" itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
  <tr><th>Availability:</th><td><link id="offer-availability" itemprop="availability" href="http://schema.org/InStock"/>available</td></tr>
</table>

Answer 2

You must 'shield' the Product itemprop(s) from the Offer by adding an extra wrapping 'itemscope' & assign the itemprop to the Product by use of references on the Product; 'itemref' a list of id(s) and the id(s) on the target tags.

You must also split QuantitativeValue(s) into unitCode & value.

Google provides a testing tool https://developers.google.com/structured-data/testing-tool/

A list of unitCodes can be found here http://wiki.goodrelations-vocabulary.org/Documentation/UN/CEFACT_Common_Codes

<div id="product" itemscope itemtype="http://schema.org/Product" itemref="weight width height">
  <h1 itemprop="name">Product name</h1>

  <table itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <tr>
      <th>Weight:</th>
      <td itemscope>
        <span id="weight" itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">
          <span itemprop="value">3.75</span>
          <abbr itemprop="unitCode" title="grams" content="GRM" >g</abbr>
        </span>
      </td>
    </tr>
    <tr>
      <th>Width:</th>
      <td itemscope>
        <span id="width" itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">
          <span itemprop="value">20</span>
          <abbr itemprop="unitCode" content='MMT' title='millimetres' >mm</abbr>
        </span>

      </td>
    </tr>
    <tr>
      <th>Height:</th>
      <td itemscope>
        <span id="height" itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">
          <span itemprop="value">20</span>
          <abbr itemprop="unitCode" content='MMT' title='millimetres' >mm</abbr>
        </span>
      </td>
    </tr>
    <tr>
      <th>Availability:</th>
      <td><link itemprop="availability" href="http://schema.org/InStock"/>available</td>
    </tr>
     ...
  </table>
</div>