Co będzie indeksowane lepiej w wyszukiwarkach: znaczniki img lub obrazy tła z znacznikami screenreadera?

Question

Podczas tworzenia responsywnych stron internetowych czasami używam obrazów tła do renderowania odpowiedniego obrazu dla odpowiedniego rozmiaru ekranu.

np:

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

Aby pozwolić czytniki ekranu wiedzieć, jaki rodzaj elementu mamy do czynienia z dodam

role="img" 

i

aria-label 

Oto moje pytanie:

Mam Dowiedziałem się, że lepiej jest, aby SEO dodawało obraz taki jak logo firmy do faktycznego elementu graficznego.

np

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

Rozumowanie to, że logo pojawi się, gdy Google obraz wyszukaniu nazwy firmy. (zakładając, że strona jest wystarczająco dobrze wyceniona)

Czy Google będzie nadal "skrobać" logo po wprowadzeniu jako div? np.

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

Czy nadal muszę dodać jakiś obraz, aby uzyskać pożądany efekt? Czy Google robi cokolwiek ze znacznikami czytnika ekranu?

Answer 1

Użyj znacznika img. Jest to lepsze z wielu powodów.

Kiedy używać <img />

1. Przy obrazie musi być indeksowane przez wyszukiwarki
2. Jeśli ma stosunek do treści nie zaprojektować.
3. Jeśli obraz nie jest zbyt mały (nie są to ikony obrazowe).
4. Obrazy, w których można dodać atrybuty alt i title.

Kiedy używać CSS background-image

1. obrazy wykorzystywane wyłącznie do projektu.
2. Brak powiązania z zawartością.
3. Małe obrazy, które możemy odtwarzać za pomocą CSS3.
4. Powtarzanie obrazów (w ikonie autora bloga ikona daty będzie powtarzana dla każdego artykułu itp.).

Na podstawie powyższej listy, a niektóre obserwacje mamy te powody do korzystania z img tag:

1. obraz logo ma znaczenie semantyczne i ma związek z treścią.Tak więc jest to słuszne z semantycznego punktu widzenia.
2. Google nie automatycznie indeksuje obrazów tła, w przeciwnym razie wyniki wyszukiwania obrazów byłyby wypełnione obrazkami. Google oficjalnie nie wypowiedział się na ten temat, ale najprawdopodobniej doda więcej wartości do div z etykietą arii, chociaż obraz najprawdopodobniej nadal będzie miał większą wartość. (Bing rzekomo nic nie robi z tym chociaż)

więc: To najprawdopodobniej najlepiej użyć img tag