Microdata for Product with Offer with Organization - html

Question

I'm trying to create Google Rich Snippets for my Product page.
I've created a Product using
<div itemscope="" itemtype="http://schema.org/Product">
...
</div>
Inside this product, I have an Offer, created with
<div itemscope="" itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
...
</div>
</div>
I want to add the seller property (an Organization) to the Offer, however, my HTML structure have the seller under the Product and not under the Offer.
<div itemscope="" itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
...
</div>
<div itemprop="seller" itemscope="" itemtype="http://schema.org/Organization">
...
</div>
</div>
However, this doesn't seem to please the Google Structured Data testing tool.
I have then tried with using itemref on the Organization and using a meta-tag in the Offer
<div itemscope="" itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="seller" itemref="provider">
...
</div>
<div id="provider" itemscope="" itemtype="http://schema.org/Organization">
...
</div>
</div>
But it still doesn't seem to recognize the seller as the Organization.
What am I doing wrong?

Answer 1

You are not using itemref correctly:
The itemref attribute has to be specified on an element with itemscope.
It has to reference an element with itemprop.
So your example would have to look like:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="provider">
</div>
<div id="provider" itemprop="seller" itemscope itemtype="http://schema.org/Organization">
</div>
</div>
But this does not work, because this way, the seller property will be added to both items, Product and Offer. This is not valid because Product can’t have the seller property.
So you would either have to change the nesting, or don’t use Product on the container div.
However, there’s also an ugly fix: add a dummy element with itemscope:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="provider">
</div>
<div itemscope>
<div id="provider" itemprop="seller" itemscope itemtype="http://schema.org/Organization">
</div>
</div>
</div>