Le immagini aiutano a rendere il tuo sito web accattivante e visivamente accattivante. Tuttavia, se non ottimizzi le immagini con testo alternativo (indicato anche come “alt text”, “testo alternativo ” o “tag alt”), perderai un’opportunità chiave per 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:

Un tag alt visualizzato in un post sul blog al posto dell'immagine.

I tag alt aiutano le persone che usano gli screen reader, come chi ha problemi alla vista, 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. 

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

01<img src="paesaggio-Dolomiti.png" alt="Splendida foto di paesaggio delle Dolomiti"/>

I tag alt dell’immagine vengono talvolta confusi con i titoli o le didascalie delle immagini. Tuttavia, 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 dei motori di ricerca sia dagli screen reader, sono un componente fondamentale dell’accessibilità del web e dell’ottimizzazione dei motori di ricerca (SEO).

I tag Alt Migliorano l’accessibilità al web

I tag alt aiutano a garantire ai visitatori l’accesso e la fruizione dei contenuti del tuo sito web, anche quando si utilizzano tecnologie assistive o browser di solo testo. Quando qualcuno con una disabilità visiva visita il tuo sito web, il suo screen reader leggerà loro 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. Questo non è solitamente inefficace nel spiegare correttamente l’immagine, ma può anche essere fonte di confusione, in particolare se il nome del file non era 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. Supponendo che le immagini che inserisci nelle tue pagine web abbiano uno scopo, questa assenza significa che il visitatore non avrà l’intero valore o l’esperienza che intendi trasmettere quando fruisce i tuoi contenuti.

Il tag testo alternativo immagine può migliorare il posizionamento nei motori di ricerca

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

Gli attributi Alt tag offrono un’alternativa testuale per la traduzione di immagini e più specificamente per l’incorporamento di 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 (e, a loro volta, dei tag alt) svolgono nella SEO, considera la Pagina dei risultati dei motori di ricerca (SERP) per “apple iMac”:

Risultati basati sulla ricerca per immagini

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ò è particolarmente 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, è tempo di imparare come farlo realmente. Fortunatamente, WordPress rende questo compito incredibilmente diretto e semplice.

Per aggiungere un tag alt in WordPress, accedi al tuo pannello di amministrazione 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 :

Il blocco immagine nell'editor di WordPress.

Successivamente, 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 :

La casella di tag Alt immagine nell'editor di WordPress.

Al termine, salva le modifiche. Puoi anche farlo per le immagini esistenti. Ad esempio, se desideri aggiornare un’immagine su un post già pubblicato sul tuo sito, fai semplicemente clic sull’immagine e inserisci il tuo nuovo tag alt nella barra laterale.

Come aggiungere un Testo Alternativo immagine in HTML

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

Per aggiungere il 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 :

L'opzione per aggiungere il tag di testo alternativo in HTML

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

L'opzione per aggiungere il tag di testo alternativo

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 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. L’adesione a queste best practice contribuirà a rendere i tag alt più efficaci:

  • Sii specifico e descrittivo. Lo scopo del testo alternativo è di descrivere l’immagine in questione, quindi devi essere il più specifico possibile. Se non sei sicuro che la tua descrizione sia sufficiente, considera quale immagine visualizzeresti se vedessi solo quella riga di testo.
  • 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 tag alt, non devi includere parole non necessarie. 
  • Integra parole chiave pertinenti in modo naturale . Considera le tue parole chiave target e, ove possibile, incorporale organicamente 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 riempimento di parole chiave può effettivamente danneggiare la tua SEO e produrre una scarsa esperienza utente.
  • Non utilizzare le immagini al posto del testo. Lo scopo principale del 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, prendere in considerazione SEO e parole chiave è sicuramente un’idea intelligente, ma scrivere i tuoi tag alt tenendo presente gli utenti reali può aiutare a generare risultati più positivi.

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.