Guida all’Ottimizzazione SEO (e Non Solo) Delle Immagini per il Tuo Sito Web

I motori di ricerca si stanno adattando a questo fenomeno: oggi le immagini hanno un ruolo di primo piano nella ricerca, indicizzazione, catalogazione dei siti web e dei loro contenuti.

Ognuno di noi ha oggi una buona familiarità con questo fenomeno, basta fare una semplice ricerca su Google per vedere come le immagini abbiano un ruolo privilegiato nei risultati di ricerca.
Quindi le immagini offrono un enorme possibilità di generare visibilità e traffico dalla ricerca, sia per le ricerche web tradizionali, sia sfruttando la ricerca per immagini.

Nell’immagine di seguito mostriamo un classico risultato di ricerca per un termine generico. Si può vedere l’importanza attribuita da Google alle immagini, posizionando i risultati addirittura al primo posto.

Proprio per questo abbiamo deciso di dedicare un lungo post all’utilizzo corretto delle immagini in ottica di posizionamento SEO, alle opportunità che le immagini offrono in termini di visibilità, indicizzazione e posizionamento del tuo sito web.

UPDATE: Google valorizza ancora di più il ruolo delle immagini

E’ notizia di pochi giorni fa, il fatto che Google stia lavorando a modificare la visualizzazione dei SERP (ossia la lista dei risultati di ricerca) al fine di integrare nei risultati testuali anche delle immagini significative estratte dalla pagina indicizzata.
Di seguito mostriamo una immagine in anteprima dei nuovi SERP di Google per ricerche web, che integrano anche immagini nella lista dei risultati.

Arriviamo quindi al dunque e vediamo come ottimizzare le immagini del nostro sito web per sfruttare al massimo il potenziale di visibilità.

10 Consigli per Ottimizzare le Tue Immagini ed il Tuo Sito Web

Ecco allora 10 consigli (più o meno tecnici) da seguire per ottimizzare il vostro sito e sfruttare al massimo la Image Search.

1. Ottimizzate l’attributo ALT del tag IMG

Sembra complicato, ma non lo è. Innanzitutto consideriamo che se lavorate al vostro sito utilizzando un comune CMS (quale ad esempio Joomla, WordPress o Drupal) dovreste avere a disposizione un editor di testi per l’inserimento dei testi e delle immagini nel corpo del vostro documento. In questa fase dovreste avere la possibilità di inserire, oltre all’immagine appunto, il testo dell’attributo ALT.

L’attributo ALT di un immagine rappresenta l’alternativa testuale in caso il browser non riesca a visualizzare correttamente il file o nel caso l’utente stia usando uno screenreader (ad esempio, per utenti ipovedenti).

Nel linguaggio di programmazione HTML, l’attributo ALT è quella stringa di testo immediatamente successiva al nome del file.

<img src=”/logo.gif” alt=”HTML.it” width=”224″ height=”69″ />

In pratica questa tag serve a ottimizzare l’ associazione tra keyword e immagini, fornendo quindi un testo descrittivo a corredo dell’immagine. Inizialmente questo attributo è stato pensato per coloro che non possono visualizzare l’immagine (come appunto i motori di ricerca!), fornendo quindi una chiave di lettura testuale all’immagine. Questo dato rappresenta quindi un ottimo modo per fornire informazioni al motore e mogliorare il ranking sui motori di ricerca.
Quindi, se si vuole ottenere la priorità di visualizzazione dei propri prodotti sui motori di ricerca, è importante compilare gli ALT in maniera intelligente per ogni immagine presente nel sito, fornendo un testo chiaro e possibilmente ottimizzato in funzione dei nostri obiettivi e delle nostre keywords strategiche.

2. Nominare il file in maniera descrittiva e chiara

