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

Question

我想在产品图片上放置结构化数据标签，以便搜索引擎优化。

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

我遇到的问题是：谷歌拿起我的SRC值只是一个占位符图像 - 实际图像（数据-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> 

验证使用谷歌的结构化数据测试工具，这种做法 - https://developers.google.com/structured-data/testing-tool/。

编辑：如何显示的图像只有JS：

你并不需要隐藏无脚本的图像 - 无脚本块里的任何东西只是用来当JavaScript被禁用。您可以显示响应的图像，只有当JS通过添加类=“无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 
}