Come ottimizzare le immagini per la seo

Abbiamo spesso parlato di contenuti testuali ottimizzati per favorire il posizionamento sui motori di ricerca ma, nelle nostre pagine web, oltre al testo ci sono anche le immagini. Google ha un’intera sezione del suo motore dedicata alla ricerca per immagini “Google Immagini”. È abbastanza evidente quindi, che esistono regole precise per ottimizzare le immagini in ottica SEO.

Google sottolinea che l’ottimizzazione delle immagini, aiuta anche a comprendere il contenuto e il contesto delle pagine web, migliorando l’esperienza utente: immagini pertinenti riducono il tasso di rimbalzo e prolungano la permanenza sul sito. Ottimizzare le immagini, quindi, non solo potenzia la SEO, ma arricchisce l’interazione con l’utente.

Nei prossimi paragrafi esploreremo come inserire e ottimizzare le immagini per massimizzare i benefici.

Posizione delle immagini

È sempre bene posizionare le immagini vicino alle frasi cui si riferiscono. Se, ad esempio, all’interno di un articolo dedicato alle pentole da cucina stiamo parlando di una pentola a pressione sarebbe utile mettere questa fotografia vicino al paragrafo che parla dell’oggetto illustrato. È importantissimo studiare la correlazione tra testo e fotografia associata. E dopo averla posizionata, è utile aggiungere una didascalia: in media, infatti, questi piccoli testi – all’apparenza insignificanti – sono più letti del corpo del testo, addirittura tre volte più dell’articolo stesso. Nell’economia delle nostre pagine, quindi, bisogna tenere ben in mente l’importanza di questo dato per comprendere quando sfruttarlo al meglio.

Elementi HTML per incorporare le immagini

Per facilitare i crowler nell’individuazione e indicizzazione delle immagini del vostro sito web, è sempre consigliabile utilizzare elementi HTML standard come il tag <img>. Quest’ultimo, utilizza l’attributo ‘src’ per inserire il percorso della cartella dove è stata caricata l’immagine, che dovrà essere all’interno del vostro spazio web. Un esempio di sintassi html per l’inserimento dell’immagine è la seguente:

<img src="https://www.semfly.it/cartella-immagini/esempio.jpg">

Formati immagine supportati da Google

La ricerca di Google supporta le immagini nei seguenti formati: Jpeg, Png, WebP, Svg, Bpm e Gif. Alcuni formati offrono vantaggi unici in termini di qualità e dimensioni del file. Di seguito elenchiamo i più utilizzati in base al tipo di utilizzo:

WebP: Si tratta di un formato relativamente nuovo proposto da Google, permette di creare immagini di dimensioni inferiori del rispetto a JPEG e PNG, ma con una qualità comparabile. È ottimo per ridurre i tempi di caricamento delle pagine e migliorare la velocità del sito, quindi ne consigliamo l’implementazione.

JPEG (Joint Photographic Experts Group): Questo formato è ideale per fotografie e immagini con gradienti di colore complessi. Offre un buon equilibrio tra qualità dell’immagine e dimensioni del file, consentendo una compressione significativa che riduce il tempo di caricamento senza un’eccessiva perdita di qualità.

PNG (Portable Network Graphics): PNG è ideale per immagini che richiedono trasparenza o che hanno dettagli grafici nitidi come loghi e grafiche web. Supporta la trasparenza e non perde qualità con la compressione, ma tende ad avere dimensioni di file maggiori rispetto a JPEG.

SVG (Scalable Vector Graphics): Gli SVG sono particolarmente utili perché si ridimensionano perfettamente per qualsiasi dispositivo, mantenendo la nitidezza a qualsiasi dimensione e risoluzione. Ideale per icone, loghi e altre immagini vettoriali. 

Per caricare immagini in formato webP potete consultare la pagina dedicata di Google, questa guida di web.dev, oppure, se avete un sito realizzato con Wordpress, potete utilizzare un semplice plugin come EWWW Image optimizer.

Comprimere le immagini senza perdere qualità

La velocità di caricamento di una pagina web è un fattore importante sia per la SEO che per gli utenti, per questo motivo è fondamentale che le immagini vengano adeguatamente compresse, possibilmente senza sacrificarne la qualità visiva. 