E’ molto importante la scelta del nome dell’immagine. Come tutti i testi presenti nel sito, anche questo testo rappresenta un’ottima opportunità per fornire indicazioni al motore di ricerca sul contenuto dell’immagine. Quindi il nome del file dovrebbe essere sufficientemente descrittivo per fornire al motore di ricerca una chiave di lettura dell’immagine, creando un’associazione tra immagine e contenuti.
Quindi se utilizziamo delle immagini che abbiamo scattato con la nostra fotocamera, il più delle volte avremo dei file con una denominazione del tipo DSC0099.jpeg
Sarebbe opportuno quindi rinominare il file in modo descrittivo, tipo ford_usata_2013.jpg, usando quindi parole chiave e testi descrittivi.

3. Non usare caratteri speciali nel nome dei file

Questo è un consiglio da vecchi nerd: evitare l’uso di caratteri speciali nel nome dell’immagine, tipo lettere accentate, asterischi, apostrofi, etc. Oltre a creare potenziali problemi di visualizzazione, questi caratteri speciali possono compromettere la corretta indicizzazione dell’immagine. E’ buona norma inoltre cercare di evitare spazi, sostituendoli con barrette (score o underscore, ossia barra meno o trattino basso).

4. Organizza il tuo materiale in modo coerente

L’organizzazione del materiale sul tuo sito non solo è una buona idea per ritrovare e catalogare il materiale e non perdere pezzi per strada, ma anche in ottica SEO. Eh si! Anche il nome della directory può servire a dare indicazioni ai motori di ricerca ed aiutarli ad indicizzare il tuo materiale. Cercate quindi di organizzare il materiale fotografico in directory con materiale simile: ad esempio, vacanze, casa, viaggi, etc.

Ultimo consiglio in merito all’organizzazione delle immagini. Se il vostro sito contiene immagini per adulti suggeriamo di separarle dalle immagini generiche dal sito. L’indicizzazione di queste immagini a carattere …riservato…può compromettere l’indicizzazione anche delle immagini…meno riservate.

5. Ridurre “il peso” del file (ed anche le dimensioni!)

Attenzione, con dimensioni del file intendiamo il peso in KB del file e non la dimensione ‘fisica’ in pixel, ossia la larghezza ed altezza dell’immagine. Anche se queste possono influire sul peso del file, in generale questo dipende da fattori come il tipo di formato, la risoluzione, la compressione, etc. Quindi un’immagine di uguali dimensioni in altezza e larghezza può avere peso (in KB!) diverso da un’altra immagini di stesse dimensioni.
Le dimensioni del file sono importanti in quanto influenzano il tempo di caricamento della pagina internet. Le statistiche riportano che i visitatori di un sito non sono disposti ad attendere più di 3 secondi per il caricamento di una pagina, inoltre alcune ricerche di Amazon hanno mostrato che ogni 100ms di ritardo nel caricamento di una pagina riduceva le vendite del 1% !
Se si considera che anche Google valuta i tempi di caricamento per stilare i ranking, è di fondamentale importanza ridurre al minimo le dimensioni dell’ immagine, nel rispetto della qualità di visualizzazione della stessa.

6. Scegliere il corretto formato per il file

Sono tre i tipi di file che si utilizzano solitamente per le immagini del web: JPEG, GIF e PNG.
E’ importante sapere le diverse caratteristiche e qualità di ogni tipo per utilizzarle al meglio.
In generale il formato delle immagini viene scelto basandosi su alcune considerazioni tecniche, che qui tralasciamo. Tuttavia occorre sapere che il miglior rapporto qualità / dimensioni del file si ottiene con il formato JPG / JPEG
Ad esempio, le immagini in JPEG possono essere compresse in maniera considerevole garantendo qualità di visualizzazione e ridotte dimensioni.
Infine ricordiamo che la risoluzione dei monitor è in generale di 72DPI quindi non ha senso usare risoluzioni maggiori di queste (lasciate le immagini a 300DPI al vostro grafico!!)

5. Ottimizzare (e utilizzare!) le didascalie

