Testo alternativo delle immagini: cos’è e come si usa

Il tag alternative delle foto online non non vuol dire rinominare immagini, aggiungere didascalia o title. Stiamo parlando di un elemento decisivo per la tua attività online.

4

Il tag alt (anche alternative text o tag alternative) è quella stringa di contenuto che si inserisce nel codice HTML delle pagine web per dare delle informazioni sul contenuto in determinate circostanze. Secondo te va bene come definizione?

esempio  di tag alt nel codice HTML
L’importanza dell’alternative text su un blog.

Per iniziare sì, questo è il testo alternativo da inserire nelle immagini per renderle riconoscibili. E per curare la pagina web rispetto alla SEO e all’accessibilità. Vale a dire, rispettivamente, ottimizzazione per i motori di ricerca e uso dei contenuti da parte di chi ha una disabilità. Si tratta, quindi, di rendere il sito fruibile.

Quindi sbaglia chi pensa che il tag alt si riferisca solo alla SEO on-page. D’altro canto questo elemento, spesso sottovalutato, nasconde una serie di sfumature che devi curare per migliorare le immagini le foto del sito web. Da dove iniziare?

Cos’è tag alt HTML: definizione, spiegazione

Si tratta di una breve stringa di testo descrittiva che viene inserita dal blogger o dal webmaster per aiutare utenti e motori di ricerca nell’opera di identificazione dell’immagine.

Di base questo elemento non viene visualizzato in una pagina web funzionante, solo in determinate circostanze. La forma ideale per aggiungere un testo alternative nelle immagini è abbastanza semplice: devi essere descrittivo e aiutare le persone a capire cosa si trova nella foto. A volte non basta inserire una keyword, bisogna essere completi ma senza fare spam.

Da leggere: come trovare immagini Creative Commons

Perché inserire il testo alternative nelle foto

I motivi che spingono ad aggiungere un tag alt in una foto sono sostanzialmente tre. E sono sempre importanti, anche se uno più di tutti dovrebbe far riflettere perché riguarda la già citata accessibilità delle pagine web. Iniziamo proprio da questo.

Aiuta gli ipovedenti a scoprire la pagina

Il testo alternative viene usato dai browser delle persone che hanno problemi di vista per scoprire il contenuto di un’immagine. In questo caso il software di screen reader (come WebbiE) leggerà il contenuto dell’alt text e comprenderà il visual.

Chiarisce l’immagine all’utente

Quando l’immagine non riesce a mostrarsi, per un problema di caricamento della cartella immagini sul server o per scelta dell’utente, appare un’immagine vuota.

Per aiutare le persone a capire cosa dovrebbe esserci al posto di quel vuoto viene richiamato l’alternative text. Che dovrebbe essere semplice ma descrittivo.

risultati di google image: ecco dove appare il tag alt
Ecco dove appare il testo alternative.

Ricorda, inoltre, che il tag alt viene mostrato nei risultati di ricerca Google Image. Quindi non deve essere mostrato come testo a caso: contestualizza e aiuta l’utente a comprendere cosa sta per cliccare e di cosa stai parlando nel contenuto.

Ottimizzazione SEO della pagina web

Il tag alt è un elemento per la search engine optimization. Rappresenta il testo che Google considera per capire cosa si trova in quell’immagine, lo fa valutando anche altri elementi ma il testo alternativo è il più importante.

Questa stringa, che appartiene alla sfera del SEO copywriting, viene usato come anchor text per le immagini che hanno link verso altre risorse interne o esterne. Quindi in una strategia di link building devi valutare anche quest’elemento.

Un esempio di tag alt anche in chiave SEO

Per comprendere il ruolo del testo alternativo in una pagina può essere utile mostrare un caso concreto. Anzi, ti lascio un paio di elementi per avere riferimenti chiari quando decidi di aggiungere un tag alt ottimizzato per la SEO e l’accessibilità.

<img src="www.mysocialweb.it/title.png" alt="Questa è un'immagine del 
plugin WordPress SEO By Yoast per ottimizzare il tag title">

Come vedi dall’esempio il tag alt non è una lista di keyword senza senso o una stringa non descrittiva. Il modo migliore per mettere un testo alternative è questo: usa il campo in questione per dare alle persone ciò che serve per comprendere.

Come scrivere un tag alt in ottica SEO?

