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

Tag alt immagini

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

Il tag alt è un testo informativo (max. 125 caratteri) che sostituisce le immagini che non vengono visualizzate correttamente sul web browser e consente agli utenti che utilizzano uno screen reader di comprendere il contenuto delle immagini di una pagina web.

Il tag alt è importante per migliorare l’esperienza utente di chi ha problemi di vista e aiuta i motori di ricerca a comprendere il significato delle immagini inserite nelle pagine web.

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

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

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.

L’importanza del tag alt nelle immagini

Il testo alternativo è importante per l’accessibilità del tuo sito web e per l’ottimizzazione dei motori di ricerca (SEO).

  • Migliora l’accessibilità: Google consiglia di impostare un testo alternativo per rendere i contenuti sul web accessibili a tutti. Difatti, molte persone, comprese quelle con disabilità visive, per navigare su internet utilizzano i lettori dello schermo (screen reader);
  • Migliora la SEO: il testo alternativo aiuta i motori di ricerca come Google a comprendere il significato delle immagini e i contenuti delle pagine web.

Tag alt SEO: cosa fare

  • Sii specifico e conciso: descrivi in poche parole il contenuto dell’immagine senza essere dispersivo;
  • Descrivi accuratamente le immagini: aiuta le persone a comprendere: definizione, contesto, sensazioni ed emozioni delle immagini;
  • Inserisci le parole chiave con parsimonia e strettamente correlate con il contenuto: i motori di ricerca non sono in grado di riconoscere contestualmente il testo alternativo non utile, tuttavia, potresti essere soggetto a penalizzazione per eccessivo inserimento di parole chiave.

Tag alt SEO: cosa non fare

  • Non iniziare mai con la formula “Immagine di”: pensa a quanto potrebbe essere fastidioso usare uno screen reader su una pagina ricca di immagini e leggere: “Immagine della SEO” “Immagine di come fare SEO” e così via;
  • Non essere ripetitivo: se ad un’immagine hai assegnato una didascalia, non è necessario ripetere lo stesso concetto con il testo alternativo;
  • Non inserire tag alt non pertinente: il testo alternativo non correlato all’immagine può essere considerato spam e può causare problemi di indicizzazione su Google;
  • 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.

Ecco un esempio:

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

Tag alt SEO: eccezioni

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.

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 inserire alt tag nelle immagini WordPress

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.

Leonardo Spada Web Designer e Consulente SEO
Articoli correlati