Schema.org dar a un div un itemprop = "imagen"?

Estoy reemplazando una imagen con un <div> con background-image por la razón de background-size: cover; La página está estructurada de la misma manera que antes con una imagen solo que "la imagen" es un div ahora.

¿Tiene sentido dar ese itemprop a un <div>?

Author: Yang Li, 2013-08-08
Source

3 answers

CSS no es reconocido por ningún analizador de microdatos que yo sepa. Necesitarás agregar una meta etiqueta para especificar la imagen de esta manera: 

<div itemscope itemtype="http://schema.org/Article">
  <meta itemprop="image" content="bg.jpg"></meta>
  <div style="background-image:url('bg.jpg')"></div>
</div>
 45
Author: Shawn Simister,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-18 19:09:20

Este es un buen uso para una etiqueta meta dentro del div que contiene para su itemscope.

Los dos atributos que desea en esa etiqueta meta son itemprop y content 

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

Puede verificar que la meta información es, de hecho, leída bien probándola aquí: http://www.google.com/webmasters/tools/richsnippets

 9
Author: Kristian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-11 16:47:09

¿Por qué no especificar el img en el contenido y ocultarlo con CSS si necesita ser visto en el DOM pero manipulado visualmente como un background-image? Mantiene las etiquetas meta fuera de su body haciéndolo un poco más tradicional en mis ojos, así como manteniendo la funcionalidad predeterminada del navegador que los usuarios anticipan con imágenes como guardar una imagen (árbol de menús al hacer clic derecho) y resaltar el cursor, etc.

<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>

El recurso solo se descarga una vez, ya que es la misma ruta de URL, sin HTTP adicional peticiones.

 0
Author: darcher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-08 17:14:39