Redazione: 4SYSTEMPubblicato il Aggiornato il
9 lettura minima
Per le immagini SEO, il testo alternativo viene utilizzato per trasmettere informazioni o funzioni, non per impilare parole chiave. In un negozio, la foto di un prodotto, l'icona del carrello e uno schema di collegamento non richiedono quindi la stessa risposta. Inizia con il loro utilizzo effettivo nella pagina prima di lavorare sui file.
La buona alternativa ripristina ciò che l'immagine fornisce: una descrizione utile, un'azione comprensibile o informazioni dettagliate disponibili a fianco. Un'immagine puramente decorativa riceve un attributo
altvuoto.[43]
- Identificare il ruolo di ciascuna immagine
- Utilizza l'albero decisionale
- Elabora le immagini di un negozio fittizio
- Collegamento al file e al contesto editoriale
- Compila l'inventario delle immagini
- Controllare e conservare le prove
- Separare aspetti tecnici, diritti e conformità
- Domande frequenti
- Vai all'azione successiva
Inizia con il ruolo dell'immagine, non con la parola chiave
Una foto può documentare la forma di un prodotto, una texture o il contenuto di un kit. La sua alternativa deve restituire il dettaglio utile alla decisione, senza trasformare ogni visual in una sintesi della scheda. Il nome del prodotto può essere rilevante, ma le sue qualità commerciali non descrivono necessariamente ciò che si vede.
Al contrario, viene ricevuta una trama di sfondo o un motivo di avvolgimento senza informazioni alt="" quando integrato da un tag <img>. Il WAI fornisce questa alternativa vuota per immagini puramente decorative.[43]
Non confondere questa scelta con un attributo dimenticato: documentare il carattere decorativo in modo che la correzione sia intenzionale. Esaminare anche il testo già presente e il nome dell'eventuale collegamento prima di scrivere.
Google utilizza l'alternativa con il contenuto della pagina per comprendere l'immagine e scoraggia il riempimento di parole chiave. Una serie di termini commerciali non è quindi un obiettivo della scrittura.[42]
SEO immagini e testo alternativo: un albero decisionale utilizzabile
L'ordine riportato di seguito è una proposta di controllo editoriale. Include le distinzioni WAI per le immagini HTML <img>, senza costituire un albero universale per tutti i componenti.
- L'immagine è l'unica a nominare un collegamento o un pulsante? Descrivi la destinazione o l'azione, ad es.
alt="Voir mon panier", piuttosto che l'aspetto del pittogramma.[43] - Presenta un diagramma o informazioni complesse? Identifica l'oggetto visivo nell'alternativa e fornisci le sue informazioni nel testo visibile associato, invece di stipare tutto in
alt.[43] - Contiene testo utile mancante altrove? Utilizzare questo testo in alternativa. Se è già disponibile in testo reale e l'immagine non aggiunge nulla, scegli un'alternativa vuota.[43]
- Fornisce semplici informazioni visive? Descrivi brevemente ciò che conta in questa pagina: il prodotto rappresentato, la sua vista o un dettaglio effettivamente visibile.[43]
- È solo decorativo o ridondante? Ricorda
alt=""dopo aver verificato che non scompaiano informazioni o funzioni utili.
Se nessun ramo è chiaramente adatto, sospendere la scrittura. Torniamo alla domanda concreta: cosa perderebbe una persona che non vedesse questa immagine? Questa perdita guida il trattamento.
Tre immagini di un negozio fittizio, tre trattamenti
L'esempio seguente è del tutto fittizio. Un negozio offre un kit di irrigazione per fioriere, con la foto dei suoi elementi, l'icona del cestino e uno schema di collegamento.
La foto del prodotto mostra il tubo, il rubinetto e i gocciolatori separati su uno sfondo semplice. Il suo interesse è rendere identificabile il contenuto del kit. L'alternativa comprende questi elementi, senza aggiungere “migliore”, “economico” o compatibilità che la fotografia non dimostra.
L'icona cliccabile rappresenta un carrello e costituisce da solo il contenuto del collegamento. La sua alternativa deve nominare la destinazione. Nella variante in cui il testo “Carrello” appare già nello stesso collegamento ed è sufficiente per capirlo, l'icona può ricevere un'alternativa vuota.[43]
Lo schema di collegamento ha diversi rami e una legenda. Una formula come “diagramma di irrigazione” non fornisce le relative informazioni. Fornisci una breve identificazione e, proprio accanto ad essa, questa descrizione visibile:
Il serbatoio alimenta la valvola di scarico, poi il tubo principale. Una deviazione condivide il percorso verso la fioriera e la fioriera. Ogni ramo serve i suoi gocciolatori. Le frecce indicano la direzione dell'acqua; le linee continue rappresentano i tubi. Il rubinetto controlla l'alimentazione comune alle fioriere.
Questo testo descrive solo l'illustrazione, non una procedura di installazione. Le formulazioni finali appaiono nell'inventario sottostante.
Fornisci al file un contesto che lo renda comprensibile
Google estrae informazioni dal contenuto della pagina, incluse didascalie e titoli di immagini, e consiglia di posizionare immagini accanto al testo pertinente. Il nome del file fornisce solo un minimo indizio sull'argomento.[42]
Quindi preferisco kit-arrosage-elements.jpg con un nome generico, ma non considerare la ridenominazione come la leva principale. Sul foglio posizionare la foto vicino alla composizione del kit e lo schema vicino alle spiegazioni dei collegamenti.
Il nome del file identifica una risorsa; la didascalia ne spiega l'interesse ai lettori; l'alternativa rende l'informazione o la funzione senza accesso visivo. Non è necessario che questi campi contengano una formula identica.
Per un'immagine riutilizzata senza modifiche, Google consiglia di mantenere un URL coerente in modo che possa essere memorizzata nella cache e riutilizzata.[42] Prima di rinominare, identificare le pagine e i riferimenti interessati anziché spostare il file separatamente.
Un inventario completato per decidere fotogramma per fotogramma
Ecco l'inventario editoriale del negozio fittizio. Contiene proposte di decisione e prove attese, non risultati di test già effettuati. Il motivo decorativo integra i casi precedenti.
| File | Contesto e ruolo | Alternativa mantenuta | Prova prevista |
|---|---|---|---|
kit-arrosage-elements.jpg | Foglio kit, vicino alla sua composizione; foto informativa | alt="Tuyau, robinet et goutteurs du kit d’arrosage" | Confronto del testo con gli elementi fotografati |
panier.png | Navigazione; collegamento senza testo visibile | alt="Voir mon panier" | Verifica del nome accessibile del collegamento |
raccordement-arrosage.svg | Avviso; schema complesso accompagnato dal testo proposto | alt="Schéma de raccordement du kit d’arrosage" | Corrispondenza di rami e legenda con la descrizione |
motif-feuilles.svg | Fascia per la rifinitura; decorazione senza informazioni | alt="" | Conferma che nessuna informazione o funzione scompare |
Per ogni riga registrare anche la provenienza dell'immagine, il titolare o il fornitore, il riferimento della prova d'uso, il responsabile del controllo e lo stato della ricetta. Queste informazioni dovrebbero essere raccolte, non dedotte dal nome del file. Conserva una voce per utilizzo quando la stessa immagine ricopre ruoli diversi.
Una ricetta nell'ordine corretto, con prove conservate
La seguente procedura è un metodo di lavoro proposto per collegare redazione, integrazione e convalida.
- Raccogli il contesto. Annotare l'URL della pagina, del file, la posizione, il testo adiacente e la destinazione dell'eventuale collegamento. Aggiungi l'origine dell'immagine, le condizioni d'uso disponibili e la persona responsabile della decisione in caso di ambiguità.
- Ispeziona il rendering HTML. Controlla l'elemento effettivamente prodotto dal modello, non solo il campo della libreria multimediale. Google trova le immagini nell'attributo
srcelementi<img>e non indicizza le immagini CSS.[42] Riservare pertanto l'esame degli sfondi agli usi corrispondenti. - Decidi con l'albero. Classificare il ruolo, quindi scrivere l'alternativa o scegliere esplicitamente lo spazio vuoto. Confronta ogni nome, colore e dettaglio con l'immagine. Per il diagramma, confronta tutte le etichette e le relazioni con il testo associato.
- Testare l'utilizzo. Controlla la tastiera per accedere al collegamento del carrello, quindi ascolta il suo nome con uno screen reader. Esamina anche la pagina senza immagini: le informazioni sul prodotto e la descrizione dello schema devono restare comprensibili.
- Pronuncia la convalida. Conserva un estratto del HTML reso, le osservazioni del test, la descrizione visibile e il riferimento della prova d'uso. Associare una data, una persona responsabile e una decisione: accettata, rettifica richiesta o controllo bloccato.
Uno strumento può segnalare un attributo assente; il tuo confronto con il ruolo attuale resta necessario. Una cattura da sola non dimostra il nome accessibile di un collegamento: conservare anche l'osservazione del test.
Descrizione, prestazioni, diritti e conformità separati
La scelta del formato, delle dimensioni e del caricamento è un progetto separato. Utilizza la guida immagini web: formato, dimensione e caricamento per gestire le varianti senza confondere l'ottimizzazione dei file e la descrizione dei contenuti.
Per i diritti, verificare gli usi previsti: pubblicazione commerciale, modifica, media ed eventuale menzione di credito. Nel tuo foglio di controllo, separa il credito visualizzato dalla prova che autorizza l'operazione. Un attributo alt non funge da prova d'uso.
Questa ricetta non è sufficiente per concludere che il sito rispetta gli obblighi di accessibilità ad esso applicabili. Determinare separatamente l'ambito e il repository in questione: la revisione delle immagini non copre l'intera interfaccia.
Infine, un'alternativa rilevante non garantisce l'indicizzazione di un oggetto visivo. Convalidare la qualità dell'elaborazione senza confonderla con una promessa di visibilità.
Domande frequenti
Le alternative dovrebbero essere tradotte in uno store multilingue?
Sì, scrivi l'alternativa nella lingua della pagina e controlla i nomi utilizzati in questa versione del catalogo. Una traduzione meccanica può mantenere un nome di prodotto inappropriato o perdere sfumature visive. Mantieni la funzione di collegamento comprensibile a livello locale e controlla ciascuna lingua separatamente dopo l'integrazione, anche quando il file immagine rimane condiviso.
Possiamo automatizzare le alternative in un catalogo?
L'automazione può preparare una proposta basata su dati affidabili, come il nome del prodotto e la vista rappresentata. Non deve aggiungere proprietà che non sono presenti nell'immagine. Pianificare una revisione di elementi visivi, icone e diagrammi atipici, quindi documentare la convalida umana delle proposte prima della loro applicazione nel catalogo.
Cosa fare se il fornitore di servizi blocca l'accesso agli attributi?
Chiedere al fornitore del servizio dove sono definiti l'attributo alternativo e il nome accessibile dei collegamenti. Fornire una pagina rappresentativa, un inventario e la formulazione prevista. Se il componente non consente alcuna regolazione documentare il blocco e richiedere una modifica della dima. Non considerare validato un testo inserito nella libreria multimediale senza verificarne la resa nella pagina.
Passa dalla stesura alla convalida tracciabile
Ora scegli una scheda prodotto comprensiva di foto, un link illustrato e un visual esplicativo. Completare l'inventario, applicare l'albero decisionale e conservare le prove prima di generalizzare le correzioni ai modelli. Se hai necessità di coordinare scrittura, integrazione e controllo, puoi richiedere il servizi web, SEO e marketing digitale da 4SYSTEM per inquadrare questo lavoro sulle tue pagine e sui tuoi vincoli.
Fonti
- Image SEO Best Practices | Google Search Central | Documentation | Google for Developers (accesso 2026-10-08)
- An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C (accesso 2026-10-08)