具有延迟加载图像的结构化数据？

Question

出于 SEO 原因，我想在产品图片上添加结构化数据标签。

<img class="img-responsive" src="placeholder URL" data-src="Actual URL"/>

我运行遇到的问题是：Google 获取我的 SRC 值，它只是一个占位符图像 - 实际图像 (data-src) 仅在用户滚动时加载足以让图像进入视野。

Answer 1

使用 <noscript> 块并将带有结构化数据标签的图片放入其中。 Google 然后将使用该图像而不是图像占位符。这也意味着任何没有启用 JS 的用户（有一些，但他们仍然存在！）也仍然可以看到图像。注意：如果未启用 JS，则需要禁用占位符图像，否则非 JS 用户将看到两个图像。

例如

 <img class="img-responsive js-only" src="placeholder URL" data-src="Actual URL"/>
 <noscript>
 <img src="Actual URL" data-src="Actual URL" itemprop="image"/>
 </noscript>

使用 Google 的结构化数据测试工具验证了此方法 - https://developers.google.com/structured-data/testing-tool/。

编辑：如何只用 JS 显示图片：

您不需要隐藏 noscript 图像 - 只有在禁用 JavaScript 时才会使用 noscript 块内的任何内容。您可以仅在启用 JS 时显示响应图像，方法是将 class="no-js" 添加到 HTML 元素，将以下 JavaScript 块添加到 HEAD：

<script>
    var headElement = document.getElementsByTagName("html")[0]; 
    var regExp = new RegExp('(\s|^)no-js(\s|$)'); 
    headElement.className = headElement.className.replace(regExp,' js ');  
</script>

和以下 CSS：

html.no-js .js-only {
    display:none;
}
html.js .no-js {
    display:none
}

Answer 2

我认为一个解决方案是使用元内容标签，因为它们不会像这样呈现任何内容：

<meta content="/img-1.jpg" itemprop="image">
<meta content="/img-2.jpg" itemprop="image">
<meta content="/img-3.jpg" itemprop="image">

Answer 3

很简单，只需添加：

好错字

<meta  itemprop="image" content="your_image_url" />

注意最后的“/”

Answer 4

只需将属性 content 添加到带有真实图像 url 的 img 标签中。 Google会使用这个，但是浏览器会忽略它。

<img src="placeholder URL" data-src="Actual URL" itemprop="image" content="Actual URL" />

我认为这更好，因为您不需要额外的 meta、noscript 或 JS代码，只有一个属性。

已使用 Google 的结构化测试工具 (https://search.google.com/structured-data/testing-tool) 进行测试和尝试

具有延迟加载图像的结构化数据？

Structured Data with Lazy-Loaded images?

javascript

css

lazy-loading

structured-data