Schema.org fornisce un div a itemprop = "immagine"?

Question

Sto sostituendo un'immagine con un <div> con background-image per il motivo di background-size: cover; La pagina è strutturata nello stesso modo di prima con un'immagine solo che "l'immagine" è un div ora.

Ha senso dare che itemprop a <div>?

Answer 1

CSS è non riconosciuto da alcun parser Microdata di cui sono a conoscenza. Avrete bisogno di aggiungere un meta tag per specificare l'immagine in questo modo:

<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

questo è un buon uso per un meta tag all'interno del div contenente per il vostro itemscope.

I due attributi che si desidera in questo meta tag sono itemprop e content

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

È possibile verificare che meta-informazioni è, infatti, leggere bene provandola qui: http://www.google.com/webmasters/tools/richsnippets

Answer 3

Perché non specificare la img nel contenuto e nasconderlo con i CSS, se ha bisogno di essere visto nel DOM, ma manipolato visivamente come background-image? Mantiene le meta tag dal vostro body rendendolo un po 'più tradizionale nei miei occhi, così come mantenere gli utenti funzionalità del browser di default anticipare con le immagini come ad esempio il salvataggio di un'immagine (menu ad albero sulla tasto destro del mouse) e l'evidenziazione del cursore, ecc

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

La risorsa viene scaricata solo una volta poiché è lo stesso percorso URL, senza richieste HTTP aggiuntive.