Skip to main content

Alt text per le immagini: cos’è e a cosa serve

Il tag alt text, spesso chiamato anche tag alt, è una stringa testuale di codice HTML che serve a descrivere il contenuto e il contesto di un’immagine, fotografia o grafica presente su un sito web o su un post pubblicato su un blog.

Si tratta di un tag necessario per garantire la massima accessibilità di un sito web secondo le norme del World Wide Web Consortium (W3C). Inoltre, gioca un ruolo fondamentale in termini di ottimizzazione delle immagini per la SEO.

Il suo significato deriva dalla parola italiana “testo alternativo”. Si tratta di una stringa testuale sostitutiva che viene visualizzata quando l’immagine non può essere caricata correttamente sul sito web.

Aggiungere il tag alt text ad un’immagine è una delle buone pratiche utilizzate dai consulenti SEO per migliorare ulteriormente l’ottimizzazione e il posizionamento sui motori di ricerca dei siti web.

Il suo utilizzo è molto utile per gli utenti che hanno disabilità visive, per gli utenti che dispongono di dispositivi obsoleti e per gli spider dei motori di ricerca che analizzano le pagine di un sito web.

In genere questo attributo HTML non viene sempre mostrato agli utenti, ma compare solo in determinate situazioni, come:

  • il caricamento non corretto delle immagini su una pagina di un sito;
  • la disabilitazione del supporto grafico sul browser dell’utente.

Esempio di un codice HTML con il tag alt inserito:

<img src="pizza-margherita.png" alt="foto di una pizza margherita napoletana"/>

Perché inserire l’alt text nelle immagini

Aiutare i motori di ricerca

L’alt text gioca un ruolo fondamentale per l’ottimizzazione SEO di un sito web per i motori di ricerca. Grazie all’alt text, gli spider dei motori di ricerca possono comprendere meglio le immagini presenti sul sito.

Gli user agent, infatti, non sono in grado di visualizzare e comprendere il contesto di un’immagine come gli esseri umani. Pertanto, l’utilizzo dell’alt text consente di fornire ai motori di ricerca un contesto chiaro e conciso dell’immagine, migliorandone l’indicizzazione sulle SERP dei risultati di ricerca.

Inoltre, l’alt text può essere considerato dai motori di ricerca come un anchor text per i link delle immagini. Questo significa che un testo alternativo ben scritto può contribuire a migliorare la rilevanza e il ranking di una pagina sulla ricerca immagini dei motori di ricerca.

Aiutare gli ipovedenti

Gli ipovedenti utilizzano degli screen reader (software che leggono i contenuti testuali di una pagina) per comprendere il contenuto di una pagina di un sito web.

Ecco che quindi inserire l’alt text nelle immagini gioca un ruolo fondamentale per chi è ipovedente perché permette di far comprendere il contesto di un immagine a una fascia di utenti più ampia.

Come scrivere un alt text efficace

L’alt text deve comprendere una descrizione del contenuto dell’immagine. Non deve limitarsi a contenere la keyword con cui si vuole posizionare l’immagine.

Per scrivere un testo alternativo efficace, è sufficiente inserire termini concisi che fanno riferimento al contesto dell’immagine. Ad esempio, si possono concentrarsi sugli aspetti principali dell’immagine, come i volti o le impostazioni degli oggetti presenti.

È inoltre importante evitare le ripetizioni superflue, come “l’immagine che rappresenta“, “un’immagine che raffigura” o “immagine di“. Questi termini sono superflui per l’utente e non aggiungono alcun valore.

Infine, la keyword con cui si vuole posizionare l’immagine deve essere inserita in modo naturale e non forzato. In caso contrario, si rischia di incorrere in penalizzazioni per keyword stuffing.

Esempio di un alt text inefficace e un alt text efficace

Quanto deve essere lungo l’alt text

In genere, l’alt text non deve essere più lungo di una o due frasi. L’ideale sarebbe stare su una lunghezza massima di 125 caratteri.

Per descrizioni più lunghe, è più opportuno utilizzare dei tag alternativi, come l’attributo longdesc. 

Questo attributo consente di fornire una descrizione più lunga dell’immagine, che viene visualizzata quando l’utente passa il mouse sull’immagine.

Come aggiungere l’alt text alle immagini

Come aggiungere il tag alt text in HTML

Per aggiungere l’alt text in HTML, è necessario inserire un attributo al tag HTML “img”. L’attributo si chiama alt e contiene una stringa di testo che descrive l’immagine.

