html - Schema.org 给一个 div 一个 itemprop="image"？

Question

我用 a 替换图像，<div>原因background-image是background-size: cover;页面的结构与以前的图像相同，只是“图像”现在是一个 div。

将 itemprop 赋予 a 是否有意义<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

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

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

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

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

Answer 3

img如果它需要在 DOM 中看到但在视觉上被操纵为 ，为什么不在内容中指定并用 CSS 隐藏它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 请求。