html5 - Schema.org da un div a itemprop="imagen"?

css3 semantic-web

Question

Estoy reemplazando una imagen con una <div> con background-image de background-image por la razón del background-size: cover; 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 darle esa extensión a un <div> ?

Answer 1

¿Por qué no especificar el img en el contenido y ocultarlo con CSS si es necesario verlo en el DOM pero manipularlo visualmente como una background-image ? Mantiene las etiquetas meta fuera de su body haciéndolo un poco más tradicional a mis ojos, así como también conservando la funcionalidad predeterminada del navegador que los usuarios anticipan con imágenes como guardar una imagen (árbol de menú al hacer clic con el botón 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 URL, no hay solicitudes HTTP adicionales.

Answer 2

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

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

Answer 3

este es un buen uso para una etiqueta meta dentro del div que contiene para tu 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 metainformación, de hecho, se puede leer bien probándola aquí: http://www.google.com/webmasters/tools/richsnippets