Microdata ItemID to identify elements scattered throughout an HTML doc/HTML tables

Question

My developer coded a list of Products using HTML Tables. The code came out something like this:

<table>
<tr  class="name">
<td>Product Name #1</td><td>Product Name #2</td><td>Product Name #3</td>
</tr>
<tr class="price">
<td>Product Price #1</td><td>Product Price #2</td><td>Product Price #3</td>
</tr>
<tr class="brand">
<td>Product Brand #1</td><td>Product Brand #2</td><td>Product Brand #3</td>
</tr>
</table>

You get the idea. Visually it looks perfect, but when attempting to markup via schema.org, I'm running into issues, being that the products properties don't exist is neat nested HTML elements, but are spread across the table. Would there be a way to use the ItemID Microdata attribute to make sure each brand and price is associated with the right product name?

Something like:

<tr class="name">
<td itemscope itemtype="http://www.schema.org/Product" itemID="Product1">Product Name #1</td>
<td itemscope itemtype="http://www.scema.org/Product" itemID="Product2">Product Name #2</td>

Etc., etc. Any thoughts? Will I have the re-code the pages to make this work?

Answer 1

Actually, itemid would not be the correct way to do this. Unlike RDF, the microdata parsing model doesn't join things that have the same itemid.

Instead, you should use the itemref attribute.

For example:

<div itemscope itemtype="http://schema.org/Product" itemref="foo"></div>
<div id="foo" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">Product Price #1</span>
</div>

You can test microdata using https://webmaster.yandex.com/tools/microtest/ in addition to Google.

Answer 2

Yes, itemid is the right way to do this. Your example would look something like this:

<table>
  <tr class="name">
    <td itemscope itemtype="http://www.schema.org/Product" itemid="Product1">
      <span itemprop="name">Product Name #1</span>
    </td>
    <td itemscope itemtype="http://www.schema.org/Product" itemid="Product2">
      <span itemprop="name">Product Name #2</span>
    </td>
  </tr>
  <tr class="price">
    <td itemscope itemtype="http://www.schema.org/Product" itemid="Product1">
      <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price">Product Price #1</span>
      </div>
    </td>
    <td itemscope itemtype="http://www.schema.org/Product" itemid="Product2">
      <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price">Product Price #2</span>
      </div>
    </td>
  </tr>
</table>

By re-using the same itemid you're telling the microdata parser that you're talking about the same item in different parts of the page.