Question

我正在使用<div>替换带有background-image的图片，因为background-size: cover;页面的结构与之前的图像相同，只是“图像”是div现在。

将itemprop赋予<div>？

是否有意义

Answer 1

我所知道的任何微数据解析器都无法识别CSS。您需要添加元标记以指定图像：

<div itemscope itemtype="http://schema.org/Article">
  <meta itemprop="image" content="bg.jpg"></meta>
  <div style="background-image:url('bg.jpg')"></div>
</div>

Answer 2

这对于itemcope的包含div中的元标记很有用。

您要在该元标记中使用的两个属性是itemprop和content

<meta itemprop="image" content="/some/url/to/an/image.gif" />

您可以通过在此处测试来验证元信息是否正常阅读：http://www.google.com/webmasters/tools/richsnippets

Answer 3

为什么不在内容中指定img并使用CSS隐藏它，如果它需要在DOM中看到但是在视觉上被操纵为background-image？将meta代码保留在body之外，使其在我眼中更加传统，同时保留用户预期的默认浏览器功能，例如保存图像（右键单击菜单树）和光标突出等等。

<div itemscope itemtype="http://schema.org/Article">

    <style scoped>
    /* I only use scoped to avoid excess classing in this demo.
       Read: http://caniuse.com/#feat=style-scoped */
      figure
      { position: relative;
        background-size: cover;
        background-position: center center }

      figure > img[itemprop=image]
      { opacity: 0;
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100% }

      .specific-image
      { background-image: url(/path-to/image.jpg);
        width: 300px; height: 150px }
    </style>

    <figure class="specific-image">
        <img itemprop="image" src="/path-to/image.jpg" width="150" height="150" alt="image">
    </figure>

</div>

资源只下载一次，因为它是相同的URL路径，没有额外的HTTP请求。

Schema.org给div一个itemprop =“image”？

3 个答案: