出于 SEO 原因，我想在产品图片上添加结构化数据标签。
<img class="img-responsive" src="placeholder URL" data-src="Actual URL"/>
我遇到的问题是：Google 获取了我的 SRC 值，它只是一个占位符图像 - 实际图像（data-src）只有在用户滚动到足以将图像显示出来时才会加载。
【问题讨论】：
标签： javascript css lazy-loading structured-data
使用<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 图像 - noscript 块内的任何内容仅在禁用 JavaScript 时使用。只有在启用 JS 时才能显示响应式图像，方法是在 HTML 元素中添加 class="no-js"，在 HEAD 中添加以下 JavaScript 块：
<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
}
【讨论】：
lazy-image-loaded CSS 类，我的 JS 在加载图像后添加了该类。结构化数据测试工具也看到了真正的懒加载图片源。仍然希望将您的 <noscript> 图像想法实现为一般备份，并用于其他不执行 JS 的搜索引擎，并适应那些禁用 JS 的少数搜索引擎。
只需将属性 content 添加到您的 img 标记中，并使用真实的图像 url。 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) 进行测试和试用
【讨论】：
我认为一个解决方案是使用元内容标签，因为它们不会像这样呈现任何东西：
<meta content="/img-1.jpg" itemprop="image">
<meta content="/img-2.jpg" itemprop="image">
<meta content="/img-3.jpg" itemprop="image">
【讨论】：
很简单，只需添加：
错字不错
<meta itemprop="image" content="your_image_url" />
注意最后的“/”
【讨论】：