Come ottimizzare le immagini per il web e la SEO

Last modified on 25 luglio 2018 at 17:51

on 28 luglio 2015 SEO with 0 comments
come ottimizzare immagini per il web

 
In questo articolo parlo di uno degli aspetti¬†spesso tra i pi√Ļ¬†sottovalutati della strategia¬†SEO¬†di un sito:¬†l‚Äôottimizzazione¬†SEO¬†delle immagini per il web.
Google, nel 2007, attraverso l‚Äôintroduzione di¬†Google Universal Search,¬†ha integrato e unito nei risultati di ricerca tutte le informazioni¬†possibili¬†attinenti¬†alle ricerche utente. E‚Äô¬†da quel momento che immagini, Video e¬†Pdf hanno iniziato ad ottenere sempre pi√Ļ spazio e rilevanza all‚Äôinterno delle¬†SERP ; a confermare questo scenario pu√≤ essere d‚Äôaiuto un‚Äôinfografica di Search Metrics sull’Universal Search.
Perchè quindi non concentrarsi anche sull’ottimizzazione delle immagini per il web sfruttando un’altra opportunità offerta da Google?

 

Ottimizzazione SEO delle immagini: alcuni consigli

Le¬†immagini nelle SERP¬†sono diventate sempre pi√Ļ spesso strumento di coinvolgimento in grado di veicolare traffico ai siti web.
Per ottenere ciò devono essere belle e pertinenti, catturare l’attenzione dell’utente e suscitare emozioni.
Ricordiamoci però che un’immagine pur bella che sia, se non si trova nelle prime posizioni dei risultati di ricerca non sarà visibile e quindi non vi aiuterà a ottenere traffico.
Entriamo quindi nel cuore dell’articolo e cerchiamo di capire come ottimizzare le immagini in ottica SEO.

 

a) Dimensioni immagini

Uno degli errori che si commettono pi√Ļ spesso (sar√† capitato a tutti) √® proprio quello di caricare immagini di grandi dimensioni¬†e non ottimizzate¬†all‚Äôinterno dei propri siti web.
Per mancanza di voglia, o per poca consapevolezza, si caricano fotografie scaricate direttamente dagli store online senza comprimerle e ridimensionarle.
Un’immagine troppo grossa può rallentare il caricamento della pagina e spingere l’utente ad abbandonare la pagina stessa.
Non solo l’utente, ma anche il crawler di Google, e dei motori di ricerca in generale, amano i siti web veloci: immagini troppo grandi infatti possono influire in negativo sul posizionamento del tuo sito web!
 
 
SOLUZIONE:

Ridimensiona e comprimi le immagini!
Utilizza quindi Pixlr.com per ridimensionare le tue fotografie, oppure l’anteprima.app se possiedi un Mac.
Esistono in rete anche software utilissimi per comprimere le immagini come Tinypng.com o plugin WordPress come EWWW Image Optimizer.
 

ottimizzazione seo immagini compressione tiny png

Esempio di compressione di un file con Tinypng – Risparmio di oltre 100 KB

 
Se invece vuoi controllare se le tue immagini rallentano il tuo sito ti consiglio di utilizzare: Pingdom.com/fpt/ o GT Metrix.
 
Per avere invece una panoramica generale sulle dimensioni delle foto caricate sul tuo sito web ti consiglio: Screaming Frog.
 

b) I formati SEO: JPG e PNG8

Esistono moltissimi formati da utilizzare per salvare e importare un’immagine su un sito ad esempio: gif, jpg, tiff, png.
Il miglior formato di un’ immagine da utilizzare è sicuramente il .jpg ma può in alcuni casi andare bene anche il png8 o 24.
 

PNG8 e PNG24
In assoluto il png √® uno dei formati pi√Ļ pesanti, perch√© nel salvataggio mantiene tutte le informazioni delle immagini senza perdere di qualit√† e nitidezza. Il .png classico di conseguenza non √® funzionale per la SEO, mentre i formati png8 e png24 sono per alcuni versi pi√Ļ simili ad un formato JPG, di conseguenza possono essere utilizzati quando un‚Äôimmagine non deve perdere in qualit√†, ad esempio in un‚Äôinfografica.
In questo articolo vengono indicate le differenze tra i formati sopra elencati.
 
JPG
E’ il classico formato utilizzato nella maggior parte dei casi all’interno di un sito web. Durante il salvataggio dell’immagine, il file perde alcune informazioni ma rimane tendenzialmente leggero e comunque di qualità.
E’ consigliato per la SEO ed è il formato migliore da utilizzare per chi è attento alle performance e vuole ottimizzare le immagini per il web.

 
ottimizzazione SEO delle immagini
 

c) Nome del file da caricare

Il file dell’immagine che volete caricare sul sito deve essere nominato con la parola chiave relativa alla pagina che vorrete posizionare.
Voglio posizionare il mio sito internet con un articolo che parla di come ottimizzare le immagini per il web?
Il nome del file immagine sarà: ottimizzazione-immagini-web.jpg
In questo modo l’immagine, che successivamente verrà caricata sul sito web, avrà un proprio URL dedicato che sarà SEO Friendly:

nomesito.it/immagini/ottimizzazione-immagini-web.jpg

Come da esempio utilizzate il trattino (-) per separare le parole del file e rimuovete le stop words, ovvero parole poco rilevanti per i motori di ricerca e per la SEO, come articoli, congiunzioni etc.

Evitate quindi di caricare le immagini scaricate dagli store online come Fotolia o Depostihphotos o dalla vostra macchina fotografica senza rinominarle.
Incappereste in questo caso in un url non parlante come questo:

nomesito.it/immagini/IMG_676JPG

 

d) Attributo ALT e TITLE nelle immagini ottimizzate SEO

Non basta nominare il file nel modo corretto. Dovete infatti aggiungere i tag HTML definiti ALT (alternative text) e Title (Titolo).

Attribuito ALT

E’ un testo Alternativo che compare, quando l‚Äôimmagine non pu√≤ essere visualizzata, ad esempio per mancato caricamento o a causa dell‚Äôutilizzo di browser testuali. L‚Äôattributo ALT deve¬†dare un‚Äôidea di ci√≤ che l‚Äôimmagine rappresenta.

Attribuito TITLE

E’ un attributo che compare su alcuni browser quando si passa il cursore del mouse sopra le immagini e mostra un testo aggiuntivo all‚Äôimmagine,una sorta di Tooltip.

All’interno dei due attributi è utile inserire la parola chiave per cui volete posizionare la vostra pagina.
Secondo alcune dichiarazioni da parte di Google sembrerebbe che il colosso di Mountainview dia pi√Ļ importanza all‚Äôattributo alt.
Il consiglio è di utilizzare entrambi senza esagerare nella lunghezza o nel keyword stuffing.
Esempio di un codice html ottimizzato:

<img src="ottimizzazione-immagini-web.jpg" alt="ottimizzazione delle immagini per il web" title=" ottimizzazione delle immagini per il web " width="200" height="250" border="0"></img>

 

e) Lazy Load Immagini

Il lazy load è una tecnica che consente di caricare le immagini solo quando l’utente è sul punto di visualizzarle sullo schermo. Le immagini non si caricano quindi tutte in una volta sola, ma solo quando necessario, migliorando la velocità e la fruibilità del sito.

Generalmente questa tecnica si applica su immagini e iframe; è importante che per essere SEO friendly però, venga fornito un tag alternativo all’immagine anche se essa non viene subito caricata.

Essendo un argomento molto tecnico e difficile da semplificare consiglio di approfondire l’argomento direttamente in questo articolo del blog Wp rocket.

lazy load immagini web

Per verificare il funzionamento: andare nella pagina, tasto destro>ispeziona elemento> Network> e scorrere la pagina. Le immagini verranno caricate in sequenza quando si raggiungerà il punto in cui sono posizionate.

 

f) CDN per le immagini

Se un sito √® davvero di grosse dimensioni, con pubblico internazionale, e problemi di lentezza una soluzione pu√≤ essere quella di utilizzare una CDN. La CDN √® un sistema che consente di salvare la cache di una pagina e restituirla nel punto pi√Ļ vicino da dove viene richiesta migliorando la velocit√† del sito stesso e del caricamento.
Anche questo è un sistema per ottimizzare le immagini per la SEO

 

Ottimizzazione SEO immagini con WordPress

Fortunatamente non sempre bisogna inserire il codice manualmente.
WordPress, e quasi tutti i CMS, infatti permettono di inserire l’Alt e il Title in modo semplice e immediato.
L’unica accortezza che dovrete prendere è quella di nominare il file in modo corretto, prima di caricarlo sulla piattaforma.
Con WordPress è anche semplice inserire una didascalia . La didascalia, come noto, è un testo descrittivo posizionato al di sotto o a lato dell’immagine e che può fornire informazioni o dettagli aggiuntivi.

Ottimizzare le immagini per wordpress per la SEO
 

Compressione immagini con il plugin EWWW Image Optimizer per WordPress

Se noti invece che il tuo sito è ancora lento a causa delle immagini non compresse, utilizza EWWW Image Optimizer un plugin WordPress molto potente. Questo plugin è in grado di comprimere le immagini che hai già caricato sul tuo sito senza alterarne la qualità.
 

WP ROCKET o Plugin alternativo per Lazy Load

Come anticipato il lazy load è un buon supporto per ottimizzare le immagini per il web. Se implementato correttamente, tramite tag e noscript, non si incorre in nessun problema SEO.
Una delle soluzioni migliori, a pagamento, che svolge questa funzione è sicuramente il plugin di cache WP Rocket per WordPress, di cui vi lascio la documentazione ufficiale e tecnica proprio su Lazy Load image e SEO.

 

Sitemap per le Immagini

Per essere indicizzate, è fondamentale aggiungere anche le immagini alla propria Sitemap.
Per i CMS esistono estensioni o plugin dedicati che creano automaticamente le Sitemap che dovranno essere poi inviate a Google tramite lo strumento Google Search Console, il buon vecchio Google Webmaster tools.
Alcuni di questi plugin creano sitemap dedicate solo per immagini.
 
sitemap immagini search console

 

Conclusioni sull’ottimizzazione SEO delle immagini

Con questo articolo ti ho spiegato come ottimizzare le immagini per il web. Non sottovalutare questo tipo di ottimizzazione SEO, √® utile per aiutarti a posizionarti meglio sui motori di ricerca e a rendere il tuo sito molto pi√Ļ veloce!