In poche parole, dopo le virgolette contenenti il percorso dell’immagine, è necessario aggiungere un’altra stringa, tra virgolette, con il nome dell’attributo alt. Il valore dell’attributo è il testo alternativo dell’immagine.

Codice img html in cui è inserito correttamente il testo alternativo:

<img src="colosseo-roma.png" alt="Foto tramonto del Colosseo a Roma "/>

Come aggiungere gli alt text su WordPress

L’aggiunta dell’alt text su WordPress è un’operazione semplice e intuitiva. WordPress, infatti, ha predisposto un apposito riquadro che consente di aggiungere l’alt tag direttamente dalla dashboard di amministrazione.

Questa funzionalità permette di non lavorare direttamente sul codice HTML del sito web e rende accessibile svolgere il compito di inserimento del testo alternativo anche a chi è principiante e non dispone delle competenze in materia di programmazione.

Ecco una guida passo passo che si può seguire per inserire correttamente il testo alternativo direttamente da WordPress:

  • Accedi alla dashboard di amministrazione di WordPress.
  • Clicca sulla voce Media nel menu di sinistra.
  • Seleziona la foto in cui desideri inserire l’alt text.
  • Nella scheda Informazioni, inserisci il testo alternativo nel riquadro Testo alternativo.
  • Clicca su Salva.
Insermento alt text dentro la dashboard di WordPress
Insermento alt text dentro la dashboard di WordPress

Come aggiungere un alt text su Instagram

Non solo i siti web, ma anche i social network stanno implementando la funzionalità di inserimento dell’alt text nelle immagini.

Instagram, ad esempio, il più grande social network basato sulle immagini, ha inserito questa funzionalità da alcuni anni. È possibile aggiungere il tag alt direttamente nelle impostazioni presenti nella schermata di pre pubblicazione di un post.

Per aggiungere il testo alternativo a un’immagine su Instagram, segui questi passaggi:

  • Vai alla schermata di creazione di un post.
  • Seleziona l’immagine che desideri pubblicare.
  • In fondo alla schermata, premi su Impostazioni avanzate.
  • Inserisci il testo alternativo nel campo Testo alternativo.
  • Premi su Fine.

Errori comuni

Quando si ha a che fare con l’ottimizzazione dell’alt text delle immagini, è importante evitare alcuni errori comuni che possono influire negativamente sull’accessibilità e sulla SEO.

Diamo una carrellata veloce a quelli che si commettono più frequemente:

Non inserire l’alt text

Non inserire l’alt text è sicuramente uno degli errori più commessi dai principianti. Omettere il testo alternativo nelle immagini non migliora l’accessibilità del sito web e inoltre lascia una libera interpretazione del contesto dell’immagine agli spider dei motori di ricerca.

Poiché gli user agent non sono in grado di capire perfettamente il contesto di un’immagine, c’è un’alta probabilità che l’immagine non venga affatto indicizzata sulle ricerche. Questo, a sua volta, genererà una perdita di traffico e visibilità aggiuntiva che può ottenere un sito web

Riempire l’alt text con le stesse keyword

Infarcire l’alt text con le stesse keyword che addirittura non sono coerenti e pertinenti nemmeno con l’immagine è il secondo errore che le persone commettono frequentemente.

Inserire sempre la stesse keyword nel tag alt non solo genera confusione all’utente ma a lunga andare si può incorrere anche delle vere penalizzazioni di keyword stuffing che i motori di ricerca assegnano a tutti quei siti web che inseriscono le parole chiavi con solo l’unico obiettivo di migliorare il posizionamento sulle SERP.

Aggiungere l’alt text a tutte le immagini

Non è detto che l’alt text debba essere inserito in tutte le immagini, anzi se l’immagine è solo a scopo decorativo l’inserimento del tag può essere tralasciato perché l’immagine non serve a dare un contesto o valore aggiuntivo alla pagina.

Inserire il testo alternativo in tutte le immagini, anche quelle che hanno un scopo solamente decorativo, può creare solo fastidio per gli utenti e non aiuta nemmeno minimamente all’ottimizzazione del sito web in ottica SEO del sito web.

Come scoprire i tag alt text mancanti sul sito

Non avere gli alt text nelle immagini importanti di una pagina, non è il massimo. Ma per scoprire se ci sono degli alt tag mancanti su un sito web è possibile utilizzare dei vari tool che analizzano l’accessibilità del sito come Wave e Screaming Frog.

Wave è un tool di accessibilità che permette di analizzare tutta la pagina individuando tutti i possibili errori in termini di ottimizzazione SEO.

