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时才能显示响应式图像，方法是将class =“no-js”添加到HTML元素中，以下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

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

错别字

public List<DashboardDTO> testDate() {

        String sourceDate = "2012-02-29";
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
        Date myDate;

        List<DashboardDTO> list = new ArrayList<>();

        try {
            myDate = format.parse(sourceDate);

            for (int i = 0; i <= 10; i++) {

                DashboardDTO obj = new DashboardDTO();
                obj.setAmount(400);
                obj.setDate(myDate);
                obj.setNumber_of_transactions(33);
                list.add(obj);
            }

        } catch (ParseException e) {
            e.printStackTrace();
        }
        return list;
    }

请注意最后的“ /”

Answer 4

只需将带有真实图像网址的属性 content 添加到您的 img 标签中即可。 Google将使用它，但浏览器将忽略它。

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

我认为这更好，因为您不需要额外的元， noscript 或 JS 代码，只需一个属性。 / p>

经过Google的结构化测试工具（https://search.google.com/structured-data/testing-tool）的测试并尝试过

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

4 个答案: