Ottimizzare le immagini per migliorare la SEO su Google

Ottimizzare immagini per il tuo sito web porta diversi benefici diretti e indiretti. Incide infatti sulla velocità di caricamento e, di conseguenza, sull’esperienza utente. E questo porta, sulla stessa base qualitativa per i tuoi contenuti, ad un migliore posizionamento su Google.

Siamo davanti all’aspetto più sottovalutato quando si parla di ottimizzazione dei contenuti di un sito web, vale per le pagine generiche, landing page, articoli di blog. Tutto.

In questo articolo voglio riassumere tutti gli aspetti da considerare: come comprimere le immagini, ridurre il peso delle immagini per il sito web senza che queste perdano qualità, il nome giusto da dare ai file e come andare a creare testo alternativo e didascalia in modo che le immagini dei tuoi articoli e delle tue pagine siano altrettanto curati come ogni lato del tuo sito web.

Potrebbe interessarti: realizzazione siti WordPress a Treviso

Dimensione delle immagini

Considerazione generale sulle dimensioni delle immagini: verifica sempre qual è la larghezza massima del contenitore di quell’immagine all’interno della pagina o dell’elemento su cui stai lavorando. Facciamo un paio di esempi pratici:

• il box autore, che di solito è presente in coda agli articoli del blog, contiene la foto – appunto – dell’autore di quell’articolo. Le dimensioni di quell’immagine non variano chissà quanto. Che sia desktop, mobile o tablet, per quanto responsive sia il layout, ipotizziamo che sia 200×200 pixel. Non ha senso, in questo caso, caricare una foto da 1080×1080 pixel, come quelle di Instagram in formato quadrato. Qui è il caso di fare editing dell’immagine prima di caricarla sul sito.

• analogamente, se la colonna che contiene l’articolo vero e proprio del blog arriva ad avere una larghezza massima di 800px, ha poco senso andare a caricare immagini larghe 1200px in partenza. Perché l’immagine non arriverebbe mai a quelle dimensioni, nemmeno sui dispositivi più grandi, proprio perché il limite è già fissato dal tema WordPress.

Trattandosi di template WordPress responsive, come ben sai, l’altra dimensione dell’immagine andrà a regolarsi in proporzione salvo specifici ritagli pre impostati del tema stesso che viene utilizzato.

Peso delle immagini

Per quanto riguarda il peso delle immagini devi tenere a mente giusto un paio di elementi. Nello specifico:

• il formato PNG pesa molto più del JPG, motivo per cui non ha senso usare PNG se non hai necessità di fondo trasparente
• in generale, il peso ideale delle immagini ottimizzate per siti web si aggira intorno ai 150 kilobytes. Non serve essere talebani, per carità. Considerala comunque una best practice.

Comprimere le immagini

Ora che sai come regolare le giuste dimensioni delle immagini per il tuo sito WordPress e sai qual è il peso ideale dei file da caricare, vediamo come ridurre il peso delle immagini con Photoshop e qualche altro tool gratuito, oltre che tramite plugin all’interno dello stesso WordPress che può aiutare a seconda dei casi.

Esportare immagini compresse per siti web con Photoshop

Per ridurre il peso delle immagini con Photoshop esiste una funzione apposita, chiamata Salva per Web. Permette di comprimere le immagini preservandone la qualità a parità di peso. Le esporta pronte per essere caricate nella libreria Media di WordPress. Io inizio sempre da qui.

Vai alla voce File del menu Photoshop, scorri fino a trovare Esporta > Salva per Web (potrebbe variare a seconda della versione di Photoshop che utilizzi). Nella schermata di esportazione, segui questi pochi passaggi:

1. nella sezione in alto a destra seleziona il formato di esportazione e regola il livello di compressione da 0 a 100. L’anteprima ti aiuterà ad avere chiaro il risultato finale. Io di solito mi fermo a 60, l’immagine resta di ottima qualità e il peso si riduce parecchio.
2. poco sotto, in basso a destra, definisci il ritaglio, le dimensioni dell’immagine. Cliccando sull’icona (come vedi) se modifichi la larghezza dell’immagine, l’altezza andrà in proporzione.
3. tieni d’occhio il peso finale dell’immagine che stai esportando. Torna ai punti precedenti per ritoccare dove reputi necessario fino a raggiungere il risultato che vuoi e conferma cliccando su Salva

Comprimere le immagini gratis con un tool online

Esiste un’infinità di siti gratis per comprimere le immagini. Te ne cito uno su tutti: I Love Img. Come si usa? Facilissimo: c’è un solo pulsante, ci fai click e carichi i file che servono. Avvia la compressione e in poco tempo questo tool riduce il peso delle immagini senza che perdano qualità o risoluzione.

Plugin WordPress per comprimere le immagini al caricamento