Mentre Screaming Frog è un software che simula un crawler di ricerca ed elenca tutte le caratteristiche di un sito web in termini di SEO on-page come i meta tags, le anchor text e segnalando a sua volta anche le immagini in cui è inserito al suo interno il testo alternativo.

Differenza tra l’alt tag e title

Sicuramente una delle domande che può sorgere in termini di ottimizzazione su quando stiamo inserendo del testo alternativo in un’immagine è quella se esiste una differenza tra l’alt text e il title di un immagine. 

Sebbene possano essere simili di funzionalità e scopo, la verità è che questi due tag sono degli attributi che hanno un peso diverso in termini di ottimizzazione accessibilità e SEO di un immagine.

Infatti il tag alt è fondamentale inserirlo in un immagine perché aiuta di molto a migliorare il posizionamento della fotografia nella ricerca immagine sui motori di ricerca.

Mentre il tag title non migliora questo aspetto perché non ha lo stesso valore del tag alt, o perlomeno questa è la tesi che molti esperti confermano in merito.

Inoltre un ulteriore differenza tra i due è che il tag alt text non viene mostrato all’occhio dell’utente se non in determinate casistiche mentre il tag title invece è possibile visualizzarlo al passaggio del mouse sull’immagine.

Domande frequenti sul Alt Text

Come trovo il tag Alt su una pagina?

Per trovare l’alt text di un immagine è possibile utilizzare la funzione “Ispeziona” del browser Google Chrome.

Per accedere al tool segui queste indicazioni:

  • Punta il mouse su un punto qualsiasi della pagina, 
  • Fai clic con il pulsante destro del mouse e scegli “Ispeziona” dal menu. 
  • Adesso comparirà il codice sorgente della pagina apparirà sul lato destro dello schermo.
  • Clicca sulla prima icona a sinistra del pannello del codice HTML
  • Trova l’immagine nella pagina di cui vuoi visualizzare l’alt tag e clicca anche su quella. 
  • Il codice HTML per quell’elemento sarà evidenziato con tutti gli attributi dell’immagine.

Come posso leggere l’alt text nel codice HTML?

Dopo aver aperto il tool “Ispeziona” su Google Chrome, bisogna cercare il tag HTML pertinente nel pannello che mostra il codice sorgente della pagina. 

Potrai visualizzare il testo alternativo dopo il tag che recita “alt=”, e ciò che segue è la descrizione del testo alternativo.

Come faccio a sapere se un’immagine ha un alt text?

Quando si ispeziona un’immagine nel codice sorgente di una pagina ci possono essere due casistiche:

La prima casistica è che se il tag alt dopo “alt=” mostra solo due virgolette senza contenuto in mezzo. Significa che dentro l’attributo alt non presenta del testo alternativo al suo interno. 

La seconda casistica è che se il tag dopo “alt” è presente del testo significa che l’attributo alt presenta del testo al suo interno.

Come aggiungo l’alt text a un file JPG?

Per aggiungere l’alt text a un file jpg puoi usare diversi software presenti al interno del tuo pc come Microsoft Word.

Per aggiungere l’alt text con word devi:

  • Fare clic con il pulsante destro del mouse sull’immagine
  • Selezionare “Modifica testo alternativo” dal menu. 
  • Inserire la descrizione dell’immagine nella casella di input e fare clic su “OK”.

Puoi usare virgole e punti nel testo alternativo?

Sì, certo. Includere una punteggiatura corretta nel alt text consente agli screen reader di offrire una migliore accessibilità utente.

Conclusioni

L’alt text è importante per l’accessibilità e la SEO delle immagini. Gli utenti con disabilità visive e i motori di ricerca utilizzano l’alt text per comprendere le immagini. 

Seguendo questa guida sarai sulla buona strada per ottenere un sito web che sia user-friendly, accessibile per tutti gli utenti e che si posiziona meglio sui motori di ricerca.

Per dubbi o perplessità inerenti a come ottimizzare il testo alternativo sul tuo sito web, ti ricordiamo che i nostri consulenti SEO sono a tua completa disposizione per qualsiasi esigenza.

Pietro Gaito

Founder di MisaWeb Agency. Professionista e appassionato di Web Design e di Digital Marketing. Da 5 anni offriamo servizi professionali di sviluppo sito web, creazione e-commerce, consulenza SEO e gestione delle campagne pubblicitarie online. Richiedi subito un preventivo gratuito per lo sviluppo del tuo sito oppure richiedi una prima consulenza se desideri una campagna di digital marketing.

Skip to content