Testi alternativi e nomi dei file: guida pratica alla SEO delle immagini

Testo alternativo, nome del file e didascalia hanno compiti diversi

Preparando un’immagine puoi trovare campi che sembrano chiedere la stessa cosa. Ciascuno ha uno scopo: il nome identifica il file, il testo alternativo spiega l’immagine a chi non la vede e la didascalia appare accanto per tutti i lettori.

Il testo alternativo si salva nella pagina web, normalmente nell’attributo alt. Non è dentro il JPG o PNG. Un lettore di schermo, che legge il contenuto ad alta voce o lo presenta in braille, può usarlo per spiegare l’immagine. Consulta la spiegazione di MDN sull’attributo alt.

La stessa foto può richiedere descrizioni diverse secondo il contesto. In una scheda prodotto possono contare manico e finitura. In un articolo sulle superfici riflettenti, potrebbe essere importante la luce nello smalto. Descrivi ciò che serve al lettore di quella pagina.

Decidi cosa deve ricavare il lettore dall’immagine

Prima di scrivere, chiediti cosa mancherebbe senza l’immagine. Mostra un dettaglio, un passaggio, parole importanti o l’unica etichetta di un link? Oppure abbellisce soltanto la pagina? L’albero decisionale del W3C per il testo alternativo aiuta a scegliere secondo il ruolo dell’immagine.

• Immagine che aggiunge informazioni: descrivi il dettaglio necessario al lettore.
• Link o pulsante senza altra etichetta: spiega la destinazione o l’azione.
• Decorazione: lascia il testo alternativo vuoto se non aggiunge informazioni necessarie e non funziona come link o controllo.
• Grafico o diagramma dettagliato: riassumi cosa mostra, poi fornisci i dettagli nel testo vicino o in una tabella.

Pensa alla foto di una tazza su una scrivania. Nella pagina di vendita forma e aspetto sono utili. Dietro un modulo per la newsletter, la stessa foto può essere decorativa. Conta il motivo per cui l’hai inserita lì.

Scrivi una descrizione utile con parole semplici

Parti dal soggetto e aggiungi il dettaglio necessario. La vista laterale di uno zaino può mostrare una bottiglia nella tasca a rete. Nella scheda prodotto è più utile che elencare tutti i colori.

Rimani sull’essenziale. Sfondo, angolazione e luce servono solo se aiutano a spiegare l’immagine. Le indicazioni del W3C sulle immagini informative spiegano come descrivere ciò che conta senza elencare ogni dettaglio.

Sono esempi, non descrizioni delle immagini presenti nell’articolo. Per le tue foto, verifica che ogni dettaglio sia visibile. Non inventare materiale, modello, luogo o caratteristica per sembrare più completo. Una foto di una sedia marrone non dimostra che sia in pelle.

Leggi la descrizione insieme alle frasi prima e dopo l’immagine. Aggiunge qualcosa o ripete inutilmente la stessa frase? Adattala alla pagina. Se la didascalia spiega già tutto ciò che l’immagine aggiunge, valuta la necessità di una descrizione separata. Mantieni nel testo alternativo i dettagli utili non coperti dalla didascalia.

Usa testo alternativo vuoto per le decorazioni

Un ornamento accanto a un titolo o un’illustrazione di sfondo può solo abbellire la pagina. Se non aggiunge informazioni necessarie, usa un attributo alt vuoto: alt="". Il lettore di schermo può ignorarlo. Non omettere l’attributo: alcuni lettori potrebbero leggere il nome del file. Consulta le indicazioni del W3C sulle immagini decorative.

<img src="/images/ornamento-giallo.svg" alt="">

Non scrivere “immagine decorativa” come descrizione. Aggiunge un annuncio senza informazioni utili. Vuoto significa che non verrà annunciata alcuna descrizione.

Fai attenzione a immagini apparentemente decorative che contengono l’unica copia di informazioni importanti. Un banner con sconto e scadenza non è solo decorazione se i dati mancano nella pagina. Scrivi l’offerta come testo normale o includila nel testo alternativo. Anche un’icona di errore richiede una spiegazione scritta se è l’unico avviso del problema.

Descrivi lo scopo di link e pulsanti composti solo da immagini

Se l’immagine è l’unico contenuto del link, il testo alternativo deve indicare la destinazione. Per un pulsante immagine descrivi l’azione. “Cerca” spiega la funzione; “Lente d’ingrandimento” descrive solo la forma. Le indicazioni del W3C sulle immagini funzionali spiegano questi casi.

Supponiamo che il logo sia l’unico contenuto del link alla homepage del negozio. “Homepage del negozio North Shore” gli dà un’etichetta utile. Descrivere la forma dell’onda nel logo non dice dove porta il link.

Se il link contiene già un testo visibile chiaro, l’immagine può spesso avere testo alternativo vuoto per evitare ripetizioni. Dipende dalle informazioni importanti che aggiunge. Valuta immagine e testo del link insieme.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="Homepage del negozio North Shore">
</a>

In una galleria prodotto pensa a cosa fa la scelta di una miniatura. “Visualizza la tasca laterale dello zaino” può essere più utile del nome ripetuto del prodotto. La galleria può avere campi separati per etichette dei pulsanti e descrizioni. Verifica che ogni controllo abbia un’etichetta chiara nella versione pubblicata.

Gestisci grafici, screenshot e testo nelle immagini

Un grafico può contenere troppe informazioni per una breve frase. Riassumi cosa mostra e metti risultati e valori nel testo vicino o in una tabella leggibile senza il grafico. Le indicazioni del W3C sulle immagini complesse descrivono queste possibilità.

Immagina un grafico che confronta il peso di tre esportazioni della stessa foto. Il testo alternativo può identificare il confronto; una tabella elenca formato e dimensione. Il risultato deve essere comprensibile senza interpretare l’altezza delle barre. Usa misure reali e chiarisci che riguardano quella foto.

Per uno screenshot di un tutorial, descrivi l’impostazione o il passaggio illustrato. Indicare dove si trova la qualità aiuta, ma scrivi anche l’istruzione nella pagina. Se servono più etichette, includile nelle istruzioni invece di nascondere una procedura lunga nel testo alternativo.

Se un’immagine contiene un breve testo importante assente altrove, includilo nel testo alternativo. I brani lunghi vanno direttamente nella pagina. La nostra guida all’esportazione da Canva spiega perché titoli e pulsanti importanti funzionano meglio come contenuto della pagina.

Scegli nomi di file brevi e descrittivi

Google consiglia nomi brevi e descrittivi come piccolo indizio sul soggetto. Usa anche testo alternativo e pagina circostante per capire le immagini. Non è un motivo per riempire il nome di frasi di ricerca. Consulta le indicazioni di Google sulla SEO delle immagini.

Nomina prima il soggetto, poi un dettaglio utile o la vista. In una galleria, zaino-verde-tasca-laterale.webp è più riconoscibile di IMG_4821.webp. Aggiungi un codice prodotto se distingue articoli simili. Non inserire un anno se non identifica davvero l’immagine.

Per un sistema semplice, usa minuscole e parole separate da trattini. Aiuta a organizzare i file, ma non garantisce un posizionamento migliore. Mantieni l’estensione corretta: cambiare .png in .jpg nel nome non converte l’immagine. Usa un convertitore per cambiare formato.

Rinomina prima del caricamento, se possibile. Se il nome cambia l’indirizzo di un’immagine pubblicata, le pagine con il vecchio indirizzo possono perderla. Aggiornale e reindirizza il vecchio URL quando serve. Non rinominare una libreria funzionante solo per aggiungere parole chiave.

Aggiungi la descrizione all’immagine della pagina

Cerca “testo alternativo” o “alt” nell’editor. Salva e controlla la pagina pubblicata. Cambiare titolo, didascalia o nome nella libreria non modifica necessariamente il testo alternativo della pagina. Editor e modelli gestiscono i campi in modi diversi.

Non devi scrivere HTML se l’editor offre il campo giusto. Modificando direttamente il codice, una semplice immagine informativa appare così:

<img src="/images/zaino-verde-tasca-laterale.webp"
     alt="Zaino verde con una bottiglia d’acqua nella tasca laterale a rete">

Controlla la pagina dopo il salvataggio. Nel browser del computer puoi ispezionare l’elemento immagine e cercare il valore alt. Un controllo di accessibilità può trovare attributi mancanti, ma non valuta in modo affidabile l’utilità della descrizione. Leggila tu insieme al contenuto.

Nei siti multilingue scrivi la descrizione nella lingua della pagina. Traduci naturalmente il significato anziché una lista inglese di parole chiave. Lo stesso file può avere testi alternativi diversi perché ogni pagina salva la propria descrizione.

Esempio: descrivi una foto di prodotto in modo utile

Aggiungi una foto della tasca laterale alla scheda di uno zaino verde. Vuoi mostrare come entra una bottiglia, non ripetere tutte le specifiche.

1. Scegli la vista utile. Usa una foto con bottiglia e tasca ben visibili. Non descrivere dettagli nascosti.
2. Prepara il file. Ritaglia lo spazio inutile e scegli dimensioni che rendano la tasca visibile. Per l’intero processo segui la nostra guida alle immagini prodotto.
3. Nomina il file finale. Usa per esempio zaino-verde-tasca-laterale.jpg con l’estensione corrispondente al formato salvato.
4. Aggiungi un testo alternativo specifico per la pagina. Descrivi la bottiglia nella tasca a rete. Prezzi, promesse di spedizione e ricerche non pertinenti appartengono al contenuto della pagina.
5. Controlla la galleria pubblicata. Verifica la descrizione salvata e le etichette dei controlli, su telefono e computer.

Questo processo separa la preparazione del file dalla scrittura del testo alternativo. Entrambi contano, ma risolvono problemi diversi. Usalo anche per screenshot e grafici adattando la descrizione alle informazioni mostrate.

Evita questi errori comuni

• Ripetere frasi di ricerca. “Zaino miglior zaino zaino economico zaino trekking” non descrive la tasca né aiuta a capire la foto.
• Usare il nome del file come descrizione. Aiuta a trovare il file, ma non spiega sempre ciò che serve al lettore.
• Dare lo stesso testo a tutte le immagini della galleria. Descrivi viste diverse quando mostrano informazioni diverse.
• Indovinare dettagli. Verifica materiali, etichette e caratteristiche invece di inventarli dall’aspetto.
• Descrivere a lungo le decorazioni. Annunci inutili possono rendere più difficile seguire il contenuto importante.
• Controllare solo la libreria multimediale. Il modello potrebbe non usare il campo modificato. Controlla l’immagine pubblicata.

Domande frequenti

Quanto deve essere lungo il testo alternativo?

Il più breve possibile senza omettere informazioni utili. Per una foto semplice può bastare una frase corta. Nessun limite unico di caratteri rende utile una descrizione. Metti le lunghe spiegazioni dei grafici nel testo della pagina.

Tutte le immagini devono avere una descrizione?

No. Descrivi quelle che aggiungono informazioni e lascia vuoto il testo delle decorazioni. Se l’immagine è l’unica etichetta di un link o pulsante, spiega destinazione o azione.

Posso usare l’IA per una bozza?

Sì come punto di partenza, ma confrontala con l’immagine reale e la pagina. Togli supposizioni, dettagli inutili e parole chiave ripetute. Una descrizione generata può sembrare sicura e indicare qualcosa che non si vede.

Comprimere elimina il testo alternativo?

È nella pagina web, non nel file immagine. Comprimere un JPG o PNG locale non modifica la pagina. Sostituire l’immagine nell’editor può però cambiare o azzerare i campi. Controlla la descrizione pubblicata dopo la sostituzione.

Nomi migliori garantiscono più traffico dai motori di ricerca?

No. Nomi chiari e descrizioni utili sostengono una pagina ben preparata, ma non garantiscono indicizzazione, posizioni o clic. Google tratta anche testo circostante, accesso dei crawler e caricamento. La nostra guida alle prestazioni delle immagini copre quella parte distinta del lavoro.

Riassumi conChatGPT (si apre in una nuova scheda)Grok (si apre in una nuova scheda)Google (si apre in una nuova scheda)Perplexity (si apre in una nuova scheda)Claude (si apre in una nuova scheda)