Qualche regola per trattare le immagini di un sito in ottica SEO

Lo scontro per la visibilità online sui motori di ricerca richiede sempre di essere curiosi e attenti anche per il più insignificante dettaglio, che spesso significa anche perdere un bel po’ di tempo nelle fasi di lavoro sul proprio sito, lo so, ma qualunque piccolo aspetto può fare la differenza.

Un caso classico: ottimizzare una pagina web con i più corretti headings (sottotitoli H1, H2, H3, H4 e così via), spaziando per bene i paragrafi e studiando le parole chiave centrali, quelle correlate, i sinonimi… per poi dimenticarsi di prestare attenzione alle immagini.

Le immagini costituiscono un elemento aggiuntivo fondamentale per l’utente, che avrà un contesto visivo chiaro, immediato, che lo tratterrà più tempo sulla pagina; ma anche per i motori di ricerca, che comprenderanno con maggiore facilità di cosa parla quella pagina web. Ma gli spider di Google, per capire cosa viene rappresentato in un’immagine, devono basarsi su elementi precisi come il titolo, il tag alt (o testo alternativo).

Non mi voglio dilungare troppo, sulle immagini ci sarebbe tantissimo da dire. Ma mi limito a indicare pochissime buone pratiche per trattare le immagini di un sito web in maniera ottimale per la SEO onsite.

Cosa devi ricordare nell’uso delle immagini di un sito in ottica SEO

Dimensioni e peso dell’immagine

Prima di tutto, prendi l’immagine e trattala come si deve: scala la dimensione, riducendola. Solitamente per una pagina web può essere sufficiente una dimensione nel lato più grande tra gli 800 e i 1000px. Salvala in Jpeg (più leggero) o Png ma opportunamente dimensionato. Meglio ancora se sai usare formati nuovi, come il WebP (il quale però non è visibile in tutti i browser; puoi studiare l’argomento qui: https://developers.google.com/speed/webp).

Puoi anche avvalerti di programmini gratuiti come ImageOptim per Mac o ImageResizer (interamente online), con il quale riduci ulteriormente e automaticamente il peso delle immagini. Interessante anche uno strumento analogo a ImageResizer, che si chiama CompressJpeg.

Il funzionamento è banalissimo: basta trascinare con drag & drop o con caricamento una o più immmagini (anche massivamente fino a 20 immagini nello stesso momento) per comprire e alleggerire le immagini in formato jpeg, png, svg, gif ma anche PDF (molto interessante la possibilità di alleggerire anche i PDF più pesanti).

Nella realtà, ancor più che la larghezza o l’altezza in pixel delle immagini, conta infatti il peso. Per uno slider, infatti, potrai dover utilizzare immagini anche oltre i 1900px, ad esempio, viceversa l’immagine potrà risultare sgranata.

Conta molto di più il peso dell’immagine: di consueto, per un’immagine inserita normalmente in una pagina web, il consiglio è quello di non superare i 100 KB, salvo eccezioni in cui la qualità dell’immagine e la resa sono cruciali.

Rinominare il file da caricare sul sito

Rinomina l’immagine in maniera descrittiva e sensata, anche con un occhio alla SEO: il codice che assegna la macchina fotografica non va bene (es. GP_076), meglio “collana di perle girocollo” se parliamo di quel tipo di gioiello, ad esempio.

Titolo, Tag Alt, Didascalia e Descrizione

Una volta caricata l’immagine, in WordPress, in Shopify e in tantissimi altri CMS troviamo Titolo, Testo Alternativo e spesso anche Didascalia e Descrizione. Vediamo come trattarli.

• Compila il titolo avendo attenzione di indicare un testo breve che descriva l’immagine, anche in relazione alla pagina web in cui verrà pubblicato. Rimanendo sul nostro esempio di prima, potrebbe essere “Collana di Perle girocollo – [Nome Brand / Nome Modello]”. Meglio evitare lettere accentate o altri simboli strani, alcuni CMS non li digeriscono bene.
• Compila il Testo Alternativo o Tag Alt, in ottica SEO. Non c’è necessariamente un numero fisso di caratteri da dover rispettare, anche se online si legge di tutto. Puoi essere anche sufficientemente discorsivo, senza dubbio descrittivo e intercettare l’argomento chiave della pagina web, che l’immagine soddisfa. Nel nostro esempio, potrebbe essere qualcosa come “Collana di Perle girocollo Perle Akoya online – [Nome Brand]”. Si tratta di un esempio qualunque, ci possono essere infiniti modi di compilare il tag alt, a seconda degli obiettivi che ti prefiggi, dell’oggetto dell’immagine e della natura della pagina web in cui l’immagine è pubblicata.
• Didascalia e Descrizione:
  • quanto meno in WordPress, la didascalia appare anche in pagina, solitamente, quindi stai parlando direttamente all’utente. È un testo utile per spiegare meglio l’immagine, riassumendo ciò che l’utente vede e contestualizzando ulteriormente.
  • La descrizione, invece, almeno in WordPress, è un ulteriore elemento utile al CMS stesso per tenere traccia di ciò che rappresentano le immagini nella raccolta media, è dunque inutile lato SEO.

Ultimi aspetti, non irrilevanti:

1. è importante differenziare i titoli e i testi alternativi di ciascuna immagine di un sito web. Anche solo una minima variazione, magari indicando un dettaglio o il nome del modello se parliamo di un oggetto in vendita in un e-commerce. Quindi attenzione ad evitare i doppioni.
2. Bisogna essere onesti e coerenti nel descrivere le immagini tramite Tag Alt. Quel testo, infatti, servirà anche per le persone ipovedenti, quindi è importante essere contestuali e non orientare il Tag Alt solamente e puramente in ottica SEO.

Adozione del “Lazy Loading”

Questa è una novità più recente: come testimonia il grafico seguente, tuttavia, viene sempre più adottata.

Il lazy loading è una configurazione che permette di “erogare” i contenuti più pesanti, come immagini o video ad esempio, quando servono e non già al caricamento della pagina.

Di fatto, quindi, è un caricamento differito e ritardato: il lazy load – letteralmente “caricamento pigro” – farà apparire le immagini solo quando l’utente ci capiterà sopra allo scroll della pagina

Pare che questa configurazione sarà di default nelle prossime versioni di WordPress, ma a prescindere dal CMS utilizzato, è possibile impostare il lazy load semplicemente facendo ricorso a plugin (o moduli o estensioni) specifici.

Spesso poi il lazy loading è una delle funzionalità attivabili nei plugin di cache.

È una soluzione facile da adottare, che ti aiuterà nella velocità di caricamento della pagina (aspetto fondamentale per l’ottimizzazione SEO).

Infine, se vuoi conoscere altri dettagli e statistiche sul mondo delle immagini online, questa è la risorsa che stai cercando. Questo è quanto. Buona ottimizzazione delle immagini