Tecniche di compressione delle immagini:

• Lossy: Questo metodo permette di ridimensionare le immagini di grandi dimensioni eliminando alcuni dati del file, questa perazione può influenzare la qualità. È efficace per le immagini fotografiche e può essere utilizzato quando una leggera perdita di qualità è accettabile per ottenere dimensioni di file significativamente ridotte.
• Lossless: La compressione lossless riduce il peso delle immagini senza perdere dettagli o qualità. È ideale per immagini con testo o quando è essenziale mantenere un’integrità visiva ottimale.

Alcuni strumenti utili per la compressione:

Molti strumenti online e software possono ridurre il peso delle immagini mantenendo una buona qualità visiva. Ecco alcuni esempi:

• TinyPNG/TinyJPG: strumenti online che usano una tecnica di compressione intelligente per ridurre le dimensioni dei file PNG e JPEG.
• FastStone Photo Resizer: è un software che permette di convertire, rinominare, ridimensionare, ritagliare, ruotare, cambiare colore delle immagini, aggiungere testo e filigrane alle immagini in modo rapido ed efficiente. Supporta una vasta gamma di formati di file immagine e offre un’interfaccia intuitiva con funzioni di elaborazione batch per gestire più immagini contemporaneamente.
• Photoshop: offre opzioni per regolare la qualità dell’immagine durante il salvataggio in formati come JPEG, permettendo di bilanciare qualità e dimensioni del file.

Qual è quindi il modo migliore per comprimere le immagini? Non esiste una risposta univoca, dipende dagli obiettivi di ciascun sito. Un sito contenente un portfolio fotografico, dove la qualità delle immagini è fondamentale, verrà gestito diversamente rispetto ad un blog di informazione dove invece è fondamentale la velocità di caricamento della pagina. In ogni caso è importante bilanciare la qualità visiva con la velocità di caricamento. Consigliamo di testare le immagini su vari dispositivi per garantire una visualizzazione ottimale su tutte le piattaforme e le risoluzioni di schermo.

Ottimizzazione seo immagini: attributi alt e title

Per ottimizzare le immagini in ottica SEO, una delle attività da non dimenticare riguarda la corretta compilazione dell’attributo alt (o alt text) e dell’attributo title. Questi attributi svolgono un ruolo fondamentale nell’aiutare utenti e motori di ricerca a comprendere il contenuto delle immagini.

Cos’è l’attributo alt e perchè è importante

L’attributo alt, erroneamente definito anche tag alt, permette di inserire un testo alternativo o alt text all’interno dei file immagine. Nasce con l’obiettivo di descrivere il contenuto delle immagini agli utenti con disabilità visive (che utilizzano lettori di schermo), o per quelli con problemi di visualizzazione delle immagini nel browser. Il testo contenuto in questo attributo è fondamentale anche per la SEO, in quanto aiuta i motori di ricerca come Google, a comprendere il contenuto dell’immagine.

Come scrivere un alt text efficace:

• Siate descrittivi: l’alt text delle immagini deve essere compilato con parole chiave pertinenti che descrivano il contenuto in modo chiaro e conciso. In questo modo gli utenti non vedenti potranno ottenere una comprensione equivalente e le immagini si posizioneranno meglio nei risultati di ricerca.
• Includete keyword rilevanti: integrate nell’alt text parole chiave rilevanti per cui desiderate che la pagina o l’immagine si posizioni, ma evitate il keyword stuffing. L’uso naturale dei termini adeguati nel contesto della descrizione dell’immagine, a livello SEO è essenziale.
• Evitate frasi ridondanti: non iniziate mai l’alt text con frasi tipo “immagine di…” o “foto di…” etc etc. I lettori di schermo premettono a queste frasi la parola “Immagine…”, quindi scrivere l’alt text iniziando con questi termini potrebbe risultare ridondante e ridurre la chiarezza del messaggio.
• Evitate di scrivere alt text troppo lunghi: non scrivete elenchi di parole chiave senza senso o testi troppo lunghi, potrebbe essere visto come spam e danneggiare il vostro posizionamento.

Esempi di un buon alt text:

