Tag alt: cos’è, a cosa serve e come inserirlo

Che cos’è il tag alt: il testo alternativo che si inserisce nelle immagini di un sito web

Il tag alt, o attributo alt, è una piccola parte di codice HTML (max. 125 caratteri) che viene aggiunto alle immagini presenti sulle pagine web per assegnare una breve descrizione testuale alle immagini, che viene visualizzata nel caso in cui l’immagine non possa essere caricata o non sia accessibile per qualche motivo.

Il termine “ALT” è l’abbreviazione di “alternativo” e si riferisce al testo che descrive un’immagine nel caso in cui non venga visualizzata correttamente nel browser di un utente ed è come una didascalia invisibile che spiega cosa mostra un’immagine.

Per farti un esempio, immagina di avere un’immagine di un gattino sul tuo sito. Se per qualche motivo, magari un problema di connessione, l’immagine non dovesse caricarsi, grazie al tag alt, riuscirai a visualizzare un testo che dice “gattino” al posto dell’immagine mancante.

Il tag <Alt>  migliora l’esperienza di navigazione su un sito web di chi è ipovedente e svolge anche ruolo SEO perché aiuta i motori di ricerca a comprendere il significato delle immagini inserite nelle pagine web. Ma cosa c’entra tutto questo con la SEO? Beh, i motori di ricerca, come Google non possono vedere le immagini come gli esseri umani e si affidano quindi ai tag ALT per determinare il contenuto multimediale inserito nelle pagine web.

In semplice parole: se vuoi che il tuo sito web sia accessibile e ben posizionato nei risultati di ricerca, devi prestare attenzione ai tag ALT delle tue immagini.

Ecco un esempio di come appare il tag alt HTML inserito in un’immagine:

<img src=”nomedominio/cartella/immagine.jpg” alt=”testo alternativo”>

A cosa serve il tag alt

1. Migliora l’accessibilità: il tag alt è fondamentale per garantire l’accessibilità del tuo sito web a persone con disabilità visive. Infatti, grazie al tag alt, i lettori di schermo (software utilizzati dalle persone non vedenti o ipovedenti) possono “leggere” l’immagine e descriverla all’utente. In questo modo, anche chi non può vedere l’immagine, può comunque capire di cosa si tratta.
2. Migliora la SEO (Search Engine Optimization): utilizzare il tag alt nelle immagini migliora il posizionamento nei motori di ricerca, dato che Google e altri motori di ricerca analizzano il tag alt per capire di cosa parla l’immagine e, di conseguenza, la pagina in cui è inserita.
3. Assegna un significato alle immagini mancanti: come accennato prima, il tag alt viene visualizzato nel caso in cui l’immagine non possa essere caricata. Questo significa che, anche se l’immagine dovesse mancare, i visitatori del vostro sito potranno comunque capire di cosa si tratta grazie alla descrizione testuale fornita dal tag alt.

Differenza tra alt tag e title tag delle immagini

Innanzitutto, il tag alternativo può essere inserito soltanto nelle immagini, invece il tag title può essere assegnato: nelle immagini, nel testo e nei collegamenti link.

Come già detto, il tag alt aiuta gli utenti che utilizzano software screen reader e i motori di ricerca a comprendere il contenuto delle immagini inserite in una pagina web. Invece, il tag title permette di aggiungere una descrizione supplementare che appare quando posizioni il cursore del mouse sopra le immagini.

Tag ALT e SEO: come ottimizzare le tue immagini per i motori di ricerca

Ora che abbiamo stabilito l’importanza dei tag ALT per la SEO, è il momento di imparare come ottimizzare le tue immagini per ottenere il massimo impatto. Ecco alcuni suggerimenti e trucchi su come scrivere tag ALT efficaci e migliorare la visibilità del tuo sito web:

• Sii descrittivo e preciso: il primo passo per scrivere un buon tag ALT è essere il più descrittivo e preciso possibile. Cerca di immaginare di dover spiegare l’immagine a qualcuno che non può vederla: quali dettagli importanti menzioneresti? Ad esempio, invece di scrivere “gatto”, potresti scrivere “gatto persiano che gioca con una palla di lana rossa”. Questo aiuterà i motori di ricerca a comprendere meglio il contenuto dell’immagine e a posizionare la tua pagina in modo appropriato nei risultati di ricerca.
• Utilizza parole chiave pertinenti: oltre ad essere descrittivi nei tuoi tag ALT, è anche utile includere parole chiave pertinenti che si riferiscono al contenuto della tua pagina. Tuttavia, fai attenzione a non esagerare con l’inserimento di parole chiave, poiché ciò potrebbe essere considerato come “keyword stuffing” e danneggiare la tua SEO. Cerca di trovare un equilibrio tra una descrizione accurata dell’immagine e l’uso di parole chiave pertinenti.
• Mantieni i tag ALT brevi e concisi: anche se potresti essere tentato di scrivere una descrizione dettagliata e lunga per il tuo tag ALT, è meglio mantenere le desxcrizioni brevi e concise. I motori di ricerca tendono a dare meno peso ai tag ALT molto lunghi, e il testo eccessivamente lungo potrebbe risultare difficile da leggere per gli utenti che utilizzano screen reader. Come regola generale, cerca di mantenere i tuoi tag ALT sotto i 125 caratteri.
• Evita la ripetizione delle stesse keyword: un altro errore comune nel creare tag ALT è l’utilizzo di parole riempitive o la ripetizione eccessiva di parole chiave. Ricorda che il tuo obiettivo principale è fornire una descrizione utile dell’immagine, non ingannare i motori di ricerca o manipolare il tuo posizionamento. Evita di utilizzare frasi come “immagine di” o “foto di” nel tuo tag ALT, poiché queste parole non aggiungono alcun valore e occupano solo spazio prezioso. Inoltre, cerca di non ripetere lo stesso tag ALT su più immagini nella stessa pagina, poiché ciò potrebbe essere interpretato dai motori di ricerca come tecnica spam.
• Prova a descrivere anche il lato emozionale delle foto: quando il topic principale del tuo contenuto è determinato dalle immagini, puoi inserire un testo alternativo più corposo e cercare di descrivere anche il lato emozionale. Ricorda che le immagini non forniscono soltanto informazioni ma possono anche trasmettere emozioni. Ad esempio, la descrizione di un quadro o di una scenografia.
• Personalizza i tag ALT per diverse immagini: se hai diverse immagini simili sulla stessa pagina, è importante personalizzare i tag ALT per ciascuna immagine, anche se le differenze sono quasi impercettibili.
• Non dimenticare le immagini funzionali: come i pulsanti e le icone, sono spesso trascurate quando si tratta di tag ALT, ma non dovrebbero esserlo. Anche se questi elementi visivi potrebbero non sembrare importanti dal punto di vista del contenuto, sono essenziali per l’accessibilità e l’usabilità del tuo sito web. Assicurati di fornire tag ALT descrittivi per le immagini funzionali, in modo che gli utenti con disabilità visive possano capire il loro scopo e interagire con il tuo sito in modo efficace.
• Non inserire un testo alternativo su immagini decorative: elementi come i divisori e indicatori di pagine sono considerati elementi decorativi e non hanno alcun significato contestuale. NB: Il codice HTML delle immagini decorative deve sempre includere l’attributo alt tag, anche se a quest’ultimo non verrà assegnato nessun valore. 

Come inserire l’alt tag nelle immagini con WordPress

Quando inserisci un file immagine nella libreria immagini WordPress, per inserire il testo alternativo puoi:

1. Selezionare l’immagine e compilare il campo “testo alternativo”;
2. Puoi inserire il tag alt anche facendo click su “modifica i dettagli aggiuntivi:
3. Inserire il testo alternativo facendo click nelle impostazioni immagini dei file media inseriti dentro gli articoli.

Tieni presente che i tag HTML sono composti da <img src= ”nomedominio/cartella/immagine.jpg” alt= ”testo alternativo”>. L’estensione file .jpg può essere anche .gif o .png. La parte alt= ”testo alternativo” deve includere il tag alt di tuo interesse tra le virgolette.

Come scoprire se le immagini non presentano il tag alternativo

Per controllare gli alt tag presenti in una pagina web, puoi utilizzare gli strumenti di sviluppo di Google Chrome oppure utilizzare un lettore screen reader. Con il Browser, puoi ispezionare l’HTML delle immagini facendo clic con il pulsante destro del mouse su di esse e selezionare “Ispeziona” o “Ispeziona elemento”. Si aprirà un riquadro a destra dello schermo con il codice HTML evidenziato che ti permetterà di visualizzare il testo alternativo e gli altri attributi delle immagini.

Non esiste solo il tag ALT durante l’ottimizzazione delle immagini

Oltre ai tag ALT, ci sono altre pratiche che puoi considerare per ottimizzare le immagini sul tuo sito web e migliorare la tua SEO. Ecco alcuni suggerimenti:

• Comprimi le immagini: riduci la dimensione dei file delle immagini senza compromettere la qualità, in modo da ridurre i tempi di caricamento delle pagine e offrire un’esperienza utente migliore.
• Usa formati di immagine moderni: considera l’utilizzo di formati di immagine più recenti e efficienti, come WebP o AVIF, che offrono una migliore compressione e qualità rispetto ai formati tradizionali come JPEG e PNG.
• Nome del file: dai un nome significativo ai tuoi file di immagine, utilizzando parole chiave pertinenti e separando le parole con trattini (-) invece di spazi o underscore (_).
• Usa l’attributo “lazy-loading”: implementa il caricamento lento (lazy-loading) per le immagini al di fuori del viewport, in modo che vengano caricate solo quando l’utente scorre fino a raggiungerle. Questo può migliorare le prestazioni e i tempi di caricamento delle pagine.