Cosa verrà meglio indicizzato nei motori di ricerca: tag img o background-images con tag screen reader?

Question

Quando realizzo siti Web reattivi, a volte utilizzo immagini di sfondo per rendere un'immagine appropriata per le dimensioni dello schermo appropriate.

ad esempio:

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

per informare i lettori di schermo sanno che tipo di elemento abbiamo a che fare con l'aggiungo

role="img" 

E un

aria-label 

Ecco la mia domanda:

Ho un Ho sempre appreso che è meglio per il SEO aggiungere un'immagine come un logo aziendale in un elemento dell'immagine reale.

esempio

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

il ragionamento è che il logo verrà visualizzato quando l'immagine di Google la ricerca sul nome della società. (presumendo che il sito Web sia classificato abbastanza bene)

Google continuerà a "graffiare" il logo quando implementato come div? ad esempio

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

O ho ancora bisogno di aggiungere un'immagine da qualche parte per ottenere il risultato desiderato? Google fa qualcosa con i tag dello screen reader?

Answer 1

Utilizzare un tag img. È meglio per una serie di motivi.

Quando utilizzare <img />

1. quando l'immagine deve essere indicizzati dal motore di ricerca
2. Se si ha una relazione ai contenuti non progettare.
3. Se l'immagine non è troppo piccola (non immagini iconiche).
4. Immagini in cui è possibile aggiungere l'attributo alt e title.

Quando usare i CSS background-image

1. immagini utilizzate esclusivamente per Design.
2. Nessuna relazione con il contenuto.
3. Piccole immagini che possiamo utilizzare con i CSS3.
4. Ripetizione delle immagini (Nell'icona dell'autore del blog, l'icona della data verrà ripetuta per ciascun articolo ecc.).

Sulla base della lista di cui sopra e alcune osservazioni abbiamo questi motivi per utilizzare un img tag:

1. Un immagine del logo ha un significato semantico e ha relazione ai contenuti.Quindi questa è solo la cosa giusta da fare da un punto di vista semantico.
2. Google non indicizza automaticamente le immagini di sfondo, altrimenti i risultati della ricerca di immagini verrebbero riempiti con sprite di immagini. Google non ha rilasciato ufficialmente una dichiarazione al riguardo, ma molto probabilmente aggiungerà più valore al div con un'etichetta di aria, anche se un'immagine probabilmente avrà ancora più valore. (Bing presumibilmente non fa nulla con questo, però)

Quindi: E 'più probabile meglio usare un tag img