: Microdata with nested product and reviews I have some HTML listing reviews with HTML like: <div itemscope itemtype="http://schema.org/Product"> <img class="product-thumbnail" itemprop="image"

@Ogunnowo487

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

Vote Up Vote Down