Tutte le indicazioni per l'ottimizzazione SEO delle immagini
Quando si parla di SEO non bisogna lasciare davvero nulla al caso: testi, velocità di caricamento del sito web, evitare gli errori o comunque cercare di limitarli al minimo, ottimizzare le immagini e così via. In questa guida vedremo proprio come creare delle immagini ottimali, da un punto di vista SEO, per il proprio sito web, un task che a volte viene sottovalutato anche da chi è più esperto nel settore.
Ridimensionare le immagini e limitarne il peso
È vero che avere immagini di alta qualità sul proprio sito web è bello, ma se sono eccessivamente pesanti e impiegano tanti secondi per potersi caricare sono deleterie per l'esperienza dell'utente. Per questo motivo è importante riuscire sempre a trovare il perfetto equilibrio tra qualità della foto e velocità di caricamento, una cosa non sempre facile, nella quale, però, ci possono venire in aiuto i software di fotoritocco.
Tra i più famosi sicuramente ci sono Photoshop e Fireworks, tutti e due di casa Adobe, che se da un lato permettono di fare modifiche anche molto “estreme” delle proprie fotografie, dall'altro hanno lo svantaggio di costare diverse centinaia di euro, cosa che non tutti sono disposti a pagare.
La migliore alternativa gratuita è The Gimp, software open source che permette di avere una ottima elasticità sul ritocco a una foto o a un'immagine. Nella redazione di questo articolo ho usato proprio questo programma, come puoi vedere dagli screenshot. È disponibile per Windows, Mac e Linux.
Tornando all'argomento di questo testo, abbiamo iniziato a parlare del ridimensionamento delle immagini come prima fase del processo di ottimizzazione delle stesse, ma come procedere? Semplicemente, apriamo l'immagine usando The Gimp e usiamo lo strumento “Scala”, quello che vedi bordato di blu qui sotto.
Decidiamo la grandezza dell'immagine ridimensionata (è possibile scegliere varie unità di misura, come pixel, percentuale, centimetri e così via).
Il simbolo della catena di fianco ai numeri indica se, in maniera di ridimensionamento, mantenere le proporzioni o meno. Se la catena è chiusa, le proporzioni verranno mantenute, altrimenti no.
A questo punto scegliamo la nostra dimensione e clicchiamo su “Scala”.
Se l'immagine originaria è particolarmente grande potrebbe volerci un po', qualche secondo. Una volta fatto questo, clicchiamo con il tasto destro sull'immagine e scegliamo Immagine → Imposta la superficie ai livelli. In questa maniera avremo la superficie dell'immagine esattamente della stessa grandezza dei livelli.
Bisogna poi andare su File → Salva con nome per salvare la nuova immagine.
Il nome del file
Da un punto di vista SEO è fondamentale scegliere un buon nome del file. Dobbiamo ricordare che esso deve essere:
- descrittivo dell'immagine;
- ottimizzato, ad esempio se si decide di salvare un panorama di Londra è possibile usare come nome dell'immagine “panorama-londra”;
- se composto da più parole, ognuna delle stesse deve essere separata da un trattino.
Salviamo l'immagine andando in File → Esporta come, inseriamo il nome del file come detto prima e clicchiamo su salva.
La qualità dell'immagine
Si aprirà a questo punto una finestra in cui sarà possibile decidere la qualità dell'immagine. È da ricordare che a qualità maggiore corrisponderà un'immagine più pesante. Per il web non è fondamentale avere delle qualità perfette, a patto di non avere immagini sgranate.
Una buona qualità si aggira solitamente tra 80 e 85.
Per sicurezza, mettiamo la spunta su “Mostra l'anteprima nella finestra immagine” per avere un'idea di come sarà l'immagine una volta esportata.
Il consiglio è di partire da una qualità di 85 e continuare a scendere fino a che non si inizia a vedere l'immagine meno bella: quello sarà il limite oltre il quale non si potrà scendere.
Molto interessante è giocare con le opzioni avanzante.
Per la maggior parte delle volte sarà possibile usare la configurazione qui sopra, ma ovviamente è consigliato valutare sempre la qualità finale, immagine per immagine. La cosa bella di Gimp è che, a ogni modifica che si farà alle impostazioni avanzate, si avrà il peso stimato del file.
Prestiamo particolare attenzione a lasciare la spunta su “Salva dati EXIF”: vedremo tra poco che cosa sono e perché possono essere utili da un punto di vista SEO.
Una volta che avremo trovato la configurazione perfetta, clicchiamo su Esporta e il gioco è fatto.
I migliori formati e le differenze
In linea di massima, un'immagine per il web può essere pubblicata in 5 formati:
- tiff,
- jpeg,
- gif,
- png,
- webp.
È importante conoscerli tutti perché ognuno di essi si adatta bene a una tipologia diversa di immagine.
TIFF:
Si tratta di un formato proprietario di Adobe che supporta 24 canali, il massimo che una foto può avere. È un formato non adatto al web in quanto, proprio per la grande elasticità che permette di avere, è molto pesante.
JPG:
Si tratta del formato standard delle immagini per il web, il migliore per le foto in cui ci si può permettere di perdere un po' di qualità. Il formato effettua una compressione “lossy”, ovvero con perdita di informazione, pertanto la qualità finale viene un po' sacrificata in favore della leggerezza. È un formato usato principalmente per le fotografie e le immagini con tanti colori.
GIF:
È un'immagine che permette la trasparenza e può anche essere animata, il tutto applicando una forma di compressione che non perde dati. È usata in maniera particolare per le animazioni grafiche e per le immagini piccole, come le icone.
PNG:
È un formato di immagini che usa una compressione che non perde informazioni, pertanto è una delle più pesanti in assoluto tra quelle elencate in questa lista (seconda solo alla TIFF). Ci sono due tipi di file PNG:PNG-8, che possiamo paragonare alla GIF a 256 colori, e PNG-24, che invece possiamo paragonare alla JPG, ma senza compressione.
Il formato PNG si usa prevalentemente per le immagini che richiedono qualità e trasparenza allo stesso tempo, come i loghi.
WEBP:
Si tratta di un formato di immagini sviluppato appositamente per il web, creato da Google per il suo browser Chrome, e oggi supportato anche da Opera. Gimp supporta immagini WebP tramite un plugin. L'obiettivo di questo formato di immagine è quello di permettere un caricamento il più veloce possibile, anche a discapito della qualità.
Come vede un'immagine un motore di ricerca
Arriviamo ora alla parte un po' più tecnica di questo articolo, quella che tuttavia è più interessante da un punto di vista SEO: come vedono le immagini gli spider dei motori di ricerca?
Questi software sono pensati per leggere testo HTML, non per “decifrare” fotografie. Nonostante questo, poiché da un punto di vista SEO e dell'esperienza utente le immagini sono importanti, è fondamentale essere a conoscenza di ogni singolo aspetto del rapporto motore di ricerca-immagini.
Diciamo che, ad oggi, lo spider di Google non riesce perfettamente a capire qual è il contenuto di un'immagine.
A dirla tutta, non è proprio così, nel senso che Google riesce a riconoscere ad esempio l'immagine di un gatto, ma a livello di SEO questa capacità del motore di ricerca non ci interessa più di tanto.
Per caricare un'immagine in WordPress, bisogna cliccare su “Aggiungi Media” mentre ci si trova in fase di redazione del post. A questo punto bisogna cliccare su “Carica file”: sarà possibile sia selezionare l'immagine dal computer che trascinarla nella finestra che si aprirà. Dopo aver caricato l'immagine, sarà possibile vederla nell'elenco dei file multimediali del sito web e si potranno inserire le informazioni fondamentali per l'aspetto SEO della questione.
Il codice HTML di un'immagine è così formato:
<img src=”path/immagine.jpg” alt=”Descrizione dell'immagine” title=”Descrizione visibile con l'hover del mouse” />Da un punto di vista del ranking, abbiamo tre modi per far intuire a Google che cosa contiene la nostra immagine, e WordPress ci permette di agire su tutti e tre:
- il tag ALT
- l'attributo TITLE del tag IMG
- il testo attorno all'immagine.
Testo alternativo, didascalia e attributo “title”
Il testo alternativo di un'immagine (ALT) è la chiave fondamentale poiché è quello che lo spider di Google legge per capire che cosa rappresenta l'immagine. Per questo motivo deve essere ottimizzato (ma non bisogna esagerare) così da permettere a Google di capire esattamente il contenuto dell'immagine.
È molto importante anche inserire una buona didascalia, ovvero quella parte di testo che WordPress inserisce automaticamente sotto l'immagine e che funge da descrizione per l'utente. Essa presenta anche il vantaggio di aumentare il conteggio delle parole che fanno parte del testo e, essendo una singola frase, può essere ben ottimizzata a livello SEO (sempre senza esagerare).
Il titolo rappresenta il tag TITLE dell'immagine, quella frase che si vede quando si passa, con il mouse, sopra ad un file grafico. A livello SEO non ha grande influenza, è utile piuttosto per l'utente per capire che cosa rappresenta un'immagine, o per avere degli approfondimenti della stessa, nel caso in cui fosse necessario.
Il consiglio è sempre quello di non esagerare con l'ottimizzazione dei tag ALT e TITLE o della didascalia.
L'obiettivo finale è quello di fornire al motore di ricerca e all'utente un testo che sia chiaro e ben leggibile, non un'accozzaglia di keyword, che sono deleterie per l'esperienza utente e dannose da un punto di vista del posizionamento.
Si possono usare ALT, TITLE e Didascalia uguali?
In linea teorica sì, non ci sono problemi. D'altra parte, perché usare esattamente gli stessi testi quando è possibile scriverne tre diversi, ognuno ottimizzato per la sua specifica funzione?
Bisogna ricordare, infatti, che l'Alt serve principalmente a Google per capire che cosa rappresenta una data immagine, il tag Title è utile all'utente per avere una descrizione dell'immagine non appena ci passa sopra con il mouse, mentre la didascalia può essere la descrizione più lunga e completa, quella che più rappresenta l'immagine, e che è sempre visibile nel testo.
Il testo attorno all'immagine
Un motore di ricerca è in grado di intuire che cosa rappresenta un'immagine anche dal testo che la circonda. Ad esempio, se si parla di una mela e si inseriscono delle immagini all'interno del testo, è naturale inserire foto di questo frutto (potrebbero esserci delle varianti, come una mela poggiata su un tavolo, una mela che si trova ancora attaccata all'albero, una persona che morde una mela, ma il rotondo frutto è sempre protagonista).
Per cui, cura sempre con attenzione il testo che inserisci appena prima e appena dopo l'immagine, così da migliorare al massimo l'esperienza utente e dare alla tua foto una forza maggiore da un punto di vista SEO.
I tag Exif
Li abbiamo anticipati prima, Exif è l'acronimo di Exchangeable image file format e rappresenta una serie di metadati usati nelle fotocamere digitali che sono applicati ai file in formato JPEG e TIFF (non sono supportati dai file PNG e GIF).
Le informazioni che i metadati contengono sono, tra le altre, la data e l'ora in cui una foto viene scattata, le impostazioni della fotocamera (orientamento, apertura, lunghezza focale, velocità dello scatto, velocità ISO e il bilanciamento del bianco) e la posizione geografica dello scatto (solo per fotocamere che hanno il GPS integrato).
Da un punto di vista SEO, qualche tempo fa Matt Cutts, quando era ancora portavoce di Google, ha fatto sapere che il motore di ricerca avrebbe potuto potenzialmente usare i dati EXIF come fattore di ranking. Ecco il video in questione:
Al momento si tratta ancora solo di ipotesi, anche perché il concetto di metadata applicati a un'immagine rimane piuttosto fragile, in considerazione sia del fatto che possono essere manipolati, sia che tanti software di upload immagini che vengono usati oggi rimuovono queste informazioni già in fase di caricamento.
I migliori strumenti per ottimizzare le immagini con WordPress
Quando si parla di WordPress, ci sono tantissimi plugin che si possono usare per ottimizzare le immagini, ti elenco i migliori, iniziando da WP Smush, che permette l'ottimizzazione delle immagini già online e quelle che vengono caricate di volta in volta, fornendo un riepilogo dei MB che sono stati risparmiati grazie all'uso di questo plugin.
Plugin alternativo è EWWW Image Optimizer, che si occupa di ridurre automaticamente la dimensione delle immagini che si usano nel blog e permette inoltre di applicare una compressione “lossy” alle immagini JPG e PNG.
Uno dei migliori plugin in assoluto per la qualità della compressione che permette di avere è Imagify, molto semplice in fase di ottimizzazione, permette di alleggerire sia le immagini già caricate che quelle che vengono caricate di volta in volta, il tutto con un solo click. Anch'esso fornisce un riepilogo dei MB risparmiati.
Ottimizzare le immagini per la SEO, le conclusioni
Voglio concludere questo articolo ricordando, ancora una volta, l'importanza di ottimizzare le immagini per la SEO al fine di migliorare la velocità di caricamento del proprio blog WordPress.
Poiché la velocità incide sul posizionamento sui motori di ricerca, oltre che essere particolarmente apprezzata dagli utenti (un sito più veloce è più apprezzato e converte di più), ecco che le immagini sono un aspetto importante, da non sottovalutare mai.
Oltre a questo, avere delle belle immagini all'interno dei post alleggerisce la lettura e la rende più piacevole. E non c'è niente di più bello che invogliare un utente a leggere tutto quello che si è scritto, fino in fondo.
E se vuoi approfondire un altro aspetto molto importante delle immagini per il web ti consiglio di leggere il post Capire le regole del copyright e come ottimizzare le immagini web.