Schema.org cung cấp cho div một itemprop = "hình ảnh"?

Question

Tôi đang thay thế hình ảnh bằng <div> bằng background-image vì lý do background-size: cover; Trang được cấu trúc giống như trước đây với hình ảnh chỉ là "hình ảnh" bây giờ là div.

Có ý nghĩa khi đưa itemprop đó đến <div> không?

Answer 1

CSS không được nhận dạng bởi bất kỳ trình phân tích cú pháp Microdata nào mà tôi biết. Bạn sẽ cần phải thêm một thẻ meta để xác định hình ảnh như thế này:

<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

đây là cách sử dụng tốt cho thẻ meta trong div chứa cho itemscope của bạn.

Hai thuộc tính mà bạn muốn ở chỗ thẻ meta là itemprop và content

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

Bạn có thể xác minh rằng thông tin meta được, trên thực tế, đọc tốt bằng cách kiểm tra nó ở đây: http://www.google.com/webmasters/tools/richsnippets

Answer 3

Tại sao không xác định img trong nội dung và giấu nó với CSS nếu nó cần phải được nhìn thấy trong DOM nhưng thao tác trực quan như một background-image? Giữ các thẻ meta ra khỏi số body của bạn làm cho nó hơi truyền thống hơn trong mắt cũng như giữ lại chức năng trình duyệt mặc định mà người dùng dự đoán với hình ảnh như lưu hình ảnh (cây menu khi nhấp chuột phải) và tô sáng con trỏ, v.v.

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

Tài nguyên chỉ được tải xuống một lần vì đó là cùng một đường dẫn URL, không có yêu cầu HTTP bổ sung nào.