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

Question

出于SEO原因,我想在Product-Images上放入结构化数据标签.

<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时才能通过向HTML元素添加class ="no-js"来显示响应式图像,以下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

只需将属性内容与真实图像 url添加到您的img标签即可。谷歌会使用它，但浏览器会忽略它。

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

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

使用 Google 的结构化测试工具进行了测试和尝试（https://search.google.com/structed-data/testing-tool）