Che cos’è un tag Alt e come dovresti usarlo?

Le immagini aiutano a rendere il tuo sito web visivamente accattivante. Tuttavia, se non ottimizzi le immagini con testo alternativo (indicato anche come “alt text” o “tag alt“), perderai l’opportunità di migliorare l’esperienza utente e l’accessibilità del tuo sito.

Per usarli correttamente, è importante capire prima cosa sono i tag alt. In questo post, discuteremo cosa sono i tag alt e perché vengono usati. Spiegheremo anche come aggiungere alt tag alle immagini di WordPress e presenteremo alcune best practice per farlo.

Iniziamo!

Che cos’è un tag Alt?

I tag alt text vengono aggiunti alle immagini , per descriverne il contenuto e il contesto sulla pagina web. Il tag alt appare anche nel contenitore dell’immagine quando il file multimediale non può essere caricato o visualizzato correttamente:

I tag alt aiutano le persone che usano gli screen reader, a capire il contenuto del tuo sito web. Inoltre, i robot dei motori di ricerca li usano per interpretare le tue immagini durante la scansione, l’indicizzazione e il posizionamento del tuo sito. 

Un testo alternativo di qualità è una breve descrizione che spiega non solo ciò che l’immagine presenta, ma il suo scopo all’interno della pagina. Se utilizzato nel codice HTML, il tag immagine completo è simile al seguente:

I tag alt dell’immagine sono talvolta confusi con i titoli o le didascalie delle immagini ma i titoli delle immagini sono un tipo di attributo diverso. Vengono visualizzati come testo pop-up quando passi il mouse sopra un’immagine.

Diversamente, i sottotitoli vengono visualizzati insieme all”immagine, in genere al di sotto di essa, e forniscono ulteriori informazioni o dettagli al riguardo. In circostanze normali, i visitatori non vedranno mai il testo alternativo delle tue immagini.

Perché usare gli attributi Alt tag sulle immagini?

I tag Alt hanno molteplici scopi. Sebbene non sia obbligatorio utilizzarli, sono diversi e importanti i vantaggi nel farlo. Poiché sono utilizzati sia dai crawler sia dagli screen reader, sono un componente fondamentale dell’accessibilità web e dell’ottimizzazione dei motori di ricerca (SEO).

I tag Alt Migliorano l’accessibilità al web

I tag alt garantiscono ai visitatori l’accesso e la fruizione dei contenuti del tuo sito web, anche quando utilizzano tecnologie assistive o browser di solo testo. Quando qualcuno con una disabilità visiva visita il tuo sito web, il suo screen reader leggerà il testo sulla pagina. Quando arriva a un’immagine, utilizzerà il testo alternativo per descrivere l’immagine.

Se manca il tag alt, lo screen reader può invece leggere il nome del file immagine. Cià è efficace per spiegare correttamente l’immagine, ma può anche essere fonte di confusione, in particolare se il nome del file non è ottimizzato per la SEO.

In alcuni casi, come quando lasci vuoto il campo del tag testo alternativo di un’immagine in WordPress, lo screen reader salterà del tutto quell’immagine. 

Il tag testo alternativo immagine può migliorare la SEO

I tag alt immagine possono semplificarti il ​​posizionamento in base alle parole chiave che stai cercando di scegliere come target. I crawler dei motori di ricerca sono intelligenti, ma non possono interpretare e comprendere gli aspetti visivi di un’immagine come fanno gli umani.

Gli attributi Alt tag offrono un’alternativa testuale per la traduzione di immagini e più specificamente per incorporare parole chiave pertinenti. Le descrizioni testuali che contengono parole chiave target possono aumentare le possibilità di posizionamento elevato nelle ricerche di immagini.

Per enfatizzare l’importante ruolo che le immagini svolgono nella SEO, considera la SERP per la ricerca “apple iMac”:

La prima pagina non produce solo risultati basati su testo; ci sono anche molti risultati di immagini. Se ottimizzati e usati correttamente, i tag alt possono aiutare a migliorare la SEO e generare immagini cliccabili e hyperlink per apparire in ricerche come queste. Ciò è utile per i siti di e-commerce e le landing page.

Come aggiungere un Alt tag in WordPress

