Probabilmente, hai già sentito parlare di alt text per le immagini nel contesto dell'accessibilità web. L'alt text (noto anche come attributi alt o descrizioni alt) è il testo che accompagna le immagini e che viene letto ad alta voce dagli screen reader, aiutando gli utenti ipovedenti a navigare nel web.
Ma l'alt text può fare molto di più per la tua SEO di quanto pensi, così come lasciare vuoto un attributo alt può danneggiare le tue classifiche. In questa guida tratteremo:
- Cos'è l'Alt Text per le immagini?
- Perché l'Alt Text è importante per la SEO delle immagini?
- Come aggiungere l'Alt Text alle immagini sulla tua pagina
- Come scrivere un Alt Text efficace
- Alt Text: le best practice per la SEO delle immagini
- Esempi di Alt Text: dal peggiore al migliore
- Come scrivere l'Alt Text per i siti e-commerce
- Scoprire i problemi con l'Alt Text dell'immagine
- Domande frequenti su Alt Text
- L'importanza dell'Alt Text per le immagini
Cos'è l'Alt Text per le immagini?
L'alt text descrive non solo il contenuto dell'immagine, ma anche il suo contesto. Spesso scambiato con il tag alt, l'alt text è in realtà parte del codice HTML, ma è solo la descrizione dell'immagine contenuta nel tag alt e non l'intero attributo.
Il significato di alt text deriva da testo alternativo e forse lo hai già incontrato, ad esempio se ti è capitato di vedere immagini che non si caricavano correttamente su una pagina. L'alt text è il testo scritto che viene visualizzato al posto di quelle immagini.
Aggiungere l'alt text alle immagini è una buona pratica usata dai SEO professionisti per ottimizzare le immagini per il web. Ecco come appare un tag alt HTML di un'immagine:
Come mostrato nel codice sorgente a destra, l'alt text di uno screenshot del nostro Site Audit Tool è:
<img alt="semrush site audit dashboard" />Semplice, non è vero?
Perché l'Alt Text è importante per la SEO delle immagini?
L'alt text per le immagini sta diventando sempre più importante man mano che i motori di ricerca migliorano la loro capacità di leggere qualsiasi immagine su una pagina e l'esperienza dell'utente diventa più ricca di contenuti visivi.
Se stai creando un qualsiasi tipo di contenuto per Internet, è probabile che avrai bisogno di immagini. Dal punto di vista dell'utente, è molto più piacevole vedere un'immagine in pagina che cliccare su un link, e le SERP di Google si adattano a questa preferenza.
In effetti, spesso il primo risultato di una ricerca su Google è un contenuto visivo. Ad esempio, se cerchiamo "esempio di curriculum vitae", ecco come appaiono le SERP:
Ciò è dovuto principalmente alla costante espansione di Google verso la ricerca visiva e al voler tenere il passo con le ultime tecnologie di apprendimento automatico e rendering AR.
Google discuteva dell'importanza dei tag alt già nel 2007, integrandoli nelle linee guida di Google per la pubblicazione delle immagini. L'intenzione del motore di ricerca di spostarsi verso una ricerca visiva più completa è confermata ad ogni aggiornamento.
Quindi, l'ottimizzazione dell'alt text per le immagini potrebbe essere ancora una novità per alcuni, ma le best practice per migliorare questo elemento saranno presto essenziali per chiunque crei contenuti su Internet.
Come aggiungere l'Alt Text alle immagini sulla tua pagina
Ora che abbiamo capito perché l'alt text è così importante per la SEO delle immagini, devi sapere dove si trovano le opzioni dell'attributo alt nel tuo CMS, poiché la maggior parte delle piattaforme Web di solito ha le funzionalità appropriate già impostate.
Consulta la nostra guida sulla SEO delle immagini e i tag alt per imparare come aggiungere testo alternativo alle immagini su WordPress, Shopify, Magento e Wix.
Come scrivere un Alt Text efficace
L'alt text ci offre la possibilità di integrare le nostre parole chiave di riferimento in un modo pertinente e significativo, arricchendo effettivamente il contenuto e offrendo una migliore esperienza utente.
Includere la parola chiave nell'alt text non è l'unica cosa da tenere a mente quando si ottimizzano le immagini. Quando scrivi l'alt text per le immagini su una pagina, ricorda di:
- Descrivere l'immagine nel modo più oggettivo possibile: in definitiva il testo alternativo viene visualizzato quando un'immagine non viene caricata, quindi deve essere una descrizione coerente dell'immagine.
- Fornire contesto all'immagine: in questo modo i crawler potranno indicizzarla con precisione.
- Essere breve e diretto: per descrizioni più lunghe usa l'attributo longdesc (nota: evita frasi come "immagine di" o "foto di" - è ridondante, in quanto l'alt text è di per sé la descrizione dell'immagine).
- Usare le parole chiave, evitando il keyword stuffing: tutte le normali regole di un contenuto di buona qualità si applicano anche all'alt text. Il keyword stuffing non funziona per i tuoi contenuti e non funzionerà per il testo alternativo.
Alt Text: le best practice per la SEO delle immagini
Un buon consiglio SEO è quello di evitare l'uso di immagini al posto delle parole. Dal momento che i motori di ricerca non possono "leggere" come gli esseri umani, l'uso di un'immagine al posto del testo effettivo crea confusione ai crawler e può danneggiare il posizionamento di una pagina web.
Come regola generale, assicurati di aggiungere l'alt text a tutte le immagini su una pagina. Ciò include le immagini utilizzate come pulsanti. L'alt text dei pulsanti può essere descrittivo, come "applica ora" o "iscriviti alla newsletter", ecc.
Esempi di Alt Text: dal peggiore al migliore
Diamo un'occhiata ad alcuni esempi di alt text, ordinati dal peggiore al migliore:
Come scrivere l'Alt Text per i siti e-commerce
È bene ripeterlo: il testo alternativo deve essere il più descrittivo possibile. È importante evitare alt text come: "scarpe converse in promozione acquistale ora". Un alt text di questo tipo potrebbe attivare un avviso di spam.
Pixabay uso commerciale gratuito
Un buon tag alt per ottimizzare le immagini per i siti di e-commerce potrebbe essere:
<img ="converse_shoes.png" alt=" converse all star sneakers for men black">Scoprire i problemi con l'Alt Text dell'immagine
Anche quando facciamo del nostro meglio per scrivere un alt text che funzioni bene, a volte possiamo dimenticarci qualcosa.
Il nostro Site Audit può aiutarti a ottimizzare le immagini per il Web, evidenziando i problemi delle immagini sulla tua pagina.
Immagini rotte
Le immagini rotte forniscono un'esperienza utente scadente perché non possono essere visualizzate correttamente. L'impressione generale che danno della tua pagina è che sia di bassa qualità. Una volta che i motori di ricerca le rilevano, le immagini rotte possono danneggiare il posizionamento del sito.
Site Audit evidenzierà la causa dell'immagine rotta. Probabilmente dovrai correggere:
- Un URL errato o un percorso file non valido: correggi l'errore di battitura nell'URL; se il file immagine è stato spostato, correggi l'URL in modo che punti alla posizione corrente.
- L'immagine non esiste più: se un file immagine è stato cancellato o danneggiato, sostituiscilo con uno nuovo; oppure, se l'immagine non è più necessaria, rimuovila anche dal codice HTML della pagina.
L'unica cosa da tenere a mente, qui, è la differenza tra immagini interne rotte e immagini esterne rotte. Poiché non hai il controllo sulle immagini esterne, l'approccio migliore è sostituirle del tutto.
Immagini senza attributo Alt
Come accennato in precedenza, un attributo alt vuoto è un'opportunità mancata per un migliore posizionamento nella ricerca per immagini. Inoltre, non offre una buona user experience agli utenti con problemi di vista.
Puoi usare Site Audit per rivedere tutte le immagini senza attributi alt, rendendo più semplice l'intervento e la compilazione dell'attributo alternativo con il testo appropriato.
Nota l'attributo alt vuoto qui:
<img src="magename.png" alt=" ">Cambialo con:
<img src="imagename.png" alt="well written alt text with keyword">Domande frequenti su Alt Text
Ecco alcune domande che sentiamo spesso quando lavoriamo con i tag alt:
Come trovo il tag Alt su una pagina?
Punta il mouse su un punto qualsiasi della pagina, fai clic con il pulsante destro del mouse e scegli "Ispeziona" dal menu. Il codice sorgente della pagina apparirà sul lato destro dello schermo.
Clicca sulla prima icona a sinistra del pannello del codice HTML, quindi 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 cliccato su "Ispeziona", devi cercare il tag HTML pertinente nel pannello che mostra il codice sorgente della pagina. L'alt text è preceduto da un 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, se il tag alt dopo "alt=" mostra solo due virgolette senza contenuto in mezzo, l'attributo alt è vuoto, cioè non c'è testo alternativo.
Come aggiungo l'alt text a un file JPG?
In Microsoft Word, puoi fare clic con il pulsante destro del mouse sull'immagine e selezionare "Modifica testo alternativo" dal menu. Inserisci la descrizione dell'immagine nella casella di input e fai clic su "OK". Ricorda di ricontrollare l'ortografia e la grammatica del testo, poiché le caselle di input non hanno il controllo ortografico.
Puoi usare virgole e punti nel testo alternativo?
Sì, e dovresti. Includere la punteggiatura corretta nel testo alternativo consente agli screen reader di offrire una migliore esperienza utente.
Inoltre, il testo alt viene visualizzato quando un'immagine non si carica correttamente. Un testo di alta qualità garantisce una migliore esperienza utente.
Quanto dovrebbero essere lunghi i tag Alt?
La lunghezza massima consigliata del testo alternativo per adattarsi alla maggior parte degli screen reader è di 125 caratteri.
L'importanza dell'Alt Text per le immagini
Il testo alternativo è una parte importante della SEO delle immagini e dell'accessibilità dell'utente, quindi cerca di tenere a mente entrambi mentre ottimizzi i tuoi tag alt. Gli utenti e i motori di ricerca usano l'alt text per comprendere meglio le immagini sulla tua pagina. Seguendo i passaggi qui descritti, sarai sulla buona strada per creare pagine user-friendly e facili da scansionare per i crawler.