Điều gì sẽ được lập chỉ mục tốt hơn trong công cụ tìm kiếm: thẻ img hoặc hình nền với thẻ màn hình?

Question

Khi xây dựng trang web đáp ứng, đôi khi tôi sử dụng hình nền để hiển thị hình ảnh thích hợp cho kích thước màn hình thích hợp.

ví dụ:

#image { 
     background-image: url(largeimage.jpg); 
    } 
    @media only screen and (max-width: 320px) { 
     #image { 
      background-image: url(smallimage.jpg); 
     } 
    } 

Để cho trình đọc màn hình biết loại của nguyên tố chúng ta đang đối phó với tôi thêm

role="img" 

Và một

aria-label 

Đây là câu hỏi của tôi:

Tôi đã Tôi biết rằng SEO tốt hơn để thêm hình ảnh giống như logo của công ty vào phần tử hình ảnh thực tế.

ví dụ

<img src="logo-companyname.png"> 

Lý do là biểu tượng sẽ hiển thị khi Google hình ảnh tìm kiếm trên tên công ty. (giả sử trang web được xếp hạng đủ tốt)

Google sẽ "cạo" biểu trưng khi được triển khai dưới dạng div? ví dụ:

<div id="logo-company" role="img" aria-label="company name"></div> 

Hoặc tôi vẫn cần thêm hình ảnh vào đâu đó để nhận kết quả mong muốn? Google có làm gì với các thẻ trình đọc màn hình cho vấn đề đó không?

Answer 1

Sử dụng thẻ img. Nó tốt hơn cho một số lý do.

Khi sử dụng <img />

1. Khi hình ảnh của bạn cần phải được lập chỉ mục của công cụ tìm kiếm
2. Nếu nó có một liên quan đến nội dung không để thiết kế.
3. Nếu hình ảnh của bạn không quá nhỏ (không phải hình ảnh mang tính biểu tượng).
4. Hình ảnh nơi bạn có thể thêm thuộc tính alt và title.

Khi sử dụng CSS background-image

1. hình ảnh thuần túy sử dụng để thiết kế.
2. Không có quan hệ với nội dung.
3. Hình ảnh nhỏ mà chúng tôi có thể phát bằng CSS3.
4. Lặp lại hình ảnh (Trong biểu tượng tác giả blog, biểu tượng ngày sẽ được lặp lại cho mỗi bài viết, v.v.).

Dựa trên danh sách trên và một số quan sát chúng ta có những lý do để sử dụng một thẻ img:

1. Một hình ảnh biểu trưng có ý nghĩa ngữ nghĩa và có liên quan đến nội dung.Vì vậy, đây chỉ là điều đúng đắn để làm từ một quan điểm ngữ nghĩa.
2. Google không tự động lập chỉ mục hình nền, nếu không kết quả tìm kiếm hình ảnh sẽ được lấp đầy bằng hình ảnh sprites. Google đã không chính thức đưa ra tuyên bố về điều này nhưng rất có thể sẽ thêm nhiều giá trị hơn vào div với nhãn aria, mặc dù một hình ảnh có nhiều khả năng sẽ vẫn có nhiều giá trị hơn. (Bing cho là không làm bất cứ điều gì với mặc dù điều này)

Vì vậy: Nó rất có thể là tốt nhất để sử dụng một thẻ img