Vuoi far apparire le immagini del tuo sito su Google? Ecco la guida per ottimizzare tutti i fattori di posizionamento delle immagini!
Ottimizzare le immagini di una pagina web è una parte fondamentale della SEO on site, vale a dire l’insieme di interventi che è possibile effettuare su un sito con l’obiettivo di favorire il suo posizionamento sui motori di ricerca.
In che modo SEO e immagini vanno a braccetto? I motivi per cui lavorare sull’ottimizzazione delle immagini sono sostanzialmente due:
- Molti business basano la propria visibilità organica proprio sulle immagini, ad esempio siti che operano nell’ambito travel. Pensate a quando state decidendo dove passare le vostre prossime vacanze e siete indecisi tra una destinazione e l’altra: una delle prime cose che farete sarà cercare su Google il nome di entrambe le destinazioni, per poi dare un’occhiata alle foto su Google Immagini. Ed è proprio tramite un’accurata ottimizzazione SEO delle immagini che potrete apparire in questa SERP. Lo stesso discorso può comunque valere anche per i siti e-commerce.
- Ottimizzare le immagini significa anche fare in modo che la loro presenza su una pagina web non vada a impattare in maniera negativa sui tempi di caricamento della stessa, fattore di ranking ormai parte integrante dell’algoritmo di Google.
Avrete dunque già capito che ottimizzare le immagini in ottica SEO è un procedimento che agisce su due fronti: quello semantico e quello delle performance.
Ecco quindi una semplice guida step by step alla SEO per immagini che vi permetterà di aumentare il posizionamento del vostro sito e conseguentemente anche le visite!
Nome del file immagine
Il primo passo per ottimizzare le immagini passa dal renaming del file. Spesso si tende a caricare sul proprio sito foto o immagini intitolate “IMG00001.jpg”, perdendo dunque un’occasione per caratterizzare il contenuto dell’immagine già attraverso questa componente.
Se state pianificando di aggiungere nuove immagini nelle pagine del vostro sito, assicuratevi dunque di rinominare i file seguendo queste semplici indicazioni:
- le parole che compongono il nome del file devono essere separate da trattini ( – ), meglio evitare gli underscore ( _ );
- evitare stopwords (articoli, preposizioni, ecc.);
- il nome dell’immagine deve essere parlante e includere una keyword attinente al contenuto della pagina (se possibile, fare in modo che la keyword sia all’inizio del nome del file).
Sulla base di queste semplici regole, l’immagine che rappresenta gli interni del Duomo di Milano potrebbe essere rinominata ad esempio “duomo-milano-interno.jpg”.
E se si tratta di immagini astratte? In questo caso suggeriamo di rinominare il file facendo in modo di inserirvi comunque delle keyword che siano coerenti con il contenuto della pagina (es: “ottimizzare-immagini-seo.jpg”).
Attributo alt (spesso chiamato “Tag” alt)
Una componente fondamentale per ottimizzare le immagini in ottica SEO consiste nella compilazione dell’attributo “alt” del tag “img”, ovvero il testo alternativo dell’immagine.
Premessa: l’alt è un attributo o un tag?
Prima di spiegare a cosa serve e come ottimizzare l’attributo alt, occorre fare una doverosa premessa. Spesso il testo alternativo viene identificato come un tag HTML, tuttavia non è proprio così: come troviamo ben spiegato qui, “all’interno di ogni pagina HTML sono presenti dei marcatori chiamati TAG. I tag servono a comunicare al Browser la tipologia di formattazione che si intende dare al contenuto della pagina”.
Un’immagine viene dunque mostrata sul browser per mezzo del tag img, mentre l’alt rappresenta un suo attributo, nello specifico il testo alternativo. Da un punto di vista di linguaggio HTML, appare così:
<img src=”https://sitoesempio.com/nome-file.jpg” alt=”Testo alternativo dell’immagine”>
A cosa serve e come ottimizzare l’attributo alt delle immagini?
L’attributo alt è fondamentale per i seguenti motivi:
- appare, in forma testuale, nel momento in cui il browser per qualche motivo non riesce a caricare l’immagine;
- viene letto dai lettori vocali dei browser per non vedenti;
- ha un buon impatto sul posizionamento dell’immagine su Google Immagini, a patto che il testo alternativo inserito sia coerente con l’immagine rappresentata.
L’attributo alt delle immagini rappresenta dunque la sede ideale dove inserire keyword (anche long tail) per le quali si vuole posizionare l’immagine, tuttavia non bisogna “forzare la mano” e cercare di essere il più possibile coerenti con quanto rappresentato.
Proseguendo con l’esempio citato nella sezione sul nome del file, l’attributo alt dell’immagine che rappresenta gli interni del Duomo di Milano può essere scritto come segue:
<img src=”https://sitoesempio.com/duomo-milano-interno.jpg” alt=”Interno del Duomo di Milano”>
Attributo title
L’attributo title del tag img è quello che appare nel momento in cui si posa il cursore del mouse su un’immagine. In HTML appare così:
<img src=”https://sitoesempio.com/nome-file.jpg” alt=”Testo alternativo dell’immagine” title=”Title dell’immagine”>
Lato SEO ha un impatto inferiore rispetto all’attributo alt, tuttavia può essere utile per aggiungere informazioni relative all’immagine ed espanderne il significato; per questo motivo deve essere compilato tenendo ancor più in considerazione il fatto che sarà l’utente, più che il motore di ricerca, a leggerlo.
<img src=”https://sitoesempio.com/duomo-milano-interno.jpg” alt=”Interno del Duomo di Milano” title-“Le navate laterali all’interno del Duomo di Milano”>
Contesto semantico dell’immagine
Ad impattare sul posizionamento SEO di un’immagine è anche il contesto all’interno del quale si trova.
Che cosa significa? Significa che occorre, ovviamente, prestare molta attenzione anche all’ottimizzazione di testi ed heading delle pagine che contengono le immagini che si vuole posizionare. Ancor meglio se l’immagine viene ottimizzata utilizzando le stesse keyword del paragrafo che la circonda.
In questo senso anche la didascalia dell’immagine assume un suo peso. Una buona pratica per risparmiare tempo consiste nell’utilizzare come caption lo stesso attributo title dell’immagine.
Dimensioni (in pixel) delle immagini
Prestate attenzione anche ai pixel di larghezza e altezza delle immagini. Capita molto spesso di trovare pagine web che utilizzano come risorse immagini molto più grandi del necessario.
In questo caso, il browser dell’utente provvederà ad effettuare automaticamente il resize dell’immagine per mostrare la pagina così come il webmaster l’aveva progettata; tuttavia, questo comporta un processo che contribuisce ad aumentare i tempi di caricamento necessari per effettuare il rendering completo della pagina, motivo per cui molti tool di pagespeed suggeriscono di “servire le immagini scalate” e dunque già della dimensione ottimale alla loro visualizzazione su browser.
Inoltre, immagini più piccole (in termini di pixel) pesano meno, motivo in più per curare questo aspetto spesso sottovalutato.
Peso dell’immagine
Last but not least, come dicevamo all’inizio anche il peso dell’immagine è una componente fondamentale da considerare. Più un’immagine è pesante, più il tempo richiesto per il suo download sarà elevato e, di conseguenza, più alti saranno i tempi di caricamento della pagina.
Un’immagine di dimensioni standard non dovrebbe superare i 100-120 Kb, tuttavia – anche a seconda dei colori contenuti dall’immagine – non sempre è possibile ridimensionare il peso delle foto e mantenere comunque una risoluzione soddisfacente.
Bisogna dunque utilizzare il buon senso e cercare di mediare le best practice SEO con quello che è l’obiettivo della pagina a prescindere dal posizionamento; in ogni caso, cercherei nel complesso di non sforare i 500 Kb per tutte le immagini presenti in pagina.
