Il tag alt, più correttamente chiamato attributo alt, è il testo alternativo associato a un’immagine HTML. Serve a comunicare l’informazione o la funzione dell’immagine quando questa non può essere percepita visivamente e fornisce anche ai motori di ricerca un contesto utile per comprenderla.
La parte importante, però, è un’altra: non tutte le immagini richiedono lo stesso tipo di alt text. Una fotografia informativa, un’icona che funziona come pulsante, un grafico e un elemento puramente decorativo svolgono ruoli diversi. Di conseguenza, anche il loro testo alternativo deve essere diverso.
In alcuni casi la scelta corretta è addirittura un attributo vuoto: alt="".
Capire questa distinzione permette di scrivere testi alternativi realmente utili, evitando sia descrizioni inutili sia il vecchio approccio che considera l’alt semplicemente uno spazio in cui inserire una keyword SEO.
Cos’è davvero il tag alt: attributo alt, alt text e testo alternativo
Nel linguaggio comune si parla spesso di tag alt, alt tag, alt text o testo alternativo. Si riferiscono quasi sempre allo stesso concetto, ma dal punto di vista tecnico “tag alt” non è la definizione più precisa.
La distinzione diventa ancora più chiara se parti dal significato di tag: in HTML il termine indica un marcatore della sintassi, mentre alt è un attributo associato all’elemento <img>.
alt è infatti un attributo dell’elemento HTML <img>.
Un’immagine può essere inserita in una pagina in questo modo:
<img src="tre-cime-lavaredo.jpg"
alt="Sentiero tra le Tre Cime di Lavaredo al tramonto">
L’elemento HTML è <img>, mentre:
alt="Sentiero tra le Tre Cime di Lavaredo al tramonto"
è l’attributo alt con il relativo testo alternativo.
La distinzione può sembrare formale, ma aiuta a capire una cosa essenziale: l’alt non è un’etichetta SEO separata dall’immagine. Fa parte del markup che descrive il ruolo e il contenuto di quell’immagine nel contesto della pagina.
Come funziona l’attributo alt nell’HTML
Il testo contenuto nell’attributo alt non viene normalmente visualizzato accanto all’immagine come una didascalia.
Entra in gioco soprattutto quando il contenuto visivo deve essere sostituito da un’alternativa testuale: per esempio con tecnologie assistive o quando l’immagine non può essere caricata correttamente.
Immagina una pagina dedicata a un itinerario sulle Dolomiti.
Se una fotografia mostra chiaramente un sentiero sotto le Tre Cime e quella fotografia aggiunge informazioni utili al testo, un alt come:
alt="Sentiero tra le Tre Cime di Lavaredo al tramonto"
fornisce un’informazione concreta.
Questo invece è troppo generico:
alt="Montagna"
E questo aggiunge rumore senza spiegare meglio l’immagine:
alt="Foto immagine montagna Dolomiti montagna Italia vacanze Dolomiti"
Il punto non è inserire più parole possibili. È trasmettere ciò che dell’immagine conta in quel preciso contesto.
Alt, title, didascalia e nome file: le differenze
Alt text, attributo title, didascalia e nome del file non sono intercambiabili.
| Elemento | Funzione principale | Normalmente visibile? |
|---|---|---|
| Alt text | alternativa testuale dell’immagine | No |
| Didascalia | aggiunge informazioni visibili accanto all’immagine | Sì |
| Title dell’immagine | informazione supplementare, con supporto variabile nei browser e dispositivi | Non sempre |
| Nome file | identifica il file e può fornire un leggero contesto semantico | Normalmente no |
Una didascalia può, per esempio, spiegare:
Vista delle Tre Cime dal sentiero 101 durante il tramonto.
L’alt potrebbe invece essere:
alt="Tre Cime di Lavaredo viste dal sentiero 101"
Non è necessario duplicare parola per parola tutte le informazioni già presenti intorno all’immagine.
Anche il nome file può essere descrittivo:
tre-cime-lavaredo-sentiero-101.jpg
È preferibile a un nome come:
IMG_5837.jpg
ma un buon nome file non sostituisce l’alt text.
A cosa serve l’alt text: accessibilità, contesto e Google Immagini
Il testo alternativo ha due funzioni che spesso vengono mescolate: rendere comprensibile il contenuto visivo quando l’immagine non è disponibile all’utente e aiutare i sistemi automatici a comprenderne soggetto e relazione con la pagina.
L’accessibilità viene prima del tentativo di “ottimizzare una keyword”.
La Web Accessibility Initiative del W3C raccomanda infatti di scegliere l’alternativa testuale in base allo scopo dell’immagine nel contesto, distinguendo immagini informative, decorative, funzionali e complesse.
Questo cambia completamente il modo di ragionare sull’alt.
Cosa succede quando un’immagine non può essere vista
Per una persona che vede normalmente la pagina, una fotografia, un grafico o un’icona possono comunicare informazioni immediatamente.
Quando quell’informazione visiva non è disponibile, il testo alternativo deve permettere di recuperare ciò che è realmente necessario.
Prendiamo un’immagine di prodotto in una scheda ecommerce.
Un alt come:
alt="Sneaker uomo modello X in pelle bianca con suola nera"
può essere utile perché descrive caratteristiche che il visitatore vedrebbe nell’immagine.
Scrivere:
alt="Immagine"
non aggiunge praticamente nulla.
All’estremo opposto, non serve trasformare l’alt in un paragrafo che descrive ogni ombra, riflesso e dettaglio dello sfondo quando tali elementi non hanno alcuna importanza.
L’alt efficace non descrive necessariamente tutto ciò che è visibile: comunica ciò che dell’immagine serve a comprendere il contenuto.
Come Google usa alt text, contenuto della pagina e computer vision
Un’altra idea da superare è che Google possa comprendere un’immagine esclusivamente attraverso l’attributo alt.
La documentazione di Google Search Central sulla SEO delle immagini spiega che Google utilizza l’alt text insieme agli algoritmi di computer vision e al contenuto della pagina per comprendere il soggetto di un’immagine.
Contano quindi anche il testo circostante, il contesto della pagina, le didascalie e altri segnali.
Questo non rende l’alt irrilevante. Significa piuttosto che l’ottimizzazione delle immagini è un sistema, non la semplice presenza di una keyword dentro un attributo HTML.
Se vuoi approfondire anche dimensioni, compressione, nomi dei file e prestazioni, trovi una guida specifica sulla SEO delle immagini in WordPress.
Quando scrivere un alt text e quando usare alt=""
La domanda più utile non è “quale keyword devo inserire nel tag alt?”, ma:
che funzione svolge questa immagine nella pagina?
Il decision tree del W3C per l’attributo alt parte proprio da questo principio.
Da qui possiamo distinguere quattro situazioni principali.
Immagini informative: descrivere l’informazione essenziale
Un’immagine è informativa quando comunica qualcosa che contribuisce realmente alla comprensione della pagina.
Può essere:
- una fotografia di un prodotto;
- uno screenshot necessario a seguire una procedura;
- l’immagine di un luogo descritto nel testo;
- un diagramma semplice;
- un’illustrazione che aggiunge un’informazione non già disponibile.
In questi casi l’alt dovrebbe comunicare l’elemento significativo dell’immagine.
Per esempio, se in un tutorial WordPress uno screenshot mostra dove trovare l’impostazione dei permalink:
alt="Impostazioni Permalink nella dashboard di WordPress"
è più utile di:
alt="Screenshot WordPress"
Il primo aiuta a capire cosa bisogna cercare. Il secondo dice soltanto che esiste uno screenshot.
Qui emerge anche l’importanza del contesto. La stessa fotografia può richiedere testi alternativi differenti se viene utilizzata per comunicare informazioni differenti.
Immagini decorative: perché l’alt vuoto è corretto
Non tutte le immagini aggiungono informazione.
Una texture, un separatore grafico, una decorazione astratta o un’immagine già completamente descritta dal testo vicino possono essere presenti soltanto per ragioni estetiche.
In questo caso aggiungere una descrizione può peggiorare l’esperienza di chi utilizza uno screen reader, perché introduce informazioni prive di utilità.
La soluzione corretta è spesso:
<img src="elemento-decorativo.png" alt="">
C’è una differenza importante tra alt vuoto e alt mancante.
Questo:
alt=""
comunica che l’immagine non deve fornire un’alternativa testuale.
Questo invece:
<img src="elemento-decorativo.png">
non contiene affatto l’attributo.
Per le immagini decorative non conviene quindi “dimenticare” il campo: bisogna deliberatamente indicare un alt vuoto quando è questa la soluzione appropriata.
Immagini funzionali e link: descrivere l’azione o la destinazione
Un’immagine funzionale non serve principalmente a mostrare qualcosa: serve a fare qualcosa.
È il caso di:
- un’icona di ricerca usata come pulsante;
- un’immagine che porta al carrello;
- un logo che costituisce da solo il link alla homepage;
- un’icona utilizzata per scaricare un documento.
In questa situazione descrivere l’aspetto dell’icona può essere meno utile che descriverne la funzione.
Se una lente di ingrandimento è un pulsante per avviare una ricerca, il testo alternativo dovrebbe comunicare l’azione, per esempio:
alt="Cerca"
non:
alt="Lente di ingrandimento"
Se invece la stessa lente è soltanto decorativa accanto alla parola “Cerca”, potrebbe non aver bisogno di ripetere un’informazione già presente.
Questa distinzione evita una delle debolezze più frequenti dei testi alternativi generati meccanicamente: descrivere l’oggetto senza capire che cosa fa.
Grafici e immagini complesse: quando l’alt da solo non basta
Un grafico può contenere serie di dati, confronti, tendenze e relazioni che non possono essere trasferiti correttamente in poche parole.
Provare a inserire tutto nell’attributo alt produce un testo difficile da usare e, spesso, incompleto.
Per un grafico è più sensato utilizzare un alt breve che identifichi il contenuto:
alt="Andamento mensile del traffico organico"
e fornire nel testo della pagina i dati o le conclusioni essenziali rappresentate dal grafico.
Lo stesso principio vale per diagrammi complessi, infografiche dense e altre immagini che contengono molte informazioni.
L’alt orienta. La descrizione estesa rende disponibile il contenuto.
Come scrivere un buon testo alternativo
Non esiste una formula universale capace di produrre automaticamente l’alt perfetto per qualsiasi immagine.
Il criterio migliore è molto più semplice:
descrivi l’informazione o la funzione che andrebbe persa se l’immagine non fosse disponibile.
Questo approccio evita sia descrizioni generiche sia testi costruiti unicamente per i motori di ricerca.
Cosa includere in base all’immagine e al contesto
Prima di scrivere un alt text, prova a rispondere a queste domande:
- L’immagine aggiunge davvero un’informazione?
- Quale parte dell’immagine conta per comprendere il paragrafo?
- L’immagine svolge una funzione?
- Le stesse informazioni sono già disponibili nel testo vicino?
- È un’immagine complessa che richiede una spiegazione più lunga?
Consideriamo la fotografia di una persona davanti a un computer.
In un articolo generico sul lavoro da remoto:
alt="Persona che lavora al computer da casa"
potrebbe essere sufficiente.
Ma se l’articolo sta spiegando una particolare postura ergonomica, l’informazione importante potrebbe essere:
alt="Postazione con monitor all'altezza degli occhi e avambracci paralleli alla scrivania"
È la stessa logica visuale, ma cambia ciò che il lettore deve ottenere dall’immagine.
Esempi di alt text corretti e sbagliati
| Scenario | Alt debole | Alt più utile |
|---|---|---|
| Foto di prodotto | scarpe | Sneaker bianche in pelle con suola nera |
| Screenshot WordPress | WordPress | Campo Testo alternativo nelle impostazioni del blocco Immagine |
| Fotografia turistica | vacanze Italia | Piazza San Marco vista dal lato della Basilica |
| Pulsante con lente | lente di ingrandimento | Cerca |
| Grafico | descrizione di tutti i valori nell’alt | Andamento mensile delle conversioni, con dati spiegati nel testo |
| Elemento puramente decorativo | sfondo blu astratto | alt="" |
Evita anche formule come:
alt="Immagine di una sneaker bianca"
se la parola “immagine” non aggiunge nulla.
Normalmente chi riceve il testo alternativo sa già che si tratta dell’alternativa di un’immagine. È più utile arrivare direttamente all’informazione:
alt="Sneaker bianca in pelle con suola nera"
Keyword nell’alt: quando sono naturali e quando diventano stuffing
Una keyword può comparire nell’alt text quando descrive davvero l’immagine.
Se un’immagine mostra il pannello di WordPress per modificare il testo alternativo, questa descrizione è perfettamente naturale:
alt="Campo testo alternativo del blocco Immagine di WordPress"
Non serve evitare il termine “WordPress” soltanto perché è una keyword.
Il problema nasce quando si parte dalla query invece che dall’immagine:
alt="tag alt immagini alt text SEO immagini WordPress tag alt SEO"
Questo testo non diventa migliore perché contiene più parole chiave.
Google raccomanda esplicitamente di evitare di riempire gli attributi alt di keyword. Un alt dovrebbe essere descrittivo, utile e coerente con il contenuto della pagina.
Il criterio pratico è semplice: se la keyword sparisse dalla tua strategia SEO, useresti comunque quella frase per descrivere l’immagine? Se la risposta è sì, probabilmente è una formulazione naturale.
Quanto deve essere lungo un alt text?
Non esiste una regola SEO universale secondo cui ogni alt text debba rimanere sotto 100, 125 o un altro numero fisso di caratteri.
Una buona descrizione dovrebbe essere abbastanza breve da andare al punto e abbastanza completa da trasmettere l’informazione necessaria.
Per una fotografia semplice possono bastare poche parole:
alt="Gatto nero seduto su un davanzale"
Per uno screenshot tecnico può servire qualche dettaglio in più:
alt="Pannello WordPress con il campo Testo alternativo evidenziato nelle impostazioni dell'immagine"
Se per descrivere correttamente un’immagine hai bisogno di un intero paragrafo, probabilmente non hai un problema di “lunghezza del tag alt”: hai un’immagine complessa che richiede una descrizione estesa nel contenuto della pagina.
Come aggiungere il tag alt in WordPress e in HTML
Se lavori con WordPress normalmente non devi modificare manualmente il codice HTML. Il CMS mette a disposizione un campo dedicato al testo alternativo.
Conviene però capire dove viene salvato, soprattutto quando la stessa immagine viene utilizzata in più pagine.
WordPress: Media Library e blocco Immagine non sono la stessa cosa
Nella Libreria Media puoi selezionare un’immagine e compilare il campo Testo alternativo.
Secondo la documentazione ufficiale del blocco Immagine di WordPress, il testo alternativo impostato direttamente nella Media Library viene utilizzato come valore predefinito quando inserisci quell’immagine nell’editor a blocchi.
Qui c’è però un dettaglio importante: se successivamente cambi l’alt nelle impostazioni del singolo blocco Immagine, la modifica riguarda quella specifica istanza della pagina o del post.
È un comportamento utile perché il testo alternativo dipende dal contesto.
La stessa fotografia potrebbe essere usata:
- in una pagina aziendale per mostrare una sede;
- in un articolo per mostrare una particolare caratteristica architettonica;
- come semplice immagine decorativa in una landing page.
Riutilizzare automaticamente lo stesso alt in tutti e tre i casi non è necessariamente corretto.
Se devi intervenire su centinaia di immagini già presenti nel sito, il problema diventa invece operativo. In quel caso trovi un approfondimento separato su come aggiungere automaticamente tag ALT alle immagini in WordPress.
L’automazione può velocizzare il lavoro, ma resta importante controllare il risultato: un sistema che conosce soltanto il file o riconosce gli oggetti presenti nella foto può non conoscere la funzione che l’immagine svolge nella pagina.
HTML: aggiungere e modificare l’attributo alt
Se lavori direttamente sul markup HTML, la sintassi di base è:
<img src="nome-immagine.jpg" alt="Descrizione utile dell'immagine">
Per un’immagine decorativa:
<img src="decorazione.jpg" alt="">
Per un’immagine informativa:
<img src="dashboard-wordpress.jpg"
alt="Campo Testo alternativo nelle impostazioni del blocco Immagine">
Se l’immagine è l’unico contenuto di un link, il testo alternativo deve aiutare a comprenderne la destinazione o la funzione:
<a href="/carrello/">
<img src="icona-carrello.svg" alt="Vai al carrello">
</a>
Non devi quindi decidere l’alt guardando soltanto il file. Devi considerare immagine, markup, testo circostante e azione disponibile all’utente come un unico insieme.
Gli errori più comuni con il tag alt
Molti errori non dipendono dall’assenza del testo alternativo, ma dall’uso di regole troppo semplici.
Usare lo stesso alt per tutte le immagini simili.
Due immagini dello stesso prodotto possono mostrare fronte, dettaglio, colore o funzione differenti. Se le differenze sono importanti per il contenuto, anche l’alternativa deve rifletterle.
Riempire automaticamente l’alt con il nome del file.
Un filename descrittivo può essere un buon punto di partenza, ma non conosce necessariamente il contesto della pagina.
Usare sempre il titolo dell’articolo come alt della featured image.
Può avere senso solo se quel testo descrive realmente la funzione dell’immagine. Copiare automaticamente l’H1 non è una regola di accessibilità né una best practice universale.
Descrivere le immagini decorative.
Aggiungere testo a un elemento che non comunica informazioni crea rumore invece di migliorare l’accessibilità.
Omettere l’attributo invece di usare alt="".
Sono due situazioni diverse. Per una decorazione, un alt deliberatamente vuoto comunica che l’immagine può essere ignorata.
Descrivere l’aspetto di un’icona quando conta la funzione.
“Lente di ingrandimento” non comunica necessariamente che il controllo avvia una ricerca. “Cerca” sì.
Scrivere per Google invece che per il contenuto.
Inserire keyword, sinonimi e varianti solo per coprire query rende l’alt meno utile e può trasformarlo in keyword stuffing.
Trattare un grafico complesso come una normale fotografia.
Un breve alt non può sostituire dati, tendenze e relazioni importanti. Queste informazioni devono essere disponibili anche nel contenuto testuale.
Pensare che l’alt risolva da solo la SEO delle immagini.
Qualità del file, contesto della pagina, nome file, dimensioni, performance e contenuto circostante fanno parte dello stesso lavoro di ottimizzazione.
Conclusione
Il cosiddetto tag alt non dovrebbe essere trattato come un campo da compilare automaticamente per ottenere un vantaggio SEO. È un attributo HTML che deve offrire un’alternativa coerente con ciò che l’immagine comunica o fa nella pagina.
La regola pratica da ricordare è questa: prima di scrivere l’alt, chiediti cosa perderebbe l’utente se non potesse vedere quell’immagine.
Se perderebbe un’informazione, descrivi quella informazione. Se perderebbe un’azione, descrivi la funzione. Se l’immagine è puramente decorativa, alt="" può essere la scelta corretta. Se contiene dati complessi, fornisci anche una descrizione testuale adeguata nel contenuto.
Questo approccio produce testi alternativi più utili per le persone e, allo stesso tempo, offre ai motori di ricerca un contesto coerente senza forzare keyword o formule artificiali.