Microdata with nested product and reviews

Question

I have some HTML listing reviews with HTML like:

<div itemscope itemtype="http://schema.org/Product">
   <img class="product-thumbnail" itemprop="image" src=...>
   <div itemscope itemprop="review" itemtype="http://schema.org/Review">
     <!-- we want this to be the Review name -->
     <h4 itemprop="name">Loved it</h4>
     ...... 
     <!-- we want this to be the Product name -->
     on <a href="/product" itemprop="name">Cool Product</a>
   </div>      
</div>

The problem here is that the product name is actually nested inside the review, and there is no way to distinguish it from the review title (which is also named "name").

Is there a way to solve this other than changing the HTML structure completely? For example, in made up syntax something like: itemprop="Product:name"or adding itemref="../" ?

I believe I can duplicate the product name in a <meta> tag but that seems less than ideal.

EDIT: I clarified the HTML example.

Answer 1

You can use the itemref attribute:

• give the element with itemprop="name" (in Review) an id
• refer to this id value in the Product via the itemref attribute

<div itemscope itemtype="http://schema.org/Product" itemref="the-product">
   <img itemprop="image" src="image.png" />
   <div itemprop="review" itemscope  itemtype="http://schema.org/Review">

     <h4 itemprop="name">Loved it</h4>

     <p itemprop="name" id="the-product">Cool Product</p>

   </div>      
</div>

While the product name is now added to the Product item, both names (for the review and the product) are still added to the Review. This is not what we want.

There are no beautiful solutions to this problem (ideally you would restructure your markup).

One solution is to create a dummy itemscope:

<div itemscope itemtype="http://schema.org/Product" itemref="the-product">
   <img itemprop="image" src="image.png" />
   <div itemprop="review" itemscope  itemtype="http://schema.org/Review">

     <h4 itemprop="name">Loved it</h4>

     <div itemscope>
       <p itemprop="name" id="the-product">Cool Product</p>
     </div>

   </div>      
</div>

Now the product name is no longer added to the review, but now your page contains an additional item (without a type, because no itemtype is specified). Valid, but somewhat ugly.

(Side note: I replaced a with p, because you shouldn’t specify the name property on a: the name would be the URL, not the anchor text.)