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?

score 8 · Answer 1 · edited Jan 30 '19 at 05:13

8

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.

edited Jan 30 '19 at 05:13

vhs

9,316
3
66
70

answered Jul 23 '12 at 23:55

Shawn Simister

4,613
1
26
31

1

[`itemid`](http://www.w3.org/TR/2013/NOTE-microdata-20131029/#attr-itemid) "must have a value that is a valid URL". – unor Jan 31 '14 at 13:09
1

@unor relative URLS are valid itemids – Shawn Simister Feb 02 '14 at 05:49
With this method you get 4 products, 2 with name only and another 2 with offer only. Use this tool to test it https://www.google.com/webmasters/markup-tester/ – Fernando Silva Jun 30 '14 at 11:20
Using the newer [Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/), which makes use of the `itemid` attribute, this markup correctly produces 2 Products. – Alf Eaton Mar 19 '15 at 09:15
@ShawnSimister as unor suggested, shouldn't the itemid point to a URL. Whenever i use a numeric value e.g a product SKU then google's Data testing tool shows www.example.com/XXXX . Im confused here how to proceed and what the example.com implies – Raja Khoury Apr 12 '16 at 22:06
The `itemid` property (`@id` in JSON-LD) [is used](https://github.com/schemaorg/schemaorg/wiki/How-to-use-Multi-Typed-Entities-or-MTEs#are-there-other-ways-to-indicate-mtes) to define MTEs (Multi Typed Entities). If your products are not multi-typed you _should be_ using `itemref` as indicated in [this answer](https://stackoverflow.com/a/12409122/712334). – vhs Jan 30 '19 at 05:14

score 8 · Answer 2 · edited Jan 30 '19 at 05:13

8

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.

edited Jan 30 '19 at 05:13

vhs

9,316
3
66
70

answered Sep 13 '12 at 14:55

linclark

896
6
5

According to the [`automotive` example](https://github.com/schemaorg/schemaorg/blob/d366aa26f86d87963e066912b640316ab1f0173b/docs/automotive.html#L573) on schema.org you are more correct. – vhs Jan 30 '19 at 05:10

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

2 Answers2