Per l’immagine di un gatto grigio sul davanzale della finestra, ad esempio, invece di scrivere “immagine di…..”,  potreste compilare l’alt text come segue:

<img src="https://www.semfly.it/gattino.jpg" alt="Gatto grigio sul davanzale della finestra">

Per l’immagine di una T-shirt, potreste utilizzare ad esempio “T-shirt in cotone organico blu”, descrivendo così caratteristiche rilevanti come il colore e il materiale.

<img src="https://www.semfly.it/t-shirt.jpg" alt="T-shirt in cotone organico blu">

L’attento impiego dell’alt text non solo migliora il vostro sito dal punto di vista SEO, ma lo rende anche un luogo più inclusivo ed accessibile, ampliando il pubblico e migliorando l’esperienza utente.

Cos’è l’attributo title e come utilizzarlo

L’attributo title delle immagini HTML è opzionale e fornisce informazioni aggiuntive sull’immagine quando un utente passa il mouse sopra di essa. Questo attributo può essere utilizzato per vari scopi, tra cui migliorare l’accessibilità e fornire informazioni contestuali o supplementari.

Caratteristiche principali dell’attributo title:

1. Descrizione Testuale: L’attributo title può contenere una breve descrizione o spiegazione dell’immagine, che viene visualizzata come tooltip quando l’utente passa il mouse sopra l’immagine.
2. Accessibilità: Anche se l’attributo title non sostituisce l’attributo alt in termini di accessibilità, può comunque fornire informazioni utili. Gli screen reader possono leggere il contenuto del title, ma non tutti lo fanno in modo uniforme, quindi l’uso dell’attributo alt rimane fondamentale.
3. SEO: Anche se non ha un impatto diretto sul posizionamento SEO, l’uso appropriato dell’attributo title può migliorare l’esperienza utente, il che indirettamente può avere effetti positivi sulla SEO.
4. Esperienza Utente: Fornire informazioni aggiuntive sull’immagine tramite l’attributo title può migliorare l’esperienza utente, offrendo contesto o dettagli che potrebbero non essere immediatamente evidenti dall’immagine stessa.

<img src="https://www.semfly.it/esempio.jpg" alt="descrizione immagine" title="Informazioni immagine">

In sintesi, l’attributo title delle immagini può arricchire l’esperienza utente fornendo informazioni aggiuntive e contestuali, ma non dovrebbe mai sostituire l’uso corretto dell’attributo alt per l’accessibilità e la descrizione delle immagini.

Nome dell’immagine

1. Definizione: Il nome dell’immagine si riferisce al nome del file immagine, come “immagine.jpg”, “foto.png” o “grafico.gif”.
2. Utilizzo: Questo nome è utilizzato nel percorso (path) del file quando viene referenziato nel codice HTML o CSS.
3. Posizione nel Codice: È specificato nell’attributo src dell’elemento <img>.
4. Importanza: Un nome di file descrittivo può aiutare con l’organizzazione dei file e avere un piccolo impatto SEO, poiché i motori di ricerca possono considerare il nome del file.

Di seguito un esempio:

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

Importanza del nome dell’immagine per la SEO:

• Rilevanza del contenuto: un nome di file descrittivo fornisce ai motori di ricerca indicazioni chiare sul contenuto dell’immagine, facilitando l’associazione dell’immagine con query di ricerca pertinenti.
• Indicizzazione delle immagini: i nomi dei file aiutano i motori di ricerca a catalogare le immagini in modo più efficace e a mostrarle per argomenti pertinenti.

Consigli per scegliere nomi immagini efficaci:

• Usate keywords descrittive: includete parole chiave rilevanti che descrivano l’immagine e siano in linea con il contenuto della pagina. Questa pratica aumenterà la probabilità di posizionamento nei risultati di ricerca pertinenti.
• Evitate nomi di file generici: evitate nomi immagine che non hanno alcun significato, come ad esempio “immagine1.jpg”, “foto.jpg” o “DSC_56438-24”. Usate una descrizione breve ma informativa.
• Usate i trattini per separare le parole: i trattini sono interpretati come spazi dai motori di ricerca, migliorano la leggibilità dei nomi dei file. Evitate l’uso di underscore o spazi vuoti.
• Mantenete la brevità: anche se è importante essere descrittivo, un nome di file troppo lungo può essere controproducente. Cercate di limitarvi a pochi ma significativi termini .