Io direi di rispettare la regola base, vale a dire quella di usare questo testo per descrivere un contenuto visual. Però ci possono essere delle regole base da rispettare per dare maggior rilevanza e importanza al lavoro svolto. Qualche idea?

  • Evita keyword stuffing nel tag alt.
  • Non aggiungere testi troppo lunghi.
  • Usa tag alt diversi per immagini differenti.
  • Usa le keyword che ti interessano.

Quest’ultimo punto attira sempre l’attenzione: quindi devo mettere la parola chiave in un tag alt immagine della pagina? Io lo faccio, ma non la vedo una forzatura. Ecco un esempio chiaro di come non inserire il tag alt in una pagina web.

<img src="www.mysocialweb.it/title.png" alt="tag title WordPress, 
titolo SEO, WordPress SEO titolo web">

Se sto parlando di quell’argomento appare logico usare la keyword del topic principale in una delle immagini. Il problema si manifesta quando uso lo stesso testo alternative per (esempio) 10 foto nella stessa pagina. È un automatismo.

Ed è una forzatura, due cose che a Google non piacciono. E neanche agli utenti. Quindi devi impegnare il tuo tempo per creare tag alt descrittivi e utili.

Indicizzare immagini su Google

L’alternative text è sicuramente utile per posizionare un’immagine su Google, per fare in modo che esca in base a quella determinata ricerca. Ma se vuoi migliorare l’indicizzazione delle immagini (cosa diversa dal posizionamento) conviene aggiungere una sitemap specifica. Un documento che poi inserirai nella Search Console.

Come scoprire tag alt mancanti sul sito

Il modo migliore per capire quali sono gli alternative text saltati o non inseriti in un sito web? Puoi usare Screaming Frog o la funzione di crawling di Semrush. Questi due SEO tool consentono di trovare i tag alt che mancano. Lo stesso fa Seozoom.

lista di tag alt mancanti su semrush
Quali sono le pagine senza tag alt?

Per chi non ha questi strumenti c’è Wave Tool, una utility molto interessante per valutare l’accessibilità di una pagina web. Purtroppo lavora su singolo documento ma restituisce una mappa di tutti i possibili errori. Compresa l’assenza del tag alt.

Differenza tra title, nome file e didascalia

Spesso il tag alt viene confuso con altri elementi dell’ottimizzazione SEO per immagini. Quindi è giusto avere ben chiara la differenza tra testo alternative, utile per i motivi già spiegati, e questi punti del lavoro utile all’inserimento delle foto online.

  • Didascalia: viene inserita per descrivere la foto una volta pubblicata. Si vede nella pagina web, e aiuta il lettore a contestualizzare e capire di cosa si tratta.
  • Nome file: il testo, separato da trattini, che viene usato per nominare la foto prima di caricarla. Farà parte dell’URL assoluto del contenuto, aggiungi poche parole utili.
  • Attributo title: appare quando l’utente passa il mouse sull’immagine, crea un tooltip. Molti sottolineano l’inutilità ai fini SEO. Io inserisco l’attributo title solo quando serve.

Io di solito tendo a lavorare in modo da diversificare questi elementi e renderli sempre utili all’utente. Anche perché questo è il modo migliore anche per lavorare sull’ottimizzazione SEO on-page del visual. Ma come si aggiunge sul sito?

Come inserire tag alt immagini WordPress

Per aggiungere il testo alternativo in un’immagine di WordPress è semplice: con WordPress Gutenberg basta caricare la foto e cliccare sul file che hai appena messo nella pagina per far apparire la finestra a destra che consente di scrivere il tag alt.

inserire tag alt nella media  library di wordpress
Ecco il modulo per inserire il tag alt.

Puoi fare lo stesso cliccando sull’icona a forma di matita che ti porta nell’editor immagine nella galleria media. In alternativa puoi andare nel codice HTML del singolo blocco (o dell’intera pagina web) per aggiungere it test con il relativo tag.

Come puoi vedere anche da questo video tutorial, relativo alla vecchia versione di Wp, è facile capire come inserire il tag alt nelle immagini e nelle foto di un blog.

Mettere il testo alternative su WordPress.

Questo, almeno, per chi usa come CMS WordPress. Per altri content management system come Joomla, Magento e Drupal la situazione è più o meno simile. Cambia l’interfaccia ma il concetto è uguale: c’è un campo nel quale inserire delle parole.

