Микроданные с вложенными продуктами и обзорами

Question

Микроданные с вложенными продуктами и обзорами

У меня есть несколько обзоров списков HTML с использованием HTML, например:

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

Проблема здесь в том, что название продукта на самом деле вложено в обзор, и его невозможно отличить от названия обзора (которое также называется "имя").

Есть ли способ решить эту проблему, кроме полного изменения структуры HTML? Например, в составленном синтаксисе что-то вроде: itemprop="Product:name" или добавление itemref="../" ?

Я полагаю, что могу продублировать название продукта в теге <meta> но это кажется далеко не идеальным.

РЕДАКТИРОВАТЬ: Я уточнил пример HTML.

2

html microdata

Author: dan, 2013-11-24

Source

1 answers

score 2 · Accepted Answer

Вы можете использовать itemref атрибут:

дайте элементу с itemprop="name" (в обзоре) id
обратитесь к этому значению id в Product через атрибут itemref

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

Хотя название продукта теперь добавлено к товару Product, оба названия (для обзора и продукта) по-прежнему добавляются в Review. Это не то, чего мы хотим.

Красивых решений этой проблемы не существует (в идеале вы бы реструктурировали свой разметка).

Одним из решений является создание манекена 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>

Теперь название продукта больше не добавляется в обзор, но теперь ваша страница содержит дополнительный товар (без типа, потому что не указано itemtype). Действительный, но несколько уродливый.

(Примечание: я заменил a на p, потому что вы не должны указывать свойство name в a: именем будет URL-адрес, а не текст привязки.)