Adottando queste poche e semplici regole per nominare i file immagine, potete migliorare sia l’indicizzazione che la rilevanza degli stessi, contribuendo ad una strategia SEO più robusta e a una migliore visibilità del sito web nei risultati di ricerca.

Sitemap di immagini

Utilizzare una sitemap per le immagini facilita i motori di ricerca come Google, nell’indicizzazione delle stesse. È particolarmente utile per i siti che contengono un numero elevato di elementi multimediali, poiché aiuta i crawler a trovare tutte le immagini e a comprenderne il contesto. Creare una sitemap dedicata alle immagini permette di includere dettagli specifici che possono migliorare il posizionamento SEO delle immagini stesse. Di seguito la guida di Google alla creazione di sitemap per immagini.

Vantaggi SEO:

• Aumenta la probabilità che le immagini del sito vengano trovate e visualizzate nei risultati della ricerca per immagini di Google.
• Aiuta ad ottenere un traffico più qualificato grazie alla possibilità per gli utenti di trovare immagini specifiche legate ai contenuti del sito.

Indicizzazione delle immagini

Far correttamente indicizzare le immagini su Google è fondamentale per il loro posizionamento, in quanto ogni immagine, per potersi posizionare deve necessariamente prima essere indicizzata. Verificate inoltre che le immagini non siano bloccate dal file robots.txt, poiché questo potrebbe impedire la scansione da parte dei motori di ricerca, compromettendo l’indicizzazione..

Best practices per ottimizzare l’indicizzazione:

• Assicurati che le immagini non siano troppo pesanti o di dimensioni eccessive, poiché questo può influenzare negativamente sia il tempo di caricamento sia l’indicizzazione.
• Usa immagini di alta qualità e assicurati che siano visivamente accattivanti e pertinenti al contenuto associato. Immagini nitide e ben formattate sono più probabili di essere visualizzate nei risultati di ricerca.
• Considera l’uso di immagini adattabili e responsive, specialmente per siti che ricevono molto traffico da dispositivi mobili.

L’ottimizzazione SEO delle immagini e la corretta implementazione di una sitemap, non solo aiutano le immagini a posizionarsi meglio nei risultati di ricerca, ma migliorano anche l’esperienza complessiva degli utenti.

Gestione delle immagini in WordPress

Le immagini inserite in WordPress possono generare automaticamente pagine di allegato, creando così contenuti duplicati e di scarso valore per i motori di ricerca. Queste pagine contengono solo l’immagine e poco altro, risultando quindi inutili e dannose per la SEO.

Per evitare questo problema è possibile utilizzare il plugin Yoast SEO, che permette di reindirizzare automaticamente le pagine degli allegati all’immagine che l’ha generata.

Ecco come configurare il plugin:

1. Vai alla sezione “Yoats SEO” nel pannello di amministrazione di WordPress.
2. Seleziona “Impostazioni”.
3. Sotto la scheda “Avanzate” e “Media Page” attiva l’opzione disattiva Media Page.

Questa configurazione aiuterà a prevenire la creazione di contenuti di scarso valore, migliorerà l’esperienza utente e l’indicizzazione del sito.

Immagini e responsive design

La corretta implementazione di un design responsive è fondamentale sia per ottimizzare la performance SEO sia l’esperienza utente. Un sito con una buona UX user experience permette di visualizzare immagini correttamente dimensionate e formattate per ogni tipo di dispositivo, riducendo la frequenza di rimbalzo e aumentando il tempo di permanenza sul sito.

Tecniche per implementare immagini responsive:

• Utilizzo di elementi <picture> e attributi srcset: l’elemento HTML <picture> permette di definire più fonti per un’immagine, consentendo al browser di scegliere la versione più appropriata in base alla dimensione dello schermo. L’attributo srcset in un tag <img> può essere utilizzato per lo stesso scopo, specificando diverse versioni dell’immagine per diverse larghezze di schermo.
• Impostazione di dimensioni relative: usate unità relative come percentuali per la larghezza delle immagini anziché unità fisse. Questo permette alle immagini di adattarsi alla larghezza del contenitore, rendendo il layout più flessibile e adatto a vari dispositivi.
• Ottimizzazione tramite CSS: utilizzate il CSS per controllare ulteriormente le dimensioni delle immagini e garantire che si adattino bene in contesti diversi. Le regole di media query possono aiutare a modificare le dimensioni delle immagini in base alle specifiche condizioni, come l’orientamento del dispositivo o la larghezza della viewport.

