Schema.org dać div a itemprop = "image"?

Question

Zamieniam obraz na <div> z background-image z powodu background-size: cover; Strona jest ustrukturyzowana w taki sam sposób jak poprzednio, z obrazem, który "teraz" jest teraz div.

Czy ma sens nadanie tej pozycji towarowej do <div>?

Answer 1

CSS nie jest rozpoznawany przez żaden analizator składni mikrodanych, o którym wiem. trzeba dodać tag meta, aby określić obraz tak:

<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

jest to dobre wykorzystanie metatagu w obrębie elementu div zawierającego atrybut itemscope.

Obydwa atrybuty, które mają w tym meta tagu są itemprop i content

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

Można sprawdzić, że meta informacje są w rzeczywistości, czytać dobrze sprawdzając je tutaj: http://www.google.com/webmasters/tools/richsnippets

Answer 3

Dlaczego nie określić img w treści i ukryć go z CSS, czy to musi być postrzegane w DOM ale manipulować wizualnie jako background-image? Utrzymuje meta tagów ze swojego body czyni go nieco bardziej tradycyjny w moich oczach, a także zachowaniu użytkowników funkcjonalności domyślną przeglądarkę przewidywać z obrazami takimi jak zapisywania obrazu (drzewo menu na prawe kliknięcie) i kursor podświetlanie itp

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

Zasób jest pobierany tylko raz, ponieważ ma tę samą ścieżkę URL, bez dodatkowych żądań HTTP.