Che cos'è un tag alt e come dovresti usarlo?

Le immagini aiutano a rendere il tuo sito web accattivante e visivamente accattivante. Tuttavia, se non ottimizzi le immagini con testo alternativo (noto anche come "testo alternativo" o "tag alt"), perderai un'opportunità fondamentale per migliorare l'esperienza dell'utente e l'accessibilità del tuo sito.

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

Iniziamo!

Iscriviti al nostro canale Youtube

Che cos'è un tag alternativo?

I tag Alt vengono aggiunti alle immagini in HTML, per descriverne il contenuto e il contesto nella pagina web. Il tag alt viene visualizzato anche all'interno del contenitore dell'immagine quando il file multimediale non può essere caricato o visualizzato correttamente:

I tag Alt aiutano le persone che utilizzano lettori di schermo, come quelli con disabilità visive, a comprendere il contenuto del tuo sito web. Inoltre, i bot 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 tag alt di qualità è una breve descrizione che spiega non solo cosa presenta l'immagine, ma anche il suo scopo nella pagina. Se utilizzato nel codice HTML, il tag dell'immagine completa ha un aspetto simile a questo:

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

I tag alt dell'immagine vengono talvolta confusi con i titoli o le didascalie delle immagini. Tuttavia, i titoli delle immagini sono un diverso tipo di attributo. Vengono visualizzati come testo a comparsa quando una persona passa il mouse su un'immagine. D'altra parte, le didascalie vengono visualizzate con un'immagine, in genere al di sotto di essa, e forniscono ulteriori informazioni o dettagli su di essa. In circostanze normali, i visitatori non vedranno mai i tag alt delle tue immagini.

Perché usare i tag Alt sulle immagini?

I tag alt servono a più scopi. Sebbene non sia necessario utilizzarli, ci sono alcuni importanti vantaggi nel farlo. Poiché sono utilizzati sia dai crawler dei motori di ricerca che dagli strumenti di lettura dello schermo, sono una componente fondamentale dell'accessibilità al Web e dell'ottimizzazione dei motori di ricerca (SEO).

Migliorano l'accessibilità al Web

I tag Alt aiutano a garantire che i visitatori possano accedere e godere dei contenuti del tuo sito web, anche quando utilizzano tecnologie assistive o browser di solo testo. Quando qualcuno con problemi di vista visita il tuo sito web, il suo screen reader leggerà loro il testo sulla pagina. Quando arriva a un'immagine, utilizzerà il tag alt per descrivere che cos'è quell'immagine.

Se manca il tag alt, lo screen reader potrebbe leggere invece il nome del file immagine. Non solo questo di solito è inefficace per spiegare correttamente l'immagine, ma può anche essere fonte di confusione e di disturbo, in particolare se il nome del file non è stato ottimizzato per la SEO.

In alcuni casi, ad esempio quando lasci vuoto il campo tag alt di un'immagine in WordPress, lo screen reader salterà del tutto l'immagine. Supponendo che le immagini che includi nelle tue pagine web abbiano uno scopo, questa assenza significa che il visitatore non sta ottenendo il pieno valore o l'esperienza che intendevi quando consuma i tuoi contenuti.

Possono aumentare il posizionamento nei motori di ricerca

I tag alt dell'immagine possono semplificare il posizionamento per le 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 allo stesso modo degli umani.

Gli attributi Alt offrono un'alternativa basata sul testo per la traduzione delle immagini e, più specificamente, per l'incorporazione di parole chiave pertinenti. Le descrizioni testuali che contengono parole chiave target possono aumentare le tue possibilità di ottenere un posizionamento elevato nelle ricerche di immagini.

Per enfatizzare il ruolo importante che le immagini (e, a loro volta, i tag alt) svolgono nella SEO, considera la pagina dei risultati del motore di ricerca (SERP) per "biancheria da letto king size":

La prima pagina non produce solo risultati basati sul testo; ci sono anche molti risultati di immagine. Se ottimizzati e utilizzati correttamente, i tag alt possono aiutare a migliorare il tuo SEO e generare immagini cliccabili con collegamenti ipertestuali da visualizzare in ricerche come queste. Ciò è particolarmente vantaggioso per i siti di e-commerce e le landing page.

Come aggiungere un tag Alt immagine in WordPress

Una volta compresi i vantaggi dell'utilizzo degli attributi alt dell'immagine sul tuo sito Web, è tempo di imparare come farlo effettivamente. Fortunatamente, WordPress rende questo compito incredibilmente semplice e diretto.

Per aggiungere un tag alt immagine in WordPress, accedi alla dashboard di amministrazione e vai alla pagina o al post a cui desideri aggiungere la tua immagine. All'interno dell'editor di WordPress, fai clic sull'icona più e seleziona il blocco Immagine :

Quindi, carica la tua immagine o selezionane una dalla tua libreria multimediale. Una volta inserita l'immagine nel blocco, il pannello Impostazioni immagine si aprirà nella barra laterale a destra. Puoi inserire la tua descrizione nella casella di testo Alt :

Al termine, salva le modifiche. Puoi farlo anche 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 tag alt immagine in HTML

Quando utilizzi WordPress o un altro CMS che include un modulo per l'aggiunta e la modifica di tag alt, aggiungerà automaticamente il codice HTML per te. Tuttavia, se desideri aggiungere tu stesso il codice, puoi farlo facilmente.

Per aggiungere tag alt HTML in WordPress, fai clic sul blocco Immagine pertinente. 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 virgolette:

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

Suggerimenti e best practice per la scrittura di tag alt immagine

Quando crei i tuoi tag alt, ci sono alcuni punti chiave da tenere a mente. L'adesione a queste best practice contribuirà a rendere più efficaci i tag alt:

• Sii specifico e descrittivo. Lo scopo dei tag alt è descrivere l'immagine, quindi vuoi 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.
• Sii breve. Anche se vuoi essere dettagliato, non hai nemmeno bisogno di rendere il tuo tag alt lungo un paragrafo (o anche una frase intera). Punta a un massimo di 100-125 caratteri.
• Non essere ridondante. Per ottenere il massimo dal tuo tag alt, non devi includere parole non necessarie. Ciò include l'aggiunta di "Immagine di" o "Immagine di" prima della descrizione. Questi elementi non sono necessari, perché sono già impliciti.
• Incorporare parole chiave pertinenti in modo naturale . Considera le tue parole chiave target e, ove possibile, incorporale organicamente nel contesto della pagina. Questo è più facile quando si utilizzano immagini altamente pertinenti che corrispondono al testo.
• Evita il riempimento di parole chiave. Sebbene l'utilizzo di parole chiave nei tag alt possa migliorare la SEO, fai attenzione a non esagerare. Il riempimento delle parole chiave può effettivamente danneggiare il tuo SEO e produrre un'esperienza utente scadente.
• Non utilizzare immagini al posto del testo. Lo scopo principale di un tag alt è fornire un contesto testuale per le macchine che non possono elaborare e interpretare gli elementi visivi su 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 tag alt per le tue immagini, ricorda sempre che l'obiettivo è descrivere l'immagine a coloro che potrebbero non essere in grado di vederla. Anche se prendere in considerazione la SEO e le parole chiave è sicuramente un'idea intelligente, scrivere i tuoi tag alt con utenti reali in mente può aiutare a generare risultati più positivi.

Conclusione

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

Hai altre domande su cosa sia un tag alt o su come aggiungerne uno in WordPress? Fatecelo sapere nella sezione commenti qui sotto!

Immagine in evidenza di Honza Hruby / shutterstock.com