Guida completa all’ottimizzazione delle immagini per la SEO

Vorresti ottimizzare le immagini del tuo sito web in chiave SEO ma non sai da dove cominciare?  Allora questo è il post che fa al caso tuo. In questa guida ti spiegherò tutti i passaggi necessari per avere immagini ottimizzate per la SEO e per gli utenti. Ti condurrò passo passo illustrandoti tutte le attività da compiere, in maniera chiara e facilmente comprensibile.

Perché è importante ottimizzare le immagini per la SEO

In qualsiasi sito web l’ottimizzazione SEO delle immagini è necessaria per due motivi fondamentali:

• ridurre il tempo di caricamento delle pagine
• consentire  la corretta indicizzazione delle immagini da parte del motore di ricerca

Approfondiamo meglio questi due aspetti.

Le immagini e il tempo di caricamento di un sito web

Una delle principali cause della lentezza di caricamento di un sito internet va ricercata proprio nella presenza di immagini troppo pesanti e non ottimizzate per il web.

E un sito lento scoraggia gli utenti, che lo abbandoneranno per cercare altrove. Tieni presente inoltre che dal 2010 la velocità di caricamento di un sito web è ufficialmente considerato un  fattore di ranking in ambito SEO.

La compressione delle immagini, quindi, è un’attività essenziale per qualsiasi progetto online.

Ma sicuramente lo è ancor di più nel caso degli ecommerce, che contengono un gran numero di foto al loro interno e in cui la lentezza di caricamento può comportare la perdita di un potenziale cliente. Ne ho parlato nella mia guida alle attività SEO per ecommerce.

L’indicizzazione delle immagini

Oltre alla riduzione del tempo di caricamento, l’ottimizzazione SEO delle immagini  si rende necessaria anche per un altro motivo fondamentale:  lo spider fatica a leggerne il contenuto e non può procedere all’indicizzazione.

Cerco di spiegarlo in maniera più semplice.

Attualmente Google non riesce a capire che cosa c’è all’interno delle immagini che hai caricato sul sito e quindi non riesce a catalogarle e ad inserirle all’interno del suo indice.

Ci sono anche altri elementi che il motore di ricerca non riesce a decifrare, come  ho spiegato in quest’articolo dedicato alla differenza tra indicizzazione,ottimizzazione e posizionamento di un sito web.

Qui intendo solo soffermarmi un attimo sul concetto di indicizzazione, se per caso non ti fosse chiaro il significato del termine. L’indicizzazione di una risorsa significa semplicemente che è stata inserita all’interno del database di Google. Il posizionamento invece è decisamente un altro paio di maniche.

Ma torniamo alle immagini.

Per ottimizzare un’immagine per la SEO, quindi, è necessario comunicarne il relativo contenuto a Google attraverso un’apposita stringa di testo.

Altrimenti avrai fatto un lavoro inutile e controproducente. Inutile perché lo spider, non essendo capace di decodificare le immagini, non riuscirebbe a indicizzarla. Controproducente perché avrai allungato il tempo di caricamento delle pagine del sito, che come abbiamo detto è uno dei fattori di posizionamento.

Ora che abbiamo chiarito l’importanza dell’ottimizzazione SEO delle immagini, concentriamoci su come farla.

Questa operazione prevede due passaggi fondamentali:

• l’alleggerimento del peso dell’immagine per ridurne il tempo di caricamento sul sito
• la compilazione di alcuni campi per renderla comprensibile a Google e favorirne l’indicizzazione

Come alleggerire un’immagine

Per alleggerire un’immagine, devi eseguire queste 2 attività:

• ridimensionamento
• compressione

Al termine di queste operazioni, l’immagine  peserà molto meno sia in termini di pixel che soprattutto di spazio occupato su disco. In questo modo, il server riuscirà a caricarla in tempi rapidi.

Soltanto dopo averla alleggerita, potrai inserire l’immagine sul tuo sito web.

Ridimensionamento delle immagini

Puoi effettuare il ridimensionamento di un’immagine attraverso appositi software, come ad esempio:

• Photoshop
• Gimp

Se utilizzi Photoshop, probabilmente ti sarà già capitato di scalare un’immagine.

In ogni caso, la procedura è la seguente: vai su Immagine/Dimensioni immagine e inserisci i valori di larghezza e altezza desiderati.

