schema.org with data scattered over page

Question

I would like to add schema.org markup to a product page. So basically all of the page is wrapped in a: <div itemscope itemtype="http://schema.org/Product">

The page shows the name of the product which I mark with itemprop="name", it shows an image which I mark with itemprop="image" etc.

In order to markup the price and the category of the item, I use http://schema.org/Offer. The problem is that price and category are displayed in different parts of the webpage. Is it OK to use itemtype=http://schema.org/Offer twice as in the following example?

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Name of product</span>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="category">animals</span>
</div>

<img itemprop="image" src="#"/>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price">1000 EUR</span>
</div>
</div>

unor unor · Accepted Answer · 2013-09-27T22:02:55

Don’t use http://schema.org/Offer twice. You are creating two offers that way.

The solution proposed by user1769790 may work for you, but note that the image will be associated with both, the Product and the Offer (which may or may not be what you want).

You could use the itemref attribute instead. See my answer on a similar question on Webmasters SE.

It could look like:

<div itemscope itemtype="http://schema.org/Product" itemref="foobar-image">

  <span itemprop="name">Name of product</span>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="foobar-price">
    <span itemprop="category">animals</span>
  </div>

</div>

<img itemprop="image" id="foobar-image" src="" alt="" />

<div itemprop="price" id="foobar-price">1000 EUR</div>

schema.org with data scattered over page

2 Answers