Differenze e vantaggi nell'uso di Alt e Title nel tag img

Giorgio Borelli

Il web ha subito diverse trasformazioni e ad oggi le pagine html sono diventate molto più "veloci", dinamiche ed accattivanti graficamente; uso massivo di javscript e librerie client come JQuery, codice server side super ottimizzato e così via. L'usabilità e l'efficacia dell'informazione proposta però non può prescindere dai sempre importanti e basilari tag html e dai loro attributi, se usati correttamente aumentano notevolmente l'esperienza di navigazione e l'informazione fornita, siano essi utenti umani che spider dei motori di ricerca.

Uno dei tag più usati ed importante è sicuramente il tag img, in particolare desidero porrè l'attenzione sugli attributi alt text e title image di questo tag, sono entrambi fondamentali e a differenza di quello che può pensare qualcuno non sono equivalenti e vanno usati entrambi, andiamo a scoprire più da vicino le differenze tra alt e title nel tag img.

 

Attributo alt

L'attributo alt viene usato per descrivere l'immagine in modo testuale, il suo nome esteso infatti è alternate text, ovvero testo alternativo, detto testo viene caricato dalla pagina prima che venga presentata l'immagine vera e propria, questo è il comportamento normale  sulla maggioranza dei browser, altri sistemi, come i browser per sistemi brail o browser puramente testuali come Lynx, visualizzano direttamente il testo presente nell'attributo alt.

Alt nasce con questo scopo specifico, ed a differenza di title che può essere usato in molti altri tag html, alt viene specificato solo nel tag img che per l'appunto ne descrive in maniera testuale l'informazione che essa porta con se, e bene sapere inoltre che il contenuto testuale specificato in alt viene letto dagli spider dei motori di ricerca che lo considerano contenuto aggiuntivo e direi di qualità della totalità della pagina, ottenendone così benefici non solo nei risultati di ricerca classica, ma anche in quello per immagini, che spesso porta più visitatori di quel che si pensi.

 

Attributo title

L'attributo title nasce e viene usato per fornire informazioni aggiuntive all'elemento html per il quale viene specificato, come: link, img, table, row ed altri ancora. Solitamente il contenuto inserito in title è conciso e potrebbe contenere anche delle keywords, se utili all'informazione della pagina. Così come per alt anche il contenuto di title viene letto dai crawler dei motori come contenuto della pagina stessa, con tutti i benefici relativi all'aspetto SEO che ciò comporta.

Il tag title, utile per fornire informazioni ulteriori nei tag html, viene visualizzato come un piccolo popup, chiamato tooltip, che si visualizza quando ci si sofferma col mouse sopra l'elemento html nel quale è stato specificato.

 

Benefici e vantaggi nell'uso di alt e title

Quindi per una immagine possiamo specificare sia l'attributo alt che title, abbiamo visto che sono due cose differenti, hanno scopi differenti ed entrambi apportano benefici all'informazione data non solo dall'immagine nella quale vengono specificate ma anche a tutta la pagina in generale, riassumendo possiamo dire che l'uso di alt e title apporta i seguenti benefici:

  • - Consente a visitatori con disabilità di poter ottenere informazioni sull'immagine e sulla pagina che diversamente gli sarebbero precluse;
  • - Incrementa il contenuto presente nella pagina, fornendo di conseguenza maggiori informazioni ed una esperienza di navigazione migliore agli utenti;
  • - Allo stesso modo detti contenuti vengono letti dagli spider dei motori di ricerca, con benefici sulle SERP (risultati sulle pagine dei motori di ricerca).

 

Ovviamente l'uso di ogni mezzo deve essere fatto con equilibrio e senza forzature, riempire i title di keywords non ha senso e si otterebbe solamente una influenza negativa a livello SEO, così come usare descrizioni nell'alt text eccessive o non corrispondenti all'immagine porterebbe alla lunga inevitabilmente ad una penalizazzione.

Chiunque volesse chiedere o aggiungere qualcosa sull'importanza, l'uso, differenze e vantaggi degli attributi alt e title nel tag img, può farlo liberamente tramite i commenti, ogni contributo sarà molto gradito e contribuirà ad una crescita comune.

Categorie: html

Tags: ,

Commenti (4) -

Ciao,
scusa l'OT, ma non sapevo dove scriverti. Volevo chiederti una cosa su questo vecchio articolo: www.informaticando.net/.../...alcuni-siti-web.aspx

Come posso impostare l'accesso esclusivo ad un sito come questo: www.pippo.it/pluto ? purtroppo nelle impostazioni avanzate del proxy se uso la / non mi mantiene l'indirizzo

grazie e scusa ancora
ciao
Matteo

Rispondi

Ciao Matteo,
devi scrivere proprio nell'articolo attinente che hai linkato, così come hai lasciato il commento qui lo lasci là, una volta fatto sarò lieto di risponderti.
Mi spiace ma ad argomento i suoi commenti.

Rispondi

Io nelle mie immagini, nell'attributo ALT metto lo stretto necessario, di solito una o due parole, mentre in TITLE descrivo in modo esplicito l'immagine attinente al contesto della pagina.

Questo metodo permette agli spider di indicizzare l'immagine e evita allo spider di leggere 2 volte la stessa cosa (perché molti webmaster scrivono la stessa cosa in entrambi gli attributi).

Rispondi

Concordo con quanto dici Alberto,
che poi è quello che viene descritto nell'articolo, soltanto che io nell'alt delle immagini non adopero una regola o convenzione fissa, del tipo una o due parole come tu dici.
Io nell'alt dell'immagine metto la descrizione testuale di quella che è l'immagine, se servono due, tre o quattro parole, userò quelle che servono (ovviamente cerco di essere conciso), non m'impongo dei limiti poiché l'alt (alternate text) è proprio questo: il testo che descrive l'informazione contenuta dall'immagine, ed a mio avviso non può essere soggetta ad un limite di due parole.
Per il Title (attributo comune anche ad altri tag html), vale sempre la regola d'inserire un'informazione aggiuntiva a quella dell'alt e concordo col fatto che debba essere differenziata dall'alt.

Grazie per il tuo intervento, ciao e alla prossima, Giorgio.

Rispondi

Aggiungi Commento

biuquote
  • Commento
  • Anteprima
Loading