图片元素上的itemprop = url属性无法验证

时间:2018-09-03 12:35:30

标签: html image url schema.org microdata

我有下面的代码,如果我在https://search.google.com/structured-data/testing-tool上对其进行测试,则会收到错误消息

  

需要url字段的值。

在图像元素上。

我尝试将itemprop='url'属性放在picturesourceimg元素上,但错误仍然相同。如何添加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>

1 个答案:

答案 0 :(得分:2)

请参阅微数据规范(工作草案)中的Values部分:

  • 在将itemprop属性添加到imgsource元素时,Microdata使用src属性的值。

  • itemprop属性添加到picture元素时,Microdata使用该元素的textContent。

在您的情况下,您可能需要向src元素添加img属性(除了alt属性之外,HTML还是必需的),然后移动从itemprop(需要source属性的srcsetimg

<img itemprop="url" src="/images/venues/medium/220_663_studio-54.jpg" data-src="/images/venues/medium/220_663_studio-54.jpg" alt="" />

如果您想要保留这样的属性(例如,用于延迟加载),则可以使用link元素提供图片的网址(浏览器不会加载该图片):

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