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

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

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

我遇到的问题是：Google获取我的SRC值，它只是一个占位符图像-只有当用户滚动到足以将图像显示在视图中时，才会加载实际图像（数据SRC）。

使用

块，将带有结构化数据标记的图像放在其中。谷歌将使用该图像而不是图像占位符。这也意味着任何未启用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>

---

我认为一个解决方案是使用元内容标记，因为它们不会呈现任何类似的内容：

<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" />

---

注意最后的“/”

只需将属性content添加到带有真实图像url的img标记中即可。谷歌会使用这个，但浏览器会忽略它

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

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

---

使用谷歌的结构化测试工具（）进行了测试和尝试。

谢谢安迪！我想知道，如果我在页面加载中隐藏图片，用户是否仍然会看到“抖动”。我已经对答案添加了一个响应，因为代码格式在注释中不起作用。这是一个漂亮、整洁、苗条的解决方案！好主意，尽管现在是2019年，谷歌似乎看到了延迟加载图像上的URL。我可以在搜索控制台（“URL检查中的爬网页面”）中验证它是否执行了我的JavaScript以使用真实的SRC更新图像，甚至在加载图像后添加了我的JS添加的

惰性图像加载

CSS类。结构化数据测试工具也看到了真正的延迟加载图像源。仍然希望将您的

图像想法作为一个通用备份，并用于其他不执行JS的搜索引擎，以适应少数禁用JS的搜索引擎。那么srcset呢？还是总是链接图片的最大版本？我不确定谷歌是否使用srcset进行结构化数据或搜索引擎优化。我个人不会担心srcset，但最大的图像可能是谷歌最有价值的，就像你说的。

<meta  itemprop="image" content="your_image_url" />

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