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

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

我认为解决方案是使用元内容标记，因为它们不会像这样渲染：

<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

只需使用真实图片网址将属性内容添加到您的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）进行测试和尝试