将itemprop属性添加到amp-img创建的img标记

Question

我目前正在创建一个电子商务产品详细页面使用AMP。作为工作的一部分，我希望能够提供有效的structured data for each product来协助搜索引擎优化。

在尝试将itemprop="image"的结构化数据属性添加到使用amp-img呈现的产品英雄图像时，我遇到了一个问题。据我所知，没有办法将自定义属性应用于amp-img最终将呈现的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范式？

Answer 1

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

这样，它将解决SEO错误，并将验证AMP验证器以及。

我以前尝试过使用隐藏的图像元素，它解决了搜索引擎优化问题，但导致AMP验证错误<img src="/imgUrl" alt="/altUrl" itemprop="image" class="hidden" />