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

Question

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

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

我遇到的问题是:Google 选取了我的 SRC 值，它只是一个占位符图像 - 实际图像 (data-src) 仅在用户滚动到足以使图像进入 View 时加载。

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 block 内的任何内容。您可以通过将 class="no-js"添加到 HTML 元素，将以下 JavaScript block 添加到 HEAD 来仅在启用 JS 时显示响应图像:

<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
}