Question

我目前正在使用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范例？

Answer 1

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

通过这种方式，它将解决 SEO 错误并在 AMP 验证器上进行验证。

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

将itemprop属性添加到amp-img

1 个答案: