Marking HTML with microdata when there are multiple products per page

Question

I have a page that compares 4 products at a time in parallel tabular form , i.e. it mentions the functions of each of them one by one. Here is a sample page .

I want to tag these features so that search engines become easier to interpret. However, in all of the examples below , you must specify all product features at a time in a div. This causes a problem for my case when I mention the features of the product.

A typical example, as indicated, is as follows: -

<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span> </div> 

However, I would like it to be like this: -

 <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blend-O-Matic</span> // Item 1 </div> <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blend-O-Matic2</span> // Item 2 </div> 

The following are: -

  <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">$19.95</span> // Item 1 </div> <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">$21.95</span> // Item 2 </div> 

So, in a nutshell, is there a way that I can mark an element with some code and then use it to denote other details of this element?

Please comment if I'm unclear, asking my doubts!

Answer 1

Use itemref :

 <div itemscope itemtype="http://schema.org/Offer" itemref="item1_price"> <span itemprop="name">Blend-O-Matic</span> </div> <div id="item1_price"> <span itemprop="price">$19.95</span> </div> 

See the results of the Google Structured Data Testing Tool here

Answer 2

Maybe you should take a look at this for SERP. It shows how to have multiple products in an "ItemList"

http://scottgale.com/schema-org-markup-serp/2013/03/17/

Hth

PS: This works without errors or problems in the Google Structured Data testing tool at http://www.google.com/webmasters/tools/richsnippets

Answer 3

But))) To be more realistic - do you always have a WebPage data item? Therefore, if you have it, we have about it:

 <div itemscope="" itemtype="http://schema.org/WebPage"> <div itemscope itemtype="http://schema.org/Offer" itemref="item1_price"> <span itemprop="name">Blend-O-Matic</span> </div> <div id="item1_price"> <span itemprop="price">$19.95</span> </div> </div> 

See the result of Google. And we have an error. If we add the same itemscope = "itemtype =" http://schema.org/Offer ", we will have one complete offer and one duplicate with a price. Code:

 <div itemscope="" itemtype="http://schema.org/WebPage"> <div itemscope="" itemtype="http://schema.org/Offer" itemref="item1_price"> <span itemprop="name">Blend-O-Matic</span> </div> <div itemscope="" itemtype="http://schema.org/Offer"> <span id="item1_price" itemprop="price">$19.95</span> </div> </div> 

google result

So, we need another way, as I understand it, right?