Best practices per le dimensioni delle immagini:

• Testare su più dispositivi: Prima di finalizzare il design del sito, testa come le immagini appaiono su diversi dispositivi per assicurarti che le dimensioni siano gestite correttamente.
• Aggiornare periodicamente le tecniche: Le pratiche di ottimizzazione delle immagini possono evolvere con le nuove tecnologie, quindi è importante rimanere aggiornato su queste tendenze e modificare le tue strategie di conseguenza.

Lazy loading: migliorare la velocità di caricamento della pagina

Il lazy loading è una tecnica di ottimizzazione che ritarda il caricamento delle risorse non essenziali, come ad esempio le immagini, fino a quando sono necessarie. Le immagini su una pagina web vengono caricate solo quando l’utente scorre e si avvicina alla loro posizione, anziché tutte insieme al momento del caricamento iniziale. Questo evita che le immagini fuori dallo schermo occupino banda e rallentino il tempo di caricamento della pagina, migliorando così le prestazioni e il posizionamento del sito.

Implementazione del lazy loading:

• Utilizzo di attributi HTML nativi: recenti aggiornamenti HTML hanno introdotto l’attributo loading per il tag <img>, dove loading=”lazy” permette di implementare il lazy loading senza necessità di JavaScript.
• Librerie JavaScript: per i browser che non supportano ancora l’attributo loading, si possono utilizzare librerie JavaScript come lazysizes o Lozad.js per implementare il lazy loading.
• Testare l’implementazione: dopo aver implementato il lazy loading, è essenziale testare la pagina in diversi ambienti e dispositivi per assicurarsi che le immagini si caricano correttamente quando l’utente scorre la pagina.

Consigli per il corretto funzionamento:

• Verifica della compatibilità del browser: assicurati che l’implementazione funzioni correttamente su tutti i browser utilizzati dai tuoi visitatori.
• Monitoraggio dell’efficacia: utilizza strumenti come Google PageSpeed Insights o Lighthouse per valutare l’impatto del lazy loading sulle prestazioni della pagina.
• Attenzione all’UX: assicurati che il lazy loading non interferisca negativamente con l’esperienza utente, specialmente per contenuti visivi importanti che dovrebbero catturare immediatamente l’attenzione dell’utente.

Misurare il successo dell’ottimizzazione delle immagini

Una volta implementate le strategie di ottimizzazione delle immagini, è necessario misurare l’efficacia di queste modifiche per valutare l’impatto sulla performance del sito e sulla SEO. Analizzare i risultati può aiutarti a capire se le tue ottimizzazioni stanno contribuendo al successo del sito o se sono necessari ulteriori aggiustamenti. È sempre bene comunque, visti i continui cambiamenti, tenere monitorate le best pactice di Google per la gestione delle immagini in ottica SEO.

Strumenti e metriche per valutare l’efficacia delle immagini ottimizzate:

• Google Analytics 4: Utilizza Google Analytics per tracciare le fonti di traffico, inclusi i visitatori che arrivano tramite Google Images. Questo strumento può fornire dati preziosi sul comportamento degli utenti, come il tempo di permanenza sulla pagina e il tasso di rimbalzo, che possono indicare l’efficacia delle tue immagini.
• Google Search Console: Monitora le prestazioni delle tue immagini nelle SERP con la Google Search Console. Controlla l’indice di visibilità delle immagini, le impressioni e i clic per capire come le immagini ottimizzate stanno migliorando il tuo ranking.
• Google PageSpeed Insights: Verifica la velocità di caricamento delle tue pagine con Google PageSpeed Insights. Questo strumento aiuta a identificare se le immagini ottimizzate stanno influenzando positivamente la velocità del sito, un fattore importante per il ranking SEO.