Schema.org дает div элемент itemprop = "image"?

Ответ 1

CSS не распознается никаким анализатором Microdata, о котором я знаю. Вам нужно добавить метатег, чтобы указать изображение следующим образом:

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

Ответ 2

это полезно для метатега в содержащем div для вашего предмета.

Два атрибута, которые вы хотите в этом метатеге: itemprop и content

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

Вы можете убедиться, что метаинформация на самом деле читается просто, протестировав ее здесь: http://www.google.com/webmasters/tools/richsnippets

Ответ 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-запросов.