У меня есть код ниже, если я протестирую его на https://search.google.com/structured-data/testing-tool, я получаю сообщение об ошибке
A value for the
url
field is required.
на элементе изображения.
Я попытался разместить атрибут itemprop='url'
в элементах picture
, source
и img
, но ошибка осталась прежней. Как я могу добавить свойство url
, чтобы Google принимал структурированные данные?
<li itemscope itemtype='http://schema.org/LocalBusiness'>
<div>
<div itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<a href = "http://www.example.com/venues/220/studio-54">
<picture>
<source itemprop='url' type='image/webp' data-srcset='/images/venues/medium/220_663_studio-54.webp'>
<img data-src = "/images/venues/medium/220_663_studio-54.jpg"/>
</picture>
</a>
</div>
<div>
<h3><a href='http://www.example.com/venues/220/studio-54'>
<span itemprop = "name">Studio-54</span></a></h3>
<div itemprop='address' itemscope itemtype='http://schema.org/PostalAddress'>
<a itemprop='addressLocality' href = "http://www.example.com/vendors/venues/c/netherlands/north-holland/amsterdam">Amsterdam</a>, <span itemprop='addressRegion'>North-Holland</span>
</div>
</div>
</div>
</li>
См. Раздел Значения в спецификации микроданных (рабочий проект):
При добавлении атрибута itemprop
к элементу img
или source
Microdata использует значение атрибута src
.
При добавлении атрибута itemprop
к элементу picture
Microdata использует textContent элемента.
В вашем случае вы можете добавить атрибут src
к элементу img
(который в любом случае требуется для HTML в дополнение к атрибуту alt
) и переместить itemprop
из source
(для которого требуется атрибут srcset
) в img
:
<img itemprop = "url" src = "/images/venues/medium/220_663_studio-54.jpg" data-src = "/images/venues/medium/220_663_studio-54.jpg" alt = "" />
Если вы хотите сохранить такие атрибуты (например, для отложенной загрузки), вы можете использовать элемент link
для предоставления URL-адреса изображения (браузеры не загружают это):
<div itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<a href='http://www.example.com/venues/220/studio-54'>
<picture>
<source type='image/webp' data-srcset='/images/venues/medium/220_663_studio-54.webp'>
<img data-src='/images/venues/medium/220_663_studio-54.jpg' />
</picture>
</a>
<link itemprop='url' href='/images/venues/medium/220_663_studio-54.webp' />
</div>
@Flo: Я добавил альтернативу своему ответу. Если вы не можете использовать link
, то да, вы должны либо прекратить использование отложенной загрузки, либо согласиться с тем, что ваши структурированные данные могут быть прочитаны только потребителями микроданных, которые выполняют JavaScript.
Спасибо, что указали мне правильное направление! Причина, по которой у меня нет атрибута
src
на изображении, заключается в том, что я использую отложенную загрузку для повышения производительности страницы, и этот атрибут добавляется и заполняется, когда элемент изображения попадает в область просмотра браузера. С вашим предложенным решением мне кажется, что я должен отказаться от ленивой загрузки, что резко снизит производительность моей страницы. Верно ли мое предположение?