Per ridurre il peso delle immagini ulteriormente o per andare a intervenire su siti web già online dove questo aspetto dell’ottimizzazione è stato un po’ trascurato, si può installare un plugin come WP Smush, gratis e facilissimo da usare. Una volta installato, trovi la voce di menu nella colonna sinistra del backoffice di WordPress. Avviato il setup di configurazione di WP Smush, segui i pochi passaggi richiesti in modo da comprimere le immagini al caricamento su WordPress e ridurre il peso senza perdere qualità.

Per approfondire: plugin WordPress per comprimere le immagini (gratis)

Nome del file immagine

Veniamo ora ad un altro aspetto lasciato in secondo piano quando si tratta di ottimizzare le immagini per il posizionamento SEO su Google. Sai bene che Google ha una sezione anche per video e immagini nel suo motore di ricerca. Su quali informazioni si basa l’indicizzazione delle immagini sui motori di ricerca? Il primo fattore da considerare è il nome del file.

Ecco come deve essere il nome da dare il nome ai file immagine affinché siano di aiuto nel posizionamento SEO dei tuoi contenuti:

• breve, conciso
• descrittivo
• pensato con parole chiave prese dal contesto in cui si inserisce

Prendendo in esame questo stesso articolo, è chiaro che mi concentri su determinate parole chiave che descrivono l’articolo e per cui mi interessa rispondere agli utenti e posizionarmi in prima pagina su Google:

• ottimizzare immagini per Google
• comprimere immagini su sito WordPress (o sito web)
• ridurre il peso delle immagini per la SEO
• esportare immagini ottimizzate per il web con Photoshop
• nome dei file immagine per migliorare la SEO

In base al contesto in cui so di dover inserire quella precisa immagine nel mio contenuto, mi regolo di conseguenza per utilizzare determinate parole chiave invece di altre. Secondo quanto appena detto, i nomi dei file che carico nella mia libreria avranno nomi simili a questi:

• ottimizzare-immagini-seo-wordpress.jpg
• ridurre-peso-immagini-wordpress.jpg
• plugin-wordpress-comprimere-immagini.jpg
• esportare-img-web-photoshop.jpg
• siti-ridurre-peso-immagini-gratis.jpg

Le parole chiave da usare per i nomi delle immagini sono descrittivi di quello che è il contenuto dell’immagine ma rispecchiano le possibili domande che l’utente fa a Google e per cui mi interessa avere visibilità, migliorando il posizionamento in SERP dei miei articoli di blog o pagine di carattere più generale.

Attributo alt (testo alternativo) del tag img

L’attributo alt del tag img, conosciuto anche come testo alternativo o alt text, è un aspetto importante dell’HTML che viene utilizzato per descrivere le immagini presenti su un sito web. Questo attributo si applica all’interno del tag <img> e serve a fornire una descrizione testuale dell’immagine. Ecco un esempio di come si presenta:

<img src="immagine.jpg" alt="Descrizione dell'immagine">

A cosa serve l’attributo alt

L’attributo alt serve a diversi scopi fondamentali:

1. Accessibilità: Aiuta le persone con disabilità visive che utilizzano lettori di schermo a capire il contenuto delle immagini sul sito web. Senza un testo alternativo, queste persone potrebbero non essere in grado di comprendere il significato o il contesto dell’immagine.
2. Visualizzazione del testo quando l’immagine non può essere caricata: In alcuni casi, un’immagine potrebbe non caricarsi a causa di un problema di connessione o perché l’URL dell’immagine è errato. In questi casi, il testo alternativo verrà visualizzato al posto dell’immagine, fornendo almeno una descrizione di ciò che l’utente avrebbe dovuto vedere.

Come scrivere un buon alt text

Un buon alt text dovrebbe essere breve ma descrittivo. Deve fornire un senso del contenuto dell’immagine senza diventare troppo lungo o complicato. In generale, è meglio mirare a descrizioni sotto i 155 caratteri. Ecco alcuni suggerimenti:

1. Essere precisi: La descrizione deve riflettere il contenuto dell’immagine. Sfruttando ancora una volta l’esempio dell’articolo che stai leggendo, ecco che un buon alt text può essere Screenshot della schermata di Photoshop per esportare immagini ottimizzate. Oppure: Immagine di I Love Img, sito per comprimere immagini gratis
2. Evitare il riempimento di parole chiave: Mentre è vero che l’alt text può aiutare con la SEO, non dovresti riempire il tuo alt text con parole chiave irrilevanti. Questo potrebbe risultare in una penalizzazione da parte dei motori di ricerca.
3. Non utilizzare “immagine di” o “foto di”: I motori di ricerca e i lettori di schermo sanno già che stanno elaborando un’immagine, quindi non c’è bisogno di specificarlo.

L’alt text e la SEO

L’attributo alt può aiutare a migliorare la SEO del tuo sito in diversi modi:

1. Migliorare l’indicizzazione delle immagini: Google e altri motori di ricerca utilizzano il testo alternativo per capire il contenuto delle immagini e per indicizzarle in modo appropriato nei risultati di ricerca delle immagini.
2. Migliorare l’ottimizzazione on-page: L’alt text è un’opportunità per inserire le tue parole chiave target, purché siano pertinenti al contenuto dell’immagine. Questo può aiutare a migliorare l’ottimizzazione on-page del tuo sito per queste parole chiave.

