Itemprop = свойство url в элементе изображения не проверяется

У меня есть код ниже, если я протестирую его на 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>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
868
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

См. Раздел Значения в спецификации микроданных (рабочий проект):

  • При добавлении атрибута 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>

Спасибо, что указали мне правильное направление! Причина, по которой у меня нет атрибута src на изображении, заключается в том, что я использую отложенную загрузку для повышения производительности страницы, и этот атрибут добавляется и заполняется, когда элемент изображения попадает в область просмотра браузера. С вашим предложенным решением мне кажется, что я должен отказаться от ленивой загрузки, что резко снизит производительность моей страницы. Верно ли мое предположение?

Flo 04.09.2018 00:32

@Flo: Я добавил альтернативу своему ответу. Если вы не можете использовать link, то да, вы должны либо прекратить использование отложенной загрузки, либо согласиться с тем, что ваши структурированные данные могут быть прочитаны только потребителями микроданных, которые выполняют JavaScript.

unor 04.09.2018 04:49

Другие вопросы по теме