Attributo ALT: come sfruttarlo per ottimizzare le immagini per la SEO

Alt è un attributo utilizzato nel linguaggio HTML per aggiungere informazioni testuali alle immagini presenti in una pagina web. Alt sta per alternative text, ossia testo alternativo all’immagine.

Che cos’è l’attributo alt e a cosa serve

Inizio con una precisazione. Spesso può capitare di incontrare la dicitura tag alt, anziché attributo alt. La versione corretta è attributo alt.

Alt è infatti l’attributo del tag HTML img (usato per le immagini), ma non è un tag HTML. Il fatto che sia piuttosto frequente la definizione di “tag alt” non è una ragione sufficiente per continuare a favorire l’utilizzo di una terminologia errata.

L’attributo alt serve a indicare un testo alternativo per descrivere il contenuto, lo scopo di un’immagine inserita in una pagina web.

Nonostante l’importanza dell’attributo alt per le immagini, molti autori e creatori di contenuti continuino a non utilizzare alcun testo descrittivo per le immagini presenti in una pagina web. Spesso per pigrizia o per le fretta di pubblicare un articolo, trascurano di inserire informazioni che possono essere molto utili per descrivere il contenuto di un’immagine. Informazioni che sono utili sia per i motori di ricerca, sia per le persone impossibilitate a vedere le immagini inserite all’interno di una pagina web. L’attributo alt è dunque molto importante sia in ottica SEO, sia per quanto riguarda l’accessibilità dei tuoi contenuti.

Il testo alternativo inserito per le varie immagini può contribuire a migliorare la rilevanza della pagina web per un determinato tema e inoltre permette di acquisire maggior traffico anche da Google Immagini. Immagini ben ottimizzate hanno infatti maggiori probabilità di posizionarsi ai primi posti nella ricerca immagini di Google.

Oltre agli aspetti SEO, il testo riportato nell’attributo alt è visualizzato qualora il browser non sia in grado di visualizzare le immagini, ad esempio quando il browser blocca il caricamento delle stesse, oppure quando il file dell’immagine non è disponibile. Senza alt si vedrebbero degli spazi vuoti, mentre l’impiego di questo attributo permette di mostrare delle parole per far capire il contenuto di quell’immagine.

Non è necessario compilare l’attributo alt per ogni immagine

Non tutte le immagini presenti all’interno di una pagina web richiedono di inserire del testo descrittivo. In una pagina di un sito possono infatti essere presenti anche immagini che hanno uno scopo puramente decorativo.

In questi casi la raccomandazione è quella di lasciare vuoto l’attributo alt, in questo modo:

alt=""

Del resto, non avrebbe molto senso scrivere attributi alt come “Pallino rosso”, “Riga di separazione nera”, o cose del genere.

Viceversa, per i grafici e le fotografie che sono significative, è consigliato investire del tempo per scrivere del testo descrittivo, che spieghi il contenuto di quelle immagini.

Che testo inserire nell’attributo alt

Se un’immagine fa parte del layout del sito, non rappresenta quindi un contenuto vero e proprio, lasciare pure vuoto l’attributo alt.

Se l’immagine è utilizzata come elemento di navigazione, alt dovrebbe contenere lo stesso testo che è presente nell’immagine, in modo da rendere chiaro cosa succede una volta che viene cliccata.

Se è utilizzata come link dovrebbe contenere il titolo della pagina che stiamo linkando.

Se l’immagine contiene del testo, è indicato inserirlo come testo alternativo, ricordandosi di non esagerare con la lunghezza.

Evita di inserire parole superflue come ad esempio “Immagine che raffigura …”, “Foto con …”. Il motore di ricerca sa che si tratta di un’immagine e non è necessario specificarlo.
Anche gli screen reader, usati da persone ipovedenti o non vedenti, non hanno bisogno di queste informazioni superflue.

Anche se l’attributo alt è utile in ottica SEO non devi utilizzarlo per inserire una serie di parole chiave a caso, sperando di migliorare la rilevanza del contenuto agli occhi dei motori di ricerca. Non fare quindi keyword stuffing, ossia inserire parole chiave come se non ci fosse un domani.

Ricorda che questo attributo serve per descrivere il contenuto dell’immagine, evita quindi di usarlo per inserire testi che sono già presenti in altre sezioni della pagina.

Ti segnalo inoltre uno strumento messo a disposizione dal World Wide Web Consortium e molto utile soprattutto in tema di accessibilità dei contenuti presenti in una pagina Web. Si tratta dell’ALT Decision Tree, una sorta di questionario che ti aiuta a decidere come e se utilizzare l’alt per un’immagine.

Esempi di utilizzo dell’attributo alt per le immagini

Nel caso di icone, come quelle per la mail, il telefono, l’indirizzo è consigliabile usare l’attributo alt per esplicitare lo scopo di quell’immagine. Ad esempio:

<img src="phone.png" alt="Telefono"> …
<img src="email.png" alt="Email"> …
<img src="stampa.png" alt="Stampa questa pagina"> …

Se inserisci un grafico, è una buona idea quella di indicare nell’attributo alt le informazioni salienti rappresentate nel grafico. Non dimenticare però che anche la didascalia e il testo che precede e segue quel grafico possono aiutare a comprendere il senso.

Però anziché inserire qualcosa del genere:

<img src="grafico.png" alt="grafico01">

È preferibile optare per una soluzione di questo tipo:

<img src="grafico.png" alt="Grafico a barre che mostra gli andamenti di traffico del sito da gennaio a dicembre suddivisi per sorgente.">

Come inserire l’attributo alt su WordPress

Su WordPress, se utilizzi l’editor a blocchi Gutenberg, inserire il testo per l’attributo alt in un’immagine è molto semplice.

Inserendo un’immagine con l’apposito blocco, nella barra laterale è presente un’area di testo che ti permette di scrivere quello che desideri venga utilizzato per l’attributo alt.

Anche accendendo alla sezione Media di un sito WordPress, quella nella quale puoi trovare tutte le immagini caricate sul tuo sito, hai la possibilità di intervenire.

Qui, cliccando sull’immagine che desideri modificare, è sufficiente inserire il testo all’interno del campo chiamato “Testo alternativo”. Questo è il campo che andrà a popolare l’attributo alt di quell’immagine.

Verificare la presenza del testo alternativo nelle pagine del tuo sito

Se utilizzi un tool come Screaming Frog, un software che permette di effettuare il crawling, ossia la scansione, di tutte le pagine di un sito web, è piuttosto facile trovare tutte le immagini sprovviste dell’attributo alt.

Puoi anche utilizzare un tool online come Wave per inserire l’url della pagina web che vuoi verificare e visualizzare il report che ti permette di individuare facilmente le immagini che non utilizzano alcun testo alternativo.

Poi c’è ovviamente il metodo manuale, che consiste nell’ispezionare il codice html sorgente della pagina web. Non è certamente il modo più pratico e veloce per controllare molte pagine, ma per un controllo rapido di una pagina web, va più che bene.

…e l’attributo title?

Il tag HTML usato per le immagini, prevede anche l’attributo title, che è facoltativo.

Spesso gli attributi alt e title vengono trattati, erroneamente, alla stessa maniera. Senza porre particolare distinzione tra uno e l’altro. In pratica, alcune persone duplicano il testo utilizzato per l’alt anche per il title. Evita di fare questo errore.

L’attributo title innanzitutto, non deve essere considerato un rimpiazzo dell’attributo alt.

Alcuni browser sfruttano il testo eventualmente contenuto nell’attributo title per mostrare un tooltip (una sorta di fumetto) che appare quando si passa con il puntatore del mouse sopra l’immagine.

Come ho detto, l’attributo title è facoltativo e suggerisco di non perdere tempo a compilare anche questo attributo.

Anche per quanto riguarda il title, attenzione a non far confusione tra attributo title e tag title, perché si tratta di due cose diverse. Il tag title infatti non ha nulla a che vedere con le immagini, ma è il tag HTML che indica il titolo del documento, come ad esempio il titolo di una pagina web.

Ottimizzazione SEO e attributo alt

Come spesso capita quando si parla di SEO, è un attimo che consigli e best practice diventino ossessioni per alcune persone. Spinte dalla naturale ambizione di migliorare il posizionamento del proprio sito sulle pagine dei motori di ricerca, investono una gran quantità di tempo per andare a riempire gli attributi alt di tutte le immagini del sito.

Il mio suggerimento è quello di ottimizzare gli attributi alt soprattutto per le pagine più importanti del tuo sito. Poi prendi la buona abitudine di sfruttare questo attributo per tutti i nuovi contenuti che andrai a creare da ora in avanti. Evita però di sprecare eccessivo tempo andando alla ricerca di tutte le immagini del tuo sito alle quali manca questo attributo.

L’ottimizzazione SEO è fatta da tante piccole gocce, tante azioni che insieme concorrono alla creazione di un contenuto ben posizionato e rilevante agli occhi dei motori di ricerca. L’attributo alt è una di queste gocce.