Insieme al testo, immagini, loghi e grafici sono elementi essenziali di un sito web. Anche questi componenti della tua pagina devono essere curati e ottimizzati per i motori di ricerca. In caso di eventuali problemi tecnici al sito o alla connessione dei tuoi utenti, è importante che questi elementi contengano delle informazioni che li descriva o classifichi. Per far ciò bisogna lavorare nel codice sorgente o sulle piattaforme di CMS all’attributo ALT e all’attributo title. Questi e altri accorgimenti ottimizzano la SEO per le immagini del tuo sito web.
Qual è la differenza tra un attributo ALT e un attributo title?
Un attributo ALT, detto anche tag ALT, è un testo alternativo per un file immagine in una pagina web. Il suo scopo è quello di descrivere il contenuto del rispettivo elemento grafico. Se per qualche motivo l’utente non può visualizzare l’immagine viene mostrato il testo dell’attributo ALT. I motori di ricerca utilizzano questo attributo per riconoscere il contenuto dell’immagine, dal momento che questo tipo di file non può generalmente essere “letto” in modo diretto. L’attributo ALT nel codice sorgente viene visualizzato in questo modo
<img src="abbigliamento uomo/polorossa.jpg" alt="polo rossa per uomo”>
L’attributo title, detto anche attributo universale, mostra all’utente, con un breve ritardo, informazioni sull’immagine quando sposta il cursore sull’immagine (mouseover). Questo elemento non deve essere confuso con il meta-title dello snippet. L’attributo title viene utilizzato principalmente per l’usabilità ed è particolarmente importante se è prevista una didascalia. Il tag title può essere integrato come segue:
<img src="abbigliamento uomo/polorossa.jpg" width="300" height="250" alt="polo rossa uomo" title="scheda prodotto maglietta rossa uomo"/>
Fare SEO per le immagini significa accessibilità e usabilità
Le descrizioni alternative per immagini e grafiche in generale svolgono un ruolo importante per l’ottimizzazione OnPage, ma anche nell’accessibilità di Internet. Persone con problemi di vista per navigare in Internet utilizzano browser vocali o screen reader invece che la modalità di testo o l’interfaccia utente grafica. I contenuti visivi come grafiche, animazioni ma anche video vengono loro descritte leggendo proprio la descrizione che abbiamo inserito. In mancanza dell’attributo ALT, alcuni screen reader leggeranno solo il nome del file.
Perché non vengono visualizzate le immagini in un sito web?
Ci sono diversi motivi che portano un’immagine a non essere visualizzata in un sito web. Può succedere ad esempio che l’user agent non supporti le immagini o che si verifichino problemi con il server. L’immagine non è visualizzabile anche in quei casi in cui il file sul server non è più raggiungibile perché una cartella di immagini nella directory principale è stata rimossa o è stata spostata accidentalmente. Qualche browser e applicazione mobile, inoltre, potrebbe avere problemi a visualizzare la grafica.
Ottimizzare l’attributo ALT e title e utilizzarli correttamente
Non c’è un limite di lunghezza al testo dell’attributo ALT. Di norma bastano poche parole per descrivere l’immagine in modo significativo e dare importanti suggerimenti ai motori di ricerca. Quando ci accingiamo a scrivere un tag ALT poniamoci le seguenti domande:
- L’utente capirà meglio l’immagine grazie a questa descrizione?
- La parola chiave è utilizzata in modo corretto?
- I motori di ricerca comprenderanno meglio il contenuto dell’immagine?
Ammettiamo di avere la foto di un prodotto, ad esempio una polo maschile di color rosso che collegheremo alla relativa scheda prodotto. Se la pagina non dovesse caricarsi correttamente, l’utente vedrà solo l’attributo ALT “polo rossa da uomo” e l’attributo title “scheda prodotto polo rossa da uomo”. Descrivi quindi nell’attributo titolo ciò che l’utente può aspettarsi nel fare clic sul link o nello spazio vuoto. Grazie al tag title capiranno che cliccando sull’immagine verranno inoltrati alla pagina dedicata al prodotto di una polo rossa da uomo.
Esempio attributo ALT e attributo title
Nel codice viene indicato per prima l’URL della scheda prodotto. Il tag dell’immagine inizia poi con la fonte dell’immagine, ovvero il file corrispondente nella directory principale (img src). Dietro alt= è presente l’attributo ALT tra virgolette. Questo è seguito dalle informazioni sulla larghezza (width) e sull’altezza (height) dell’immagine. Nel nostro esempio l’immagine misura 300×250 pixel.
<p><a href="https://www.latuaazienda.srl/uomo/polo_rossa_marca" target="_blank"><img src="../imgs/polo-rossa-uomo-marca.jpg" alt="polo rossa da uomo x" width="300" height="250" title="scheda prodotto polo rossa da uomo marca X"/></a></p>
Ottimizzare anche gli elementi grafici decorativi
In un sito web sono presenti diversi elementi grafici che non “trasmettono” un contenuto. Questi includono ad esempio immagini di sfondo, pulsanti o linee. Anche in questi casi è importante non lasciare vuoto l’attributo ALT. Basta riempirlo con una variabile (alt=””). I motori di ricerca e gli screen reader ignorano le immagini senza tag ALT, poiché ovviamente non sono importanti per la comprensione della pagina. Gli elementi grafici decorativi non hanno bisogno di essere incorporati in modo ottimizzato nel codice sorgente, bensì definiti come elementi di sfondo tramite CSS. Un’immagine importante per il tuo contenuto senza attributo ALT viene invece visualizzata nel browser come icona senza significato.
SEO per le immagini: cosa ottimizzare
Così come per l’ottimizzazione OnPage, anche l’ottimizzazione del motore di ricerca delle immagini avviene a vari livelli: il livello superiore visibile, il meta-livello e il piano dell’immagine stessa. I fattori qualità, descrizione e dimensioni delle immagini possono contribuire in modo significativo ad aumentare la visibilità del tuo sito web nella ricerca Google per immagini. Presta attenzione ai seguenti fattori durante la modifica e il salvataggio degli elementi grafici:
- Le immagini di alta qualità risultano professionali e vengono utilizzare per la SEO. È lo stesso Google a dire che “Le foto di alta qualità attraggono gli utenti più di immagini sfocate e poco nitide. Inoltre, le immagini nitide nella miniatura dei risultati sono più allettanti per gli utenti e aumentano la probabilità di ottenere traffico dagli utenti.”
- La qualità non deve ridurre la velocità di caricamento del sito web. Carica le immagini solo delle dimensioni necessarie e comprimile se necessario, utilizzando uno dei tanti strumenti disponibili online.
- Pensa quale formato di immagini si adatta più al tuo sito web. JPG è un formato molto amato soprattutto per le sue ottimali capacità di compressione. PNG offre una compressione senza perdita di dati, ma richiede un maggiore spazio di archiviazione. Il formato GIF è utile solo per le animazioni. Il SVG funziona bene per la grafica vettoriale.
- Il nome del file deve essere significativo ma non troppo lungo. I termini dovrebbero essere separati da trattini e non dal trattino basso (underscore). Una buona struttura delle cartelle garantisce anche un corretto ordine. Il nome del file deve contenere la parola chiave più importante dell’immagine. Un’immagine che raffigura il tuo prodotto, ad es. una polo rossa maschile avrà il seguente nome “polo-rossa-uomo.jpg”.
- Specifica altezza e larghezza per tutte le immagini. Se il browser conosce le dimensioni delle immagini, inizia a visualizzare la pagina anche prima che le immagini siano state caricate. In questo modo ottimizzi i tempi generali di caricamento. Naturalmente pensa a inserire le dimensioni per un web design reattivo. In questo modo gli elementi grafici si adattano al meglio allo schermo di output dell’utente. Si evita così che la grafica venga tagliata su smartphone.
- Ricordati sempre di inserire la fonte dell’immagine: diritti d’autore e copyright devono essere menzionati chiaramente nella didascalia.
Creare una Sitemap di immagini
Un ulteriore supporto per i motori di ricerca è la creazione di una Sitemap di immagini, in cui è possibile assegnare un titolo a un massimo di 1.000 immagini per URL. È lo stesso Google a confermare che è possibile aumentare la probabilità che le immagini appaiono nei risultati di ricerca per immagini se si seguono le linee guida per webmaster e le migliori pratiche per la pubblicazione di immagini. Inoltre, puoi utilizzare le estensioni di immagini di Google Sitemap per fornire a Google ulteriori informazioni sulle immagini disponibili nelle tue pagine. Per far ciò devi salvare tutti gli URL delle immagini in una Sitemap XML separata e caricarli su Google Search Console. Ora puoi favorire l’indicizzazione dei file di immagine in pochi semplici passaggi. Questo è un esempio riportato dal blog per webmaster di Google per una Sitemap per la pagina http://example.com/sample.html in cui sono presenti due immagini.
Vantaggi e benefici della SEO per le immagini
Dal punto di vista della SEO, la corretta integrazione degli elementi grafici nel tuo sito è un ottimo vantaggio. Le immagini con gli attributi ALT e title aumentano la pertinenza della pagina, aumentando così la possibilità di ottenere un ranking migliore. Con un’immagine ottimizzata per la SEO non solo aumenti la visibilità del tuo sito web, ma puoi ottenere anche traffico indiretto. Questo perché le tue immagini potranno così essere trovate anche su Google immagini e da lì guadagnare utenti. Per Google, l’attributo ALT è un parametro importante nell’ottimizzazione OnPage. Il corretto riconoscimento aumenta la possibilità di essere trovato su Google Immagini tramite la parola chiave. Anche se la tua pagina è difficile da trovare, con una foto particolare hai la possibilità di avere un ottimo posizionamento tramite l’Universal Search. A volte succede che un sito web non può essere trovato con l’URL nei primi risultati di ricerca, ma la foto sì. Se usi immagini di alta qualità e le comprimi in modo appropriato, aumenti l’usabilità e la velocità della pagina del tuo sito web. La compressione è particolarmente importante per l’ottimizzazione mobile, dal momento che gli smartphone di solito hanno meno larghezza di banda quando utilizzano la rete mobile. I file di immagine di grandi dimensioni ritardano inutilmente il layout della pagina. Per garantire la navigazione senza barriere sul desktop e con gli screen reader, non puoi ignorare l’inclusione di immagini negli attributi ALT e title. Per un crawling più rapido e una corretta classificazione della grafica, è importantissimo inserire le descrizioni. Inoltre, migliorerai il tempo di caricamento e quindi l’usabilità, fattori importanti per la navigazione su applicazioni mobili.
La SEO per immagini
- Consolida la visibilità attraverso una buona posizione nella ricerca organica.
- Incrementa il traffico indiretto grazie al buon posizionamento nella ricerca di immagini di Google.
- Da una maggiore possibilità di posizionamento superiore tramite la Universal Search.
- Migliora il ranking tramite l’attributo ALT, adattato al tema della pagina.
- Migliora l’usabilità mobile attraverso una compressione appropriata.