Tieni presente che non esiste un valore ottimale, perché molto dipende anche dal tipo di immagine e dal dispositivo su cui verrà visualizzata. In linea di massima, un’immagine da desktop dovrebbe avere una larghezza non superiore a 800 px e un’altezza massima di 400-450 px.

Controlla sempre che l’immagine inserita non sia  più larga del relativo contenitore. Quindi prendi queste misure con le pinze e verifica quali dimensioni siano più adatte al layout del tuo sito web.

Adobe Photoshop è uno strumento eccezionale, che offre funzionalità di editing che vanno ben aldilà del semplice ridimensionamento. La cattiva notizia è che richiede il pagamento di un abbonamento annuale.

Un’ottima alternativa è Gimp, che fornisce la possibilità di ridimensionare le immagini in modo totalmente gratuito.

Una volta scaricato il programma, inserisci l’immagine da ritoccare e clicca sul pulsante Scala. A questo  punto puoi scegliere le dimensioni che desideri, analogamente a quanto avviene con  Photoshop.

Una volta ridimensionate, le immagini vanno compresse, affinché occupino meno spazio sul server e siano più veloci da caricare.

Come comprimere le immagini

La compressione deve garantire un buon compromesso tra peso e qualità dell’immagine.

Un sito che contiene foto ad altissima risoluzione avrebbe delle pessime performance e allontanerebbe gli utenti. Allo stesso modo, però, la presenza di immagini sgranate o di bassissima qualità non è un bel biglietto da visita e di certo non invoglia a proseguire la navigazione.

Per comprimere le immagini ci sono diverse  possibilità:

• Photoshop/Gimp
• Tool online

Anche in questo caso puoi utilizzare Photoshop. C’è un’apposita funzione, che si chiama Salva per web, che consente di ridurre il peso dell’immagine.

Discorso analogo per Gimp. In questo caso dovrai andare su File/Esporta come e cliccare su Salva. Si aprirà quindi una finestra di dialogo in cui sarà possibile scegliere la qualità della compressione. Chiaramente, un maggior livello di compressione comporta una minore qualità dell’immagine e viceversa.

Per riuscire a trovare il giusto equilibrio, spunta la casella Mostra l’anteprima nella finestra immagine. In questo modo riuscirai a visualizzare in tempo reale il risultato della compressione che stai effettuando.

Esistono poi  dei tool online, completamente gratuiti e  molto efficaci. Sul web ce ne sono tantissimi. Io ti consiglio Tinypng oppure Tinyjpg, che ho avuto modo di testare personalmente. Si tratta di due tool davvero potenti, che consentono di ottenere un livello di compressione maggiore rispetto a Photoshop.

Infine, se utilizzi WordPress, puoi ricorrere a dei  plugin per l’ottimizzazione delle immagini. Anche in questo caso, c’è solo l’imbarazzo della scelta. A mio avviso  i  migliori sono Smush Image Compression and Optimization e  EWWW Image Optimizer.

In linea di massima, un’immagine scalata e compressa non dovrebbe pesare più di 100 kb. 

Un esempio di immagine ridimensionata e compressa

Adesso facciamo un esempio reale, così sarà tutto più semplice.

Quella che vedi è una foto che ho scattato personalmente qualche anno fa durante una vacanza in Giordania. L’immagine ritrae il Tesoro di Petra, la leggendaria città scavata nella roccia ad opera dei Nabatei.

Prima della compressione, questa immagine  aveva dimensioni di 3264 x 2448 pixel, per un peso di 3,82 MB. Adesso, dopo il ridimensionamento  e la compressione, le dimensioni sono di 533 x 400 pixel e il peso si è ridotto a  56.9 kilobyte.

Una bella differenza, non ti pare?

In questo caso specifico ho ridimensionato il file con Photoshop ed effettuato una prima compressione dell’immagine, che ha portato ad un peso di 65.1 kb. Successivamente ho ridotto ulteriormente l’immagine con Tinypng, ottenendo un’ ulteriore compressione del  13%, per un risultato finale di  56.9 kb.

Gli elementi dell’ottimizzazione SEO delle immagini

Una volta ridimensionata e compressa, la nostra immagine va ulteriormente ottimizzata lato SEO, al fine di renderla comprensibile per il motore di ricerca. L’indicizzazione delle immagini è fondamentale per ribadire la rilevanza del nostro contenuto rispetto alla keyword per cui vogliamo posizionarci.