Una volta compresi i vantaggi dell’utilizzo di attributi alt immagine sul tuo sito web, è il momento di imparare come farlo realmente. Per nostra fortuna, WordPress rende questo compito diretto e semplice.

Per aggiungere un tag alt in WordPress, accedi alla dashboard e vai alla pagina o al post a cui desideri aggiungere l’immagine. Nell’editor di WordPress , fai clic sull’icona più e seleziona il blocco Immagine :

Carica la tua immagine o selezionane una dalla tua Libreria multimediale. Dopo aver inserito l’immagine nel blocco, il pannello Impostazioni immagine si aprirà nella barra laterale a destra. È possibile inserire la descrizione nella casella Alt Text :

Al termine, salva le modifiche. Puoi farlo anche per le immagini esistenti. Se vuoi ad esempio aggiornare un’immagine di un post già pubblicato, fai semplicemente clic sull’immagine e inserisci il nuovo tag alt nella barra laterale.

Come aggiungere Testo Alternativo in HTML

Quando usi WordPress o un altro CMS che include un modulo per aggiungere e modificare il testo alternativo per l’immagine, WordPress aggiungerà il codice HTML per te. Tuttavia, se vuoi aggiungere tu il codice, puoi farlo facilmente.

Per aggiungere l’attributo tag alt HTML in WordPress , fai clic sul relativo blocco immagine . Nella barra degli strumenti del blocco, seleziona il pulsante con i tre punti verticali e scegli Modifica come HTML :

Il codice HTML visualizzerà il tag immagine. Noterai che l’attributo alt è vuoto. Inserisci il testo tra levirgolette:

Al termine, fai clic sul pulsante Anteprima per tornare all’editor visivo, quindi salva le modifiche. Puoi utilizzare la stessa sintassi e lo stesso formato per modificare il tag alt immagine HTML di qualsiasi file.

Suggerimenti e best practice per la scrittura di alt tag immagine

Quando crei i tag alt, ci sono alcuni punti chiave da tenere a mente. Seguire queste buone pratiche contribuirà a rendere questi attributi più efficaci:

• Sii specifico e descrittivo. Lo scopo del testo alternativo è di descrivere l’immagine in questione, quindi devi essere il più specifico possibile. 
• Tienilo breve. Anche se vuoi essere dettagliato, non devi nemmeno rendere il tuo tag alt un paragrafo lungo (o anche una frase completa). L’obiettivo è un massimo di circa 100 a 125 caratteri.
• Non essere ridondante. Per sfruttare al meglio il tuo testo alternativo dell’immagine, non devi includere parole non necessarie. 
• Integra parole chiave pertinenti in modo naturale . Considera le tue parole chiave target e, ove possibile, incorporale nel contesto della pagina. Questo è più semplice quando si utilizzano immagini altamente pertinenti che corrispondono al testo.
• Evita il riempimento di parole chiave. Mentre l’uso delle parole chiave nei tag alt può migliorare la SEO, fai attenzione a non esagerare. Il keyword stuffing può danneggiare la SEO e produrre una scarsa esperienza utente.
• Non utilizzare le immagini al posto del testo. Lo scopo principale dell’attributo testo alternativo di un’immagine è fornire un contesto testuale per macchine che non possono elaborare e interpretare gli elementi visivi in ​​una pagina. Pertanto, non ha senso utilizzare il testo all’interno delle immagini, in particolare per i titoli e i titoli delle pagine.

Quando crei un testo alternativo per le tue immagini, ricorda sempre che l’obiettivo è descrivere l’immagine per coloro che potrebbero non essere in grado di vederla. Certo, tenere in considerazione SEO e keyword è sicuramente un’idea intelligente, ma scrivere i tuoi tag alt tenendo presente gli utenti può generare risultati migliori.

Conclusione

Le immagini possono aiutare a migliorare l’aspetto delle tue pagine web e renderle più interessanti, istruttive e coinvolgenti. Tuttavia, per massimizzare il loro valore, è meglio integrarli con testo alternativo. Queste brevi ma descrittive spiegazioni forniscono un contesto sia per gli utenti che per i motori di ricerca. I tag alt immagine aiutano a migliorare l’esperienza dell’utente, a migliorare l’accessibilità e a semplificare il posizionamento delle parole chiave pertinenti.

Buon lavoro.