Plugin WordPress per gestire i testi alternative

Ci sono diversi plugin che svolgono funzioni di supporto al tag alt. Come quelli che consentono di mettere in automatico il testo in base a determinate esigenze.

Io preferisco fare tutto a mano, in primo luogo per personalizzare ogni dettaglio e poi per evitare inutili sovra-ottimizzazioni. Senza dimenticare che in questo modo risparmi un plugin ed eviti ulteriore lavoro per il caricamento del sito.

WordPress SEO By Yoast e tag alt immagini

Il plugin un questione si interessa anche all’inserimento del testo alternative. WordPress SEO By Yoast, infatti, verifica l’ottimizzazione di una pagina web rispetto a una focus keyword. E si assicura che sia rispettato l’inserimento di questo elemento.

Deve esserci in almeno uno dei visual secondo Yoast. Altrimenti fa apparire il semaforo rosso: “la keyword principale non compare nel nome del tag image”.

L’alternative text si deve inserire sempre?

Ho sempre inseguito l’idea di aggiungere sempre il testo alternative per le immagini. Però ho scoperto che WordPress, da qualche tempo, suggerisce di lasciare vuoto il campo tag alt nel caso in cui si carichi un’immagine decorativa.

Quindi un visual senza particolare significato, come un’icona social o un elemento che non influenza il significato della frase. Indagando sull’argomento ho scoperto che il W3C ha delle regole molto chiare rispetto a quest’argomento. Ecco esempi:

L’immagineUsa
È decorativa o non destinata all’utente?Attributo alt vuoto.
Contribuisce al significato della pagina?Alt per comunicare la funzione.
Contiene testo per una funzione?Alt per comunicare funzione.
È un semplice grafico o fotografia?Breve descrizione nell’alt.
Contiene un link?Alt per descrivere destinazione.

Quindi, se l’immagine è decorativa e non ha una funzione reale all’interno della pagina è possibile usare il tag alt vuoto. Come in questo caso specifico.

<img src="https://www.esempio.it/icona.png" alt="">

Quindi si crea un errore? No, con questa soluzione (alt con virgolette ma vuoto) semplicemente si porta a ignorare l’immagine. I browser per leggere le pagine web non considereranno quel tipo di contenuto, sarà nullo. Ma è utile?

Alt=” “, come ti comporti in questo caso?

Continuerò a mettere il testo alternativo su ogni elemento. Perché non mi costa lavoro extra, poi c’è un alone di arbitrarietà che non mi convince. Sul serio.

È inutile ignorare il fatto che ci sia un’icona della pagina Facebook o quello di un tasto per effettuare una ricerca? Credo che ci sia sempre il modo per migliorare sia il lavoro di chi usa determinati browser che quello dei motori di ricerca.

Da leggere: cercare immagini Creative Commons su Google Image

Come inserisci il testo alternative sul sito?

In questo articolo cerco di definire i passaggi essenziali per ottimizzare il tag alternativo delle foto e immagini che inserisci sul web. Soprattutto voglio dare una definizione: il tag alt è utile ma non sempre indispensabile, anche se per me resta un obbligo. Per te, invece? Lo inserisci? Lascia la tua opinione nei commenti.

4 COMMENTI

  1. Grazie Riccardo per il prezioso approfondimento. Anche io sto molto attenta alle immagini che pubblico perché credo siano un ulteriore informazione per chi ci legge. I tag li inserisco a mano scegliendo una breve frase esplicativa e con la parola chiave, tra vedere e non vedere il lato Seo cerco sempre di curarlo.

    • Ciao Silvia, anche io la penso così. Ti dico la verità, fino a poco tempo fa pensavo che si dovesse sempre mettere il testo alt per avere una pagina corretta al 100%. Però le regole del W3C suggeriscono qualcosa di diverso. In ogni caso io continuo a metterlo, senza dubbi.

  2. Se non erro nella versione 5.2 di WordPress è stato inserito il tag alt come prima voce, addirittura prima del tag title. Lo vedo come un fattore di importanza. Cosa dici Riccardo?

    • Sì, hanno cambiato posizione del testo alternativo. Ma hanno aggiunto anche la spiegazione, sottolineando che può essere lasciato vuoto. Diciamo che forse si può leggere così: è l’elemento più importante anche quando non lo metti.

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here