In alcuni casi, l’ottimizzazione SEO delle immagini può essere utile anche per arricchire il campo semantico, introducendo nuove connotazioni di significato all’interno delle nostre pagine web.

Gli elementi fondamentali da considerare sono:

• Nome del file
• Alt tag
• Testo intorno all’immagine

Nome del file

Prima di caricare l’immagine sul sito, è necessario rinominare il file assegnandogli un nome esplicativo e attinente al contenuto.

Le foto scattate con le macchinette digitali hanno dei numeri progressivi che ne identificano l’ordinamento in sequenza. Per questo il nome del file va assolutamente modificato.

Cosa molto importante: il nome del file deve contenere la keyword principale della pagina, quella per cui intendi posizionarti su Google.

Oltre alla keyword, il nome del file deve contenere un’indicazione chiara del  contenuto dell’immagine. Deve essere breve, formato al massimo da quattro o cinque parole, sempre separate da un trattino.

Vanno evitate le cosiddette stop words, cioè le congiunzioni e le preposizioni, come ad esempio a, e, di, da, con.

Nel mio caso, la foto era contrassegnata con l’etichetta P1030787.jpg, che ho cambiato in viaggio-giordania-petra-tesoro, nell’ipotesi che voglia posizionarmi per la parola chiave viaggio in Giordania.

Alt tag

L’alt tag, chiamato anche testo alternativo/alternative text/alt text, è il parametro più importante in ottica SEO.

Che cos’è di preciso? E’ quella stringa che il server restituisce in caso di mancato caricamento della pagina, usata anche dagli screen reader delle persone non vedenti.

Come va compilato?

L’alt tag deve essere una descrizione sintetica il più possibile fedele della foto, capace di illustrarne il contenuto a coloro che non riescono a visualizzarla. Deve necessariamente contenere la keyword della pagina, perché è con quell’etichetta che verrà indicizzata la tua immagine.

Come detto, l’alt tag può servire ad incrementare la rilevanza del tuo contenuto per quella specifica query,  migliorando l’autorevolezza della pagina. Quando la scrivi, scrivila pensando di raccontare un’immagine a un non vedente. Non devi scrivere un poema. Basta una frase, sintetica ma esaustiva.

Nella foto che ho portato ad esempio, ho inserito il seguente alt text: Viaggio in Giordania: il Tesoro di Petra.

Come vedi, la  parola chiave l’ho inserita all’inizio, per il principio della keyword prominence, lo stesso che regola il tag title della pagina per intenderci. Se non sai di cosa sto parlando, te lo spiego brevemente.

Secondo il principio di prominenza più una parola è collocata a sinistra, più è importante all’interno del contesto considerato. Questa regoletta si applica principalmente al title della pagina web, ma vale anche nel caso dell’alt tag.

L’importante è non prenderla alla lettera, modificando la disposizione delle parole in maniera innaturale.

In ogni caso il mio consiglio è di non forzare mai la mano con l’alt tag.

Cerca di scegliere un’immagine adatta al contenuto e non di adattare l’alt tag alla parola chiave per cui vuoi posizionarti.

Se ad esempio posti la foto di un panorama di montagna  non puoi ottimizzare l’immagine con l’alt tag “viaggio a Parigi”. Questa sovraottimizzazione potrebbe essere penalizzata in futuro, quando magari Google riuscirà ad interpretare il contenuto delle immagini grazie al machine learning e all’intelligenza artificiale.

Allo stesso modo, evita assolutamente il cosiddetto keyword stuffing, ovvero l’inserimento massivo di parole chiave non descrittive dell’immagine postata. Non solo non otterresti alcun beneficio in termini di posizionamento, ma alla lunga rischieresti una penalizzazione.

Testo intorno alla foto

Un altro elemento da considerare, seppure meno importante dell’alt tag e del nome del file, è la presenza della keyword nel testo che precede o segue l’immagine.

In sostanza, viene valutata la pertinenza dell’immagine rispetto al contenuto in cui è inserita, premiando la connessione col contesto di riferimento.

In un articolo in cui parlo di stampanti, non ha alcun senso inserire una foto che ritrae il Tesoro di Petra. Semplicemente, la foto non è pertinente col contenuto.

Viceversa, in un post in cui racconto il mio viaggio in Giordania, la foto che ho scattato a Petra arricchisce il contenuto, migliorando anche l’esperienza dell’utente. Va da se’ che un’immagine pertinente sia anche introdotta e/o seguita dalla parola chiave corrispondente.

