图片元素上的 itemprop=url 属性 未验证
itemprop=url property on picture element not validating
我有下面的代码,如果我在 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>
请参阅微数据规范(工作草案)中的 Values 部分:
将 itemprop
属性添加到 img
或 source
元素时,Microdata 使用 src
属性的值。
将 itemprop
属性添加到 picture
元素时,Microdata 使用元素的 textContent。
在您的情况下,您可能希望向 img
元素添加一个 src
属性(除了 alt
之外,HTML 无论如何都需要它属性),并将 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>
我有下面的代码,如果我在 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>
请参阅微数据规范(工作草案)中的 Values 部分:
将
itemprop
属性添加到img
或source
元素时,Microdata 使用src
属性的值。将
itemprop
属性添加到picture
元素时,Microdata 使用元素的 textContent。
在您的情况下,您可能希望向 img
元素添加一个 src
属性(除了 alt
之外,HTML 无论如何都需要它属性),并将 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>