Image SEO

La disciplina della SEO, l’ottimizzazione dei contenuti web per i motori di ricerca, include molti aspetti: SEO tecnica, on page, off page, struttura del sito, backlink e molto altro ancora.

Uno degli aspetti forse più sottovalutato è il trattamento da dare alle immagini, la cosiddetta image SEO.

Le immagini giuste rendono gli articoli più accattivanti e facili da leggere, aggiungono contesto sia per gli utenti che per i motori di ricerca, senza contare che la ricerca per immagini sta diventando sempre più comune e può rappresentare una porta d’ingresso per visite che non arriverebbero altrimenti.

Per migliorare la SEO del proprio sito un webmaster dovrebbe seguire alcune buone pratiche, avallate anche da Google, come si legge nelle linee guida sulle immagini di Google Search Central.

Vediamo i punti uno per uno.

Usare un nome file descrittivo

La SEO relativa alle immagini inizia dal nome dei file. Il nome dei file immagine deve rispecchiare il contenuto dell’immagine stessa. Dovresti assicurarti che i nomi delle immagini siano precisi e descrittivi.

Se l’immagine di accompagnamento al testo è relativa a una delle keyword dell’articolo, dovresti inserire la parole chiave nel nome dell’immagine. Questo aiuterà i motori di ricerca a trovare il tuo sito web quando qualcuno cerca qualcosa relativo alla tua immagine.

Ad esempio, in un articolo che parla di moto giapponesi classiche in cui hai inserito la foto di una Kawasaki 900 Z1, nomina il file kawasaki-900-z1.jpg o moto-kawasaki-900-z1.jpg.

Tradurre i nomi dei file immagine

In caso di siti multilingui, tutti i nomi dei file immagine devono essere localizzati, cioè tradotti e adattati alla lingua della pagina.

Per esempio, se hai un file immagine che rappresenta un cavallo che salta, dovresti chiamarlo cavallo-che-salta.jpg nel sito in italiano, caballo-que-salta.jpg nel sito in spagnolo e jumping-horse.jpg nel sito in inglese.

A quanto sappiamo non esiste uno strumento per tradurre automaticamente o manualmente in modo comodo i nomi dei file immagine. Per questo motivo abbiamo sviluppato un programma, disponibile su Github: con poca originalità, si chiama Qabiria’s Image File Translator.

Per il momento è una versione preliminare, scritta in Python e distribuita con licenza GNU GPL v3.0: chiunque può usare, modificare e distribuire il codice, purché mantenga la stessa licenza.

Il programma si esegue da riga da comando e presuppone che Python 3 sia installato sul computer su cui viene eseguito. Funziona in questo modo:

1. si indica la lingua di partenza;
2. si indica la lingua in cui tradurre i nomi dei file;
3. si indica la cartella radice in cui sono contenuti i file immagine;
4. a quel punto il programma duplica tutti i file immagine, traducendone automaticamente il nome.

Scegliere il formato di immagine corretto

Un altro fattore di cui tenere conto che ha un impatto sulla SEO è il formato dei file immagine. I formati più comuni per le immagini sono:

• JPEG per le immagini raster/bitmap (fotografie);
• PNG per le immagini in cui è necessario conservare la trasparenza o con campiture di colore uniforme;
• SVG per loghi o icone.

Di recente sono stati introdotti nuovi formati, come WebP e AVIF, con cui si ottengono immagini di dimensioni minori con maggiore qualità rispetto a JPEG e PNG.

L’unico svantaggio di questi formati è che non tutti i browser li supportano. La percentuale di utenti che usa browser senza supporto per WebP è inferiore al 5%, come si può vedere sul sito CanIuse.com, mentre per il formato AVIF è ancora superiore al 30%.

Se decidi di non usare WebP dovresti scegliere il formato più adatto a ciascun tipo di immagine e, soprattutto, ottimizzarle.

Ottimizzare le immagini per aumentare la velocità

Usare immagini di dimensioni superiori a quelle necessarie ha un impatto negativo sulla velocità di caricamento delle pagine.

Ricordati di ridimensionare le immagini in base all’uso che ne farai: se hai bisogno di un’immagine piccola, 200 x 200 pixel ad esempio, è inutile caricare un’immagine di dimensioni superiori e poi ridimensionarla via CSS. Carica direttamente l’immagine da 200 x 200 pixel.

Per ridurre i tempi di caricamento della pagina tutte le immagini devono essere compresse, cioè bisogna ridurne il peso. Esistono numerosi strumenti che consentono di ottimizzare le immagini: siti web (come TinyPNG), plugin per i CMS più comuni (Smush per WordPress), servizi cloud che eseguono l’ottimizzazione al volo (come Kraken.io) e anche programmi desktop (come ImageOptim). Tutti questi strumenti comprimono un’immagine mantenendo la massima qualità possibile.

Usare immagini che si adattano al dispositivo dell’utente

Tutti gli esperti di SEO consigliano di creare versioni diverse di una stessa immagine e servire quella più appropriata a seconda del dispositivo e quindi della risoluzione dello schermo dell’utente.

È controproducente visualizzare un’immagine di grandi dimensioni su schermi più piccoli, in quanto si spreca larghezza di banda e si rallenta il caricamento. Il problema è particolarmente sentito dagli utenti di dispositivi mobili.

La soluzione è usare immagini adattabili (responsive) mediante l’attributo srcset dell’HTML. Per saperne di più ti rimandiamo alla pagina “Responsive images” di MDN Web Docs.

Non incorporare testo nelle immagini

Tutte le linee guida sullo sviluppo di siti web insistono sul fatto di non creare immagini che contengono testo. Quest’abitudine, lascito di un certo modo di formattare i siti comune nel secolo scorso, impedisce non solo ai motori di ricerca di rilevare automaticamente il testo, ma anche agli utenti che usano screen reader di riconoscere quelle parti di testo.

Attenzione al testo contenuto nelle immagini nei seguenti casi:

• immagini usate come titoli;
• diagrammi;
• infografiche;
• screenshot di programmi.

Se non puoi convertire previamente il testo dell’immagine con un sistema OCR e separare così il testo dalla grafica, quanto meno dovresti riportare il testo in calce all’immagine.

Aggiungere l’attributo alt

L’attributo alt di un’immagine (a volte chiamato “alt tag”, anche se non è un tag, ma un attributo del tag img) consente di aggiungere una descrizione testuale alle immagini. Questo è particolarmente importante sia per l’accessibilità che per la SEO.

L’attributo alt viene usato dagli screen reader e da qualsiasi strumento che “legge” automaticamente una pagina web. Fornire una descrizione accurata dell’immagine favorisce l’indicizzazione e aiuta chi non può visualizzare le immagini per un motivo o per l’altro (disabilità, uso di browser o dispositivi antiquati, visualizzazione delle immagini disattivata, etc.)

Usare una sitemap per le immagini

Oltre alla mappa del sito che indica quali sono le pagine che compongono un sito web, è possibile avere anche una image sitemap, che ne elenca tutte le immagini. Avere una sitemap per le immagini aumenta la probabilità che le immagini vengano trovate nelle ricerche di Google Immagini.

Allo stesso tempo indica a Google quali immagini indicizzare, includendo anche quelle che potrebbero non essere raggiungibili dal bot, ad esempio immagini inserite nel codice Javascript o simili.

Usare una struttura di file adeguata

Google suggerisce anche di creare un’adeguata struttura di URL per i file immagine. Significa che il modo di strutturare e archiviare le immagini sul sito dovrebbe essere logico, ad es. creando una gerarchia di categorie e, di nuovo, usando nomi descrittivi.

Quando si parla di SEO, “tutto somma”. Non esiste una sola azione che abbia un impatto sostanziale sul posizionamento di un sito, ma è la somma di tanti piccoli interventi che produce – a lungo andare – risultati. Prestare attenzione alle immagini è uno di questi interventi.

Per migliorare il posizionamento del tuo sito segui le linee guida indicate e, se hai un sito in più lingue, usa il programma che forniamo gratuitamente per la traduzione dei nomi dei file immagine.