Se sto parlando del mio viaggio in Giordania,  ad esempio, è molto probabile che vicino all’immagine del Tesoro scriverò una frase del genere: la visita a Petra è stato uno dei momenti più emozionanti del mio viaggio in Giordania.

Quindi se agisci secondo la logica e il buon senso non avrai alcun problema.

Se però ti accorgi che nel testo che circonda l’immagine manca la parola chiave, cerca di inserirla in maniera naturale, senza forzature.

Titolo dell’immagine

Il titolo dell’immagine è quella parte di testo che viene visualizzata quando passiamo col puntatore del mouse sopra la foto.

Non è particolarmente utile lato SEO, ma contribuisce ad arricchire il campo semantico e a migliorare l’esperienza utente.  Dovrebbe contenere altre sfumature di significato, risultando esplicativo e accattivante per il lettore.

Per scriverlo correttamente puoi partire dal nome del file, esprimendolo in un linguaggio più user-friendly e magari aggiungendo una sorta di call to action.

Negli ecommerce ad esempio, il title potrebbe invitare a cliccare sull’immagine per visualizzare il prodotto a tutto schermo.

Nell’esempio di Petra, un buon titolo potrebbe essere il seguente: la splendida facciata del Tesoro di Petra, meta indimenticabile del mio viaggio in Giordania.

Come vedi, in questo caso non ho rispettato il principio di keyword prominence e ho inserito “viaggio in Giordania” alla  fine della frase. Il linguaggio è più discorsivo ed esprime anche giudizi di valore (splendida/indimenticabile), oltre a specificare che si tratta della facciata del monumento.

Lo ripeto: il titolo dell’immagine non è un fattore rilevante dal punto di vista SEO, ma può essere comunque utile per l’utente.

L’ottimizzazione delle immagini per WordPress

Se anche tu, come me, utilizzi WordPress, avrai sicuramente notato che questo Cms prevede altri 2 campi per l’ottimizzazione delle immagini: la didascalia e la descrizione.  Vediamo di cosa si tratta.

Didascalia

La didascalia è il testo visibile all’utente, immediatamente al di sotto della foto. Non ha alcun valore lato SEO, ma può migliorare l’esperienza dell’utente.

Possiamo scrivere una frase ancora più esplicativa, arricchendo il contenuto con nuove sfumature. Nel nostro esempio, una didascalia potrebbe essere questa: la splendida facciata del Tesoro di Petra, la leggendaria città giordana scavata nella roccia.

In sostanza, nella didascalia puoi aggiungere giudizi di valore, esprimere apprezzamenti, fornire il tuo personale punto di vista.

Ricordati che è un contenuto che scrivi per il lettore e non per il motore di ricerca.

Descrizione

La descrizione è un parametro assolutamente ininfluente sia per l’ottimizzazione SEO  delle immagini che per l’esperienza utente.

Puoi tranquillamente tralasciarla, oppure riciclare il contenuto del titolo o della didascalia.

Come inserire l’alt tag

In WordPress l’alt tag si chiama testo alternativo. Inserirlo è semplicissimo.

Quando aggiungi un’immagine nel Cms, si apre una finestra contenente tutti i campi utili per la sua ottimizzazione. Il testo alternativo si trova tra la didascalia e la descrizione.

Considerazioni finali

Spero che questa guida sia stata utile a chiarire alcuni concetti e ad accompagnarti passo passo nell’ottimizzazione delle immagini per il tuo sito web.

Ti lascio un promemoria di tutte le attività da svolgere, con l’indicazione della relativa importanza lato SEO. 

Riassumendo, se vuoi ottimizzare un’immagine per la SEO:

Fondamentale

1. Ridimensionala (dimensioni ideali: max 800 x  400 pixel)
2. Comprimila (max 100 kb)
3. Cambia il nome del file (no P1030787.jpg, si viaggio-giordania-petra-tesoro)
4. Compila l’alt tag (ricordati la keyword!)

Molto importante

5. Inserisci la keyword nel testo che precede/segue l’immagine

Poco importante per Google (ma utile per l’utente)

6. Scegli un titolo appropriato (descrittivo e accattivante per il lettore)
7. Inserisci una didascalia (su WordPress)

Ininfluente

8. Scrivi una descrizione (su WordPress)

Se vuoi condividere la tua esperienza sull’ottimizzazione delle immagini, oppure se hai dubbi o domande, scrivile nei commenti.