1

我目前正在使用 AMP 创建电子商务产品详细信息页面。作为工作的一部分，我希望能够为每个产品提供有效的结构化数据以协助 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 范式？

4

1 回答 1

0

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

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

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

于 2021-02-09T18:21:53.943 回答