5

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

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

我遇到的问题是：Google 获取我的 SRC 值，它只是一个占位符图像 - 实际图像（data-src）仅在用户滚动到足以使图像进入视图时加载。

4

4 回答 4

10

使用<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 时使用。您可以通过将 class="no-js" 添加到 HTML 元素，仅在启用 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
}
于 2015-12-04T13:46:41.283 回答
4

只需使用真实的图像 url 将属性内容添加到您的img标签。谷歌会使用它，但浏览器会忽略它。

<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 )进行测试和尝试

于 2019-03-12T10:10:40.953 回答
0

这很简单，只需添加以下内容：

好错别字

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

注意最后的“/”

于 2019-02-01T08:16:59.913 回答
0

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

<meta content="/img-1.jpg" itemprop="image">
<meta content="/img-2.jpg" itemprop="image">
<meta content="/img-3.jpg" itemprop="image">
于 2019-01-24T16:43:24.503 回答