La maggior parte delle persone che creano siti web non considerano importanti le didascalie perchè non hanno alcuna correlazione diretta con i ranking dei motori di ricerca. In realtà non è proprio così. Più di una ricerca ha dimostrato come le didascalie, ossia l’inserimento di testi in prossimità delle immagini, siano visualizzati e letti dagli utenti ancora prima delle immagini stesse!
Questo significa che inserire delle didascalie pertinenti e accattivanti migliora sensibilmente (ossia riduce) la frequenza di rimbalzo della tua pagina, evitando che molti utenti fuggano dal sito istantaneamente e migliorando (in maniera indiretta) il ranking del sito.

6. Utilizzare le site map per immagini

Le sitemap per immagini servono per fare sì che i motori di ricerca indicizzino le immagini dei siti.
Per migliorare quindi il ranking del sito è importante aiutare i motori di ricerca includendo le immagini nelle sitemap del sito.
L’ottimizzazione delle immagini non è per niente un compito facile e richiede del tempo. Del resto, come in ogni strategia di web marketing, è di fondamentale importanza valutare i costi e i benefici tratti da tale ottimizzazione. Un immagine può valere più di tante parole ma solo se visualizzata.
Occorre quindi ricordare che la possibilità che un utente visualizzi la tua immagine è proporzionale al tempo speso per l’ottimizzazione della stessa.

7. Implementare correttamente il file robots.txt

Anche questo è un aspetto alquanto tecnico, ma molto importante. Il file

Il file robots.txt contiene delle regole utilizzate dai crawler (detti anche spider) per applicare restrizioni di analisi sulle pagine di un sito internet.
I web crawler sono dei software automatici programmati per effettuare ricerche ed indicizzazioni periodiche. Nella prima fase di analisi di un sito web controllano l’esistenza del file robots.txt per applicare eventuali restrizioni richieste dal webmaster del sito.
Verificare quindi che non siano presenti restrizioni alle immagini da parte dei crawler dei motori di ricerca. Per nostra esperienza, Joomla ad esempio installa di default un file robots.txt con la directory delle immagini bloccate. Consigliamo in questo caso quindi di modificare il file robots.txt (chiedici come)

8. Specificare sempre l’altezza e la larghezza delle immagini

Il tag IMG prevede anche WIDTH e HEIGHT come attributi. E’ importantissimo specificare questi dati per aiutare i browser a renderizzare meglio e più velocemente la pagina web ancora prima che tutti i documenti e tutte le immagini siano scaricate. Specificare queste dimensioni può quindi aiutare il browser a caricare la pagina, migliorando l’esperienza degli utenti e migliorando la velocità di caricamento, con effetti positivi quindi sulla qualità ed usabilità del sito.

<img src=”/logo.gif” alt=”HTML.it” width=”224″ height=”69″ />

9. Velocità del sito

Già dal 2010 Google utilizza la velocità di caricamento di un sito come segnale della qualità dello stesso. Inoltre la velocità di caricamento del sito può avere impatti importanti sui rimbalzi e sulle conversioni: come già detto, Amazon rileva che ogni 100 ms di rallentamento nel caricamento di una pagina può portare ad una riduzione delle vendite online del 1%
Le immagini sono gli elementi che più possono influire sulla velocità di caricamento di un sito, come vediamo dalla figura, quindi l’ottimizzazione delle immagini può avere un impatto significante sulla qualità del sito.

Di seguito vediamo che impatto hanno le immagini nel caricamento di una pagina tipo:

Le tecniche per ridurre questi valori, ossia il tempo di caricamento delle immagini sono molte, tra cui

• Riduzione dei file, ad esempio compressione
• Utilizzo degli sprite
• Utilizzo della cache

10. Non inserire testo nelle immagini

Infine un consiglio da webdesign: non inserite testo nelle immagini, ma usate l’HTML per i contenuti testuali. Inserire testo nelle immagini od utilizzare quest’ultime al posto del testo (ad esempio nei titoli, nei menu, etc.) è il modo peggiore di usare le immagini!
Per assicurare il massimo dell’usabilità, spiderabilità, qualità del sito, il testo dovrebbe essere inserito utilizzando il regolare HTML, lasciando alle immagini il compito solo di visualizzare…