Gli sprite CSS sono dannosi per il SEO?

18

Oggigiorno spesso ciò che è stato realizzato con un <img>tag viene ora eseguito con qualcosa di simile <div>a un set di immagini di sfondo CSS che utilizza uno "sprite" CSS e un offset.

Mi chiedevo che tipo di effetto ha sulla SEO, dal momento che perdiamo l' altattributo (che è indicizzato da Google), e siamo bloccati con l'attributo "titolo" (che a mio avviso non è indicizzato).

Questo è uno svantaggio significativo?

seo css

— UpTheCreek
fonte

25

Gli sprite CSS dovrebbero essere usati solo per elementi decorativi per questo motivo - usare <img>per elementi specifici di una pagina e usare gli sprite per elementi decorativi che non sono contestualmente rilevanti per il contenuto presentato.

Se hai bisogno di un'immagine pulsante per i tuoi elementi di navigazione, ha molto più senso aggiungere quell'immagine come sfondo sul collegamento di navigazione piuttosto che come markup in questo modo:

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

(vale a dire ovunque il contenuto dell'immagine sia ridondante al contenuto del testo sulla pagina o il contenuto dell'immagine possa essere meglio descritto come "decorazione")

Come ulteriore vantaggio di separare gli elementi del modello di sito come sprite, in seguito sarai in grado di cambiare la "skin" del sito modificando il foglio di stile invece di sovrascrivere i vecchi file di immagini di design o riscrivere tutto il markup HTML.

— danlefree
fonte

Sono d'accordo con i tuoi punti e aggiungerei che uno degli scopi / vantaggi principali degli sprite è la loro maggiore velocità di carico per le prestazioni complessive del sito. Il caricamento di una pagina più veloce È SUPPORTATO per aiutare con le classifiche SEO, quindi penso che sia una questione dello strumento giusto per il lavoro giusto.

— digit1001,

@ digit1001 - i bot come googlebot caricano davvero tutte le risorse associate a una pagina?

— UpTheCreek

4

Puoi usare i <img>tag con gli sprite CSS:

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png potrebbe essere un pixel trasparente 1x1 compresso a <50 byte.

Stile:

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

In questo modo ottieni l'ottimizzazione delle prestazioni dagli sprite e mantieni i tuoi alttag.

— JohnnyFaldo
fonte

Sono abbastanza sicuro che se Google può comporre un motore di ricerca con processi complessi per classificare e indicizzare 30 trilioni di pagine, è in grado di rilevare asserzioni alt 1x1 pixel.

— Ricky Boyce,

1

@Ricky B Non è se lo rileveranno, ma se ti penalizzano in modo bizzarro per questo, il che sarebbe strano in quanto ti penalizzerebbero per ridurre il tempo di caricamento della pagina e il numero di richieste, il che è qualcosa che tendono a incoraggiare: )

— JohnnyFaldo,

1

Il alttag è sopravvalutato. Penso che troppe persone facciano di tutto per assicurarsi di avere alttag sulle loro pagine. Non credo che ti faccia male non averne uno. È solo una questione di assicurarsi che se si dispone di un img, è altassegnato un tag ad esso.

Credo che il tempo di caricamento e le prestazioni del sito abbiano un impatto maggiore sulla SEO in generale rispetto ai alttag e per ogni richiesta di immagine o richiesta HTTP, il sito rallenterà. Lo scopo di uno sprite CSS è di aiutare a ridurre al minimo tali richieste e ad accelerare il tempo di caricamento della pagina.

— Pulsanti Brandon
fonte

5

Il alttesto viene utilizzato anche dagli screen reader. Penso che potresti avere un'opinione diversa del testo alternativo se fossi cieco.

— MikeTheLiar,

1

Tendo a usare gli sprite per le icone decorative, non hanno nulla a che fare con la pagina nel suo insieme, quindi per SEO va bene in quel caso. Qualsiasi set di immagini che hai tutte le stesse dimensioni che non contribuiscono al significato della pagina sono buoni candidati per gli sprite CSS.

— Agile Noob
fonte