2

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.

|improve this question
2

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

|improve this answer
  • yes, I omitted the full urls to keep the sample short, but the two name attributes are correct: one is the review name, the other the product name. I looked at itemref but it would force me to put #ids for stuff that don't need it. I will accept this as answer if nothing else comes, thanks. – riffraff Nov 24 '13 at 14:51
  • @riffraff: re. the two names: but this is, of course, not what you express in your markup. You say: this review (not the product the review is about) has two names. – unor Nov 24 '13 at 15:58
  • well, yes, that is what the issues is about: what is the microdata markup to express that one name belongs to the review and the other belongs to the product, if such exists? – riffraff Nov 24 '13 at 16:30
  • @riffraff: That is not possible without changing the nesting (i.e., moving the element to the correct item type) resp. without removing the itemprop attribute and adding a meta element to the correct item type. Every child ìtemprop automatically belongs to its nearest ancestor, no matter what. – unor Nov 24 '13 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.