时间戳

首页 > 解决方案 > 当图像实际上是图片标签时，如何为图像定义微数据标记？

html - 当图像实际上是图片标签时，如何为图像定义微数据标记？

问题描述

在http://schema.org/Product范围内，我想为图像定义标记。通常它看起来如下：

<img itemprop="image" src="/path-to-image.suffix" alt="image-description" />

但是，现代响应式页面使用该<picture>标签。我试过了...

<picture itemprop="image">
    <source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
    <source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
    <img src="/fallback-path-to-image.suffix" alt="image-description">
</picture>

但它似乎不被谷歌的结构化数据测试工具所接受。将它添加到<img>标签中<picture>对我来说似乎不正确，因为它没有突出整个上下文，因此忽略了图像以各种分辨率存在的事实......

标签的正确微数据图像标记是picture什么？

标签： htmlimageschema.orgmicrodatapicture-element

解决方案

如果你想要一个 URL 值

您必须在元素上指定itemprop属性img，而不是在picture元素上：

<picture>
  <source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
  <source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
  <img itemprop="image" src="/fallback-path-to-image.suffix" alt="image-description">
</picture>

href原因是因为如果 Microdata 属性应该有一个 URL 作为值，即所有具有orsrc属性的元素，则只能使用某些元素。

如果你想要一个ImageObject值

您必须在元素上指定contentUrl属性：img

<picture itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  <source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
  <source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
  <img itemprop="contentUrl" src="/fallback-path-to-image.suffix" alt="image-description">
</picture>

也允许itemprop在source元素（而不是img元素）上指定，但它需要有一个属性。src

推荐阅读