Didascalia

La didascalia dell’immagine, nota anche come caption in inglese, è un breve testo descrittivo che appare sotto un’immagine su un sito web per spiegare cosa l’immagine rappresenta o per fornire un contesto. In WordPress, quando carichi un’immagine, hai la possibilità di aggiungere una didascalia direttamente dalla libreria Media o dall’editor di Gutenberg.

Importanza della didascalia

La didascalia di un’immagine gioca un ruolo importante nell’esperienza dell’utente. Questo breve pezzo di testo può migliorare la comprensione del lettore del contenuto dell’immagine e del suo contesto rispetto al resto del contenuto della pagina. Una buona didascalia può anche aumentare il tempo di permanenza dell’utente sulla pagina, poiché fornisce informazioni supplementari e pertinenti.

Inoltre, sebbene la didascalia di un’immagine non abbia un impatto diretto sulla SEO come il tag alt, può comunque influenzare indirettamente il ranking di una pagina. Poiché la didascalia migliora l’esperienza dell’utente, può ridurre il tasso di rimbalzo del sito e aumentare il tempo di permanenza, entrambi fattori che i motori di ricerca considerano quando classificano una pagina.

Come scrivere una buona didascalia

Una buona didascalia dell’immagine deve essere breve e pertinente. Dovrebbe spiegare cosa l’immagine mostra e come si collega al contenuto circostante. Ecco alcuni suggerimenti su come scrivere una didascalia efficace:

1. Mantienila breve e concisa: Una didascalia non dovrebbe essere troppo lunga. Dovrebbe essere un complemento dell’immagine, non un saggio.
2. Rendi pertinente: Assicurati che la tua didascalia sia pertinente all’immagine e al contenuto circostante.
3. Aggiungi parole chiave quando appropriato: Mentre le didascalie delle immagini non sono un luogo primario per l’ottimizzazione delle parole chiave, se esiste un modo naturale e pertinente per includere le tue parole chiave, fallo.
4. Evita il riempimento di parole chiave: Non riempire le tue didascalie con parole chiave. Questo può risultare spammy e potrebbe danneggiare la tua SEO.

Come Aggiungere una didascalia in WordPress

Aggiungere una didascalia in WordPress è un processo semplice. Quando carichi un’immagine nel Media Library, vedrai un campo caption. Tutto ciò che devi fare è inserire il tuo testo in questo campo. Puoi anche aggiungere o modificare didascalie direttamente dall’editor di post o di pagina. Basta cliccare sull’immagine e poi cliccare sull’icona penna per modificare le impostazioni dell’immagine. Troverai il campo caption lì.

Attributo title del tag immagine

L’attributo title del tag img viene utilizzato per fornire informazioni supplementari sull’immagine. Appare come un testo a comparsa (o tooltip) quando l’utente posiziona il cursore sopra l’immagine.

Che differenza c’è tra alt text e title?

Mentre il tag alt è principalmente destinato all’accessibilità e alla SEO, fornendo una descrizione testuale dell’immagine per i lettori dello schermo e i motori di ricerca, l’attributo title è più orientato all’esperienza dell’utente, fornendo ulteriori dettagli o contesto. Tuttavia, non ha un impatto significativo sulla SEO come l’attributo alt.

Come deve essere scritto l’attributo title del tag img?

L’attributo title di un’immagine dovrebbe contenere un breve testo descrittivo che offre un contesto o dettagli sull’immagine. Si visualizza come un “tooltip” quando l’utente passa sopra l’immagine con il mouse.

Ecco alcuni consigli per scrivere un title efficace:

1. Mantieni il titolo breve e preciso: il tuo title dovrebbe avere meno di 60 caratteri e fornire un contesto significativo.
2. Rendi il titolo descrittivo: dovrebbe fornire dettagli aggiuntivi sull’immagine senza ripetere ciò che è già nel tag alt o nel testo circostante.
3. Usa un linguaggio chiaro: evita termini tecnici, a meno che non siano strettamente pertinenti.

Ecco un esempio di attributo title:

<img src="ridurre-peso-immagini-wordpress.jpg" alt="Tutorial per ridurre il peso delle immagini su WordPress" title="Come ridurre il peso delle immagini per migliorare il posizionamento SEO">

Conclusioni

Sono giunto alla fine di questa guida all’ottimizzazione delle immagini per Google e i motori di ricerca. Sono entrato nel dettaglio di tutti i trucchi, tutte le best practice di cui tenere conto per ridurre il peso delle immagini, dare il giusto nome ai file, sfruttare title, didascalia e attributo alt del tag img per arricchire il set di parole chiave all’interno di ogni elemento dell’articolo o della pagina del tuo sito per cui intendi migliorare il posizionamento SEO e ambire alla prima pagina su Google. Spero ti sia utile. Se hai ulteriori dubbi contattami e assumimi come consulente WordPress a Treviso per il tuo sito web.