将 itemprop 属性添加到 amp-img 创建的 img 标签答案

【问题标题】：Add itemprop attribute to img tag created by amp-img将 itemprop 属性添加到 amp-img 创建的 img 标签
【发布时间】：2021-02-10 04:08:43
【问题描述】：

我目前正在使用 AMP 创建电子商务产品详细信息页面。作为工作的一部分，我希望能够提供有效的structured data for each product 来协助进行 SEO。

我在尝试将itemprop="image" 的结构化数据属性添加到使用amp-img 呈现的产品主图片时遇到了问题。据我所知，无法将自定义属性应用于img 最终呈现的amp-img 标记。

我现有的标记：

<amp-img on="tap:hero-zoom-lightbox" src="--REDACTED--" [src]="productState.currentHeroImg" width="260" height="260" layout="responsive"
class="hero-carousel-image" role="button" tabindex="0" itemprop="image"></amp-img>

渲染的内容：

<amp-img itemprop="image" tabindex="0" role="button" class="hero-carousel-image amp-carousel-slide i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" layout="responsive" height="260" width="260" data-amp-bind-src="productState.currentHeroImg" i-amphtml-binding="" src="--REDACTED--" on="tap:hero-zoom-lightbox" i-amphtml-layout="responsive" aria-hidden="false">
    <i-amphtml-sizer style="padding-top: 100%;"></i-amphtml-sizer>
    <img decoding="async" src="--REDACTED--" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>

我在寻找什么（itemprop="image" 属性位于 img 标签本身）：

<amp-img tabindex="0" role="button" class="hero-carousel-image amp-carousel-slide i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" layout="responsive" height="260" width="260" data-amp-bind-src="productState.currentHeroImg" i-amphtml-binding="" src="--REDACTED--" on="tap:hero-zoom-lightbox" i-amphtml-layout="responsive" aria-hidden="false">
    <i-amphtml-sizer style="padding-top: 100%;"></i-amphtml-sizer>
    <img itemprop="image" decoding="async" src="--REDACTED--" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>

有没有人知道这是否可行？如果不是，那么为什么实施这种行为会破坏 AMP 范式？

【问题讨论】：

如果没有解决方案：解决方法是添加link 元素，并在链接上指定itemprop 而不是(amp-)img。
@unor 很有帮助的建议，谢谢！
@pstricker 为什么需要在img 标签上而不是amp-img 标签上使用它？链接上的itemprop="image" 与amp-img 上的不一样吗？它们都是带有img 标签的容器。
@TrevorGeene 这是一个很好的问题，但我没有很好的答案。通过 Google 的结构化数据测试工具在 amp-img 元素上运行带有 itemprop="image" 属性的标记，无法识别图像属性。相反，在 link 元素上使用 itemprop="image" 会被识别。我还没有找到任何明确的文档说明为什么link 与任何其他任意元素相反，但我仍在研究。
@pstricker 虽然我使用了 Google 的测试工具，但我想我忽略了 itemprop="image" 缺失的事实（我什至刚刚确认了这一点）。

标签： amp-html microdata amp-img

【解决方案1】：

我通过在周围的anchor tag 中添加itemprop="image" 解决了这个问题

这样，它将解决 SEO 错误并在 AMP 验证器上进行验证。

我之前尝试使用隐藏的图像元素解决了 SEO 问题，但导致 AMP 验证错误<img src="/imgUrl" alt="/altUrl" itemprop="image" class="hidden" />

【讨论】：