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

Posted 2023-03-12

【中文标题】具有延迟加载图像的结构化数据？

【英文标题】：Structured Data with Lazy-Loaded images?

【发布时间】：2016-02-05 23:49:44

【问题描述】：

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

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

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

【参考方案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 图像 - 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
 

【讨论】：

谢谢安迪！我想知道如果我在页面加载中隐藏

我已经添加了对答案的响应，因为代码格式在 cmets 中不起作用。

漂亮、整洁、纤薄的解决方案！

好主意，虽然现在是 2019 年，但 Google 似乎看到了延迟加载图像上的 URL。我可以在 Search Console（URL 检查中的“已抓取页面”）中验证它是否执行了我的 JavaScript 以使用真实的 SRC 更新图像，甚至添加了一个 lazy-image-loaded CSS 类，我的 JS 在加载图像后添加了该类。结构化数据测试工具也看到了真正的懒加载图片源。仍然希望将您的 <noscript> 图像想法实现为一般备份，并用于其他不执行 JS 的搜索引擎，并适应那些禁用 JS 的少数搜索引擎。

【参考方案2】：

只需将属性 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) 进行测试和试用

【讨论】：

那么 srcset 呢？还是总是链接图片的最大版本？

我不确定 Google 是否将 srcset 用于结构化数据或 SEO。我个人不会担心 srcset，但正如您所说，最大的图像可能对 Google 最有价值。

【参考方案3】：

我认为一个解决方案是使用元内容标签，因为它们不会像这样呈现任何东西：

<meta content="/img-1.jpg" itemprop="image">
<meta content="/img-2.jpg" itemprop="image">
<meta content="/img-3.jpg" itemprop="image">

【参考方案4】：

很简单，只需添加：

错字不错

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

注意最后的“/”