CODEWITHSUNDEEP
microdataschema.org
user1583209
user1583209

Reputation: 1717

schema.org with data scattered over page

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>

Upvotes: 4

Views: 1331

Answers (2)

unor
unor

Reputation: 96737

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>

Upvotes: 5

user1769790
user1769790

Reputation: 1343

Check if this answered your Question.

http://www.google.com/webmasters/tools/richsnippets?q=uploaded:8004e75474f6bc632c2a56ed33ba1d90

Enclose Product on the entire page. img is common for both product and offer. the solution considers image url for each category (Offer).

<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>


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

       <span itemprop="price">1000 EUR</span>
    </div>
</div>

I can help; if you can add more details of your page.

Upvotes: 0

Related Questions