Alt text WordPress: esempi buoni e cattivi
L'alt text in WordPress è una breve descrizione dell'immagine che uno screen reader legge ad alta voce e che aiuta Google a capire la foto. Lo inserisci nella Libreria media o nel blocco Immagine. Un buon alt descrive ciò che vedi in poche parole, al massimo una dozzina. Un alt cambiato nella Libreria non corregge le immagini già inserite negli articoli.
Autore: Il team TellMyShop. Una guida per i titolari di siti WordPress e negozi WooCommerce: la causa, la correzione a mano e lo stesso lavoro in una conversazione in chat.
Ultimo aggiornamento: · 6 min di lettura
Chi legge l'alt e perché
L'alt ha due lettori. Il primo è una persona che non vede l'immagine: una persona cieca, ipovedente o con una connessione lenta su cui l'immagine non si è caricata. Lo screen reader legge l'alt al posto dell'immagine. Senza alt spesso sente il nome del file, come «IMG_4471», oppure niente.
Il secondo lettore è Google. Secondo le linee guida di Google sulle immagini, l'alt è una delle fonti importanti di informazione su cosa mostra un'immagine, e aiuta Google Immagini a mostrarla per le ricerche giuste. Google fa anche notare che un alt riempito di parole chiave fa danni.
Queste due esigenze non si scontrano. Un alt scritto per una persona di solito va bene anche per Google.
Alt buoni e cattivi, con esempi
Gli esempi vengono da un negozio di illuminazione da giardino. Ogni alt cattivo ha un errore tipico dei siti WordPress.
| Immagine | Alt cattivo | Perché è cattivo | Alt buono |
|---|---|---|---|
| Lanterna su una terrazza di sera | IMG_4471 | il nome del file non dice niente | Lanterna in ferro battuto accesa su una terrazza in legno di sera |
| La stessa immagine | lanterne giardino lanterne economiche negozio lanterne | parole chiave ammassate | come sopra |
| La titolare a un tavolo con dei campioni | immagine mostra una donna | «immagine mostra» è superfluo, nessun contenuto | La titolare del negozio dispone campioni di paralumi su un tavolo da laboratorio |
| Prodotto su sfondo bianco | prodotto | troppo generico | Applique LED da giardino color grafite, vista laterale |
| Linea ornamentale tra le sezioni | linea | grafica decorativa | alt vuoto |
| Grafico in una guida | grafico | nasconde l'informazione | Grafico: consumo annuo di lampade LED e alogene, il LED consuma meno |
Più spesso degli alt cattivi trovi alt del tutto assenti. Se il sito ha centinaia di immagini senza descrizione, parti da quelle visibili nelle pagine con traffico: prodotti, pagina dei servizi, articoli più letti.
Quando l'alt deve restare vuoto
Il consiglio «ogni immagine deve avere un alt» è una semplificazione. Le grafiche che decorano soltanto, come ornamenti, sfondi o un'icona accanto a un testo che dice la stessa cosa, dovrebbero avere un alt vuoto. Lo screen reader allora le salta e non stanca chi ascolta con la descrizione di una linea decorativa. È ciò che raccomanda il tutorial del W3C sulle immagini.
Un alt vuoto è diverso da un alt mancante. Quello vuoto dice «questa è solo decorazione». Quello mancante costringe a indovinare, spesso leggendo ad alta voce il nome del file.
Dove inserire il testo alternativo in WordPress
Hai tre posti. Ognuno funziona in modo un po' diverso.
- Libreria media. Media → Libreria, clicca sull'immagine e scrivi la descrizione nel campo Testo alternativo. WordPress salva da solo la modifica. Questo alt viene proposto ogni volta che inserisci l'immagine e di solito è usato per l'immagine in evidenza (ne parliamo nella guida all'immagine in evidenza in WordPress).
- Il blocco Immagine nell'editor. Seleziona l'immagine nell'articolo e inserisci il Testo alternativo nel pannello delle impostazioni del blocco. Questa modifica vale solo per quell'articolo. La descrizione del blocco la trovi nella documentazione del blocco Immagine.
- Immagini dei prodotti WooCommerce. L'immagine principale e la galleria del prodotto arrivano dalla Libreria media, quindi l'alt lo inserisci lì. In un tema tipico la pagina prodotto lo prende direttamente dalla Libreria.
Il campo Titolo nella Libreria è un'altra cosa rispetto all'alt. Il titolo serve soprattutto a te per trovare i file e non sostituisce la descrizione per lo screen reader.
La trappola: i vecchi articoli non vedono il nuovo alt
Qui molti perdono tempo. Compili gli alt nella Libreria media, controlli un vecchio articolo, e il codice della pagina ha ancora un alt vuoto.
Il motivo è tecnico ma semplice. Quando inserisci un'immagine in un articolo con l'editor a blocchi, WordPress copia l'alt nel contenuto dell'articolo. Da quel momento l'articolo ha una sua copia. Una modifica successiva nella Libreria corregge le immagini in evidenza e i nuovi inserimenti, ma non cambia la copia nei vecchi articoli.
Con pochi articoli, aprili uno per uno, seleziona l'immagine e correggi l'alt nel blocco. Con molti articoli, parti da quelli con più traffico.
Come la chat completa gli alt a gruppi
L'attività «Testi alternativi delle immagini» del plugin TellMyShop per WordPress e WooCommerce parte dalla Libreria media. La tua chat (Claude o ChatGPT) trova lì le immagini senza alt e propone una descrizione per ciascuna in base al nome del file, al titolo e alla pagina a cui l'immagine è collegata. Per le immagini dei prodotti tiene conto dei dati del prodotto. Quando non riesce a capire cosa c'è nell'immagine, non indovina e aggiunge il file a un elenco per te.
Tu: Completa gli alt mancanti delle immagini.
La tua chat: La Libreria media ha 37 immagini senza alt. Le prime tre, così approvi lo stile:
Due file non riesco a descriverli dal nome e dal contesto, quindi li lascio a te. Lo stile va bene?
Tu: Sì, fai il resto.
La tua chat: Anteprima del gruppo: 35 alt. Salvo dopo il tuo «sì», e puoi annullare tutto il gruppo dalla cronologia delle modifiche.
Stato della scheda: in attesa del tuo «sì»wrought-iron-lantern-02.jpg
versione precedente: alt: nessuno
nuova versione: alt: Lanterna in ferro battuto con lo sportello aperto, vista frontale
glass-lantern-terrace.jpg
versione precedente: alt: nessuno
nuova versione: alt: Lanterna in vetro con una candela su un tavolo in terrazza
DSC_0193.jpg, collegato al prodotto Piccola lanterna da appendere
versione precedente: alt: nessuno
nuova versione: alt: Piccola lanterna da appendere nera con catena
Nella versione gratuita TellMyShop Free la chat mostra l'elenco delle immagini senza alt e le descrizioni proposte. Per salvare serve TellMyShop Pro. Allora la chat cambia gli alt nella Libreria media, fino a 50 file in un gruppo, dopo che hai approvato l'anteprima. Le copie degli alt nei vecchi articoli sono una modifica separata del contenuto degli articoli: la chat può correggerle negli articoli scelti, sempre con un'anteprima «prima → dopo» e la possibilità di annullare.
Dettagli e lista di iscrizione li trovi nella pagina TellMyShop per WordPress e WooCommerce, i prezzi nella pagina prezzi. Gli alt sono un punto di una revisione più ampia del sito, che descriviamo nella guida all'audit SEO WordPress.
Un breve promemoria
Descrivi ciò che vedi, come descriveresti la foto a qualcuno al telefono. Salta «immagine mostra». Usa una parola chiave solo quando si adatta alla foto. Dai alle grafiche decorative un alt vuoto. Dopo le modifiche nella Libreria, controlla anche i vecchi articoli. Altre guide le trovi sul blog.
Domande e risposte
Dove inserisco il testo alternativo in WordPress?
In due posti. Nella Libreria media, dopo aver cliccato sull'immagine, nel campo Testo alternativo, e allora l'alt viene proposto ogni volta che inserisci l'immagine. Oppure nel blocco Immagine dell'editor, nel pannello delle impostazioni del blocco, e allora cambi l'alt solo in quell'articolo.
Ho cambiato l'alt nella Libreria media, ma l'articolo ha ancora quello vecchio. Perché?
Perché l'editor a blocchi salva l'alt nel contenuto dell'articolo nel momento in cui inserisci l'immagine. Una modifica nella Libreria vale per le immagini in evidenza e i nuovi inserimenti, ma non corregge le immagini inserite prima. Nei vecchi articoli l'alt va cambiato nel blocco Immagine o nel contenuto dell'articolo.
Ogni immagine ha bisogno di un testo alternativo?
Ogni immagine che comunica qualcosa, sì. Le grafiche puramente decorative, come linee ornamentali o sfondi, dovrebbero avere un alt vuoto, così lo screen reader le salta. Un alt vuoto deve essere una decisione voluta per una grafica precisa.
Devo mettere una parola chiave nell'alt?
Solo quando descrive in modo naturale ciò che c'è nell'immagine. Google sconsiglia di riempire gli alt di parole chiave. L'alt «lanterna da giardino in ferro battuto su una terrazza» è meglio di «lanterne giardino lanterne economiche negozio».
La chat riconosce da sola cosa c'è nell'immagine?
La chat scrive l'alt partendo dal nome del file, dal titolo e dalla pagina a cui l'immagine è collegata. Quando questi dati non le dicono cosa c'è nell'immagine, non indovina. Quei file finiscono in un elenco che descrivi tu.
WordPress è un marchio della WordPress Foundation. WooCommerce è un marchio di Automattic Inc. Claude è un marchio di Anthropic PBC. ChatGPT e OpenAI sono marchi di OpenAI. TellMyShop non è affiliato a queste aziende.