Ottimizzare Immagini SEO: Nome, attributo ALT e Title

Ottimizzare le immagini è un aspetto fondamentale nell’ottimizzazione SEO on-page di un contenuto. Le immagini devono aiutare la comprensione del testo, migliorare la user experience, rendendo un articolo esteticamente migliore, e possono contribuire a favorire il posizionamento delle nostre pagine. Vediamo i passaggi per ottimizzare un’immagine per la SEO e Google Images.

• Che cos’è il tag IMG
• Come ottimizzare le immagini per la SEO
  • Nome del file immagine (rinominare immagini)
  • Attributo ALT (Testo Alternativo)
  • Attributo Title (Titolo dell’immagine)
  • Dimensione Immagini
  • Compressione Immagini
  • Immagini Responsive
  • Sitemap di immagini
  • Open Graph e Twitter Cards
• Conclusioni: perché utilizzare le immagini

Che cos’è il tag IMG

Le immagini in una pagina web di norma vengono rappresentate dal tag img (abbreviativo di image). Dal punto vista tecnico presentano la seguente sintassi base:

< img src="http://www.miosito.it/nome-immagine.jpg" / >

Tramite questa sintassi è possibile inserire sulla pagina web: immagini, grafici, infografiche, icone, etc.

Per inserire un’immagine sul nostro sito, sarà sufficiente compilare l’attributo src del tag img inserendo l’indirizzo del file immagine.

Come ottimizzare le immagini per la SEO

Un’immagine ottimizzata SEO, invece, prevede una sintassi più elaborata:

< img src="http://www.miosito.it/nome-immagine.jpg" alt="definizione breve dell'immagine" title="descrizione lunga dell'immagine" height="100" widht="100" / >

Le immagini sono molto importanti per la SEO e tutti gli attributi all’interno dei tag <img> vengono utilizzati dai motori di ricerca per comprendere i contenuti delle nostre immagini.

Vediamo nel dettaglio come ottimizzare questi attributi dell’immagine, al fine di favorire il posizionamento sui motori di ricerca.

Nome del file immagine (rinominare immagini)

L’ottimizzazione di un’immagine per la SEO inizia con il rinominare il file legato all’immagine nel modo corretto.

I nomi dei file immagine devono essere brevi ma descrittivi (non bisogna mai usare termini generici come “immagine1.jpg” oppure “img_36862386.png”), inserendo termini specifici al fine di aumentare la rilevanza dell’intera pagina per i motori di ricerca.

Ad esempio, se la nostra immagine mostra una serp di google, il suo nome dovrà essere il seguente: esempio-serp-google.jpg.

Attributo ALT (Testo Alternativo)

L’attributo alt (da alcuni chiamato erroneamente “tag alt”) è fondamentale perché nasce con lo scopo di consentire la comprensione dei contenuti di una pagina web a persone con disabilità, comunicando loro il contenuto dell’immagine.

Il testo alternativo dell’immagine, fornisce informazioni sull’immagine qualora non sia disponibile per problemi legati al caricamento o al browser di navigazione.

Dal punto di vista SEO, bisogna prestare molta attenzione ad utilizzare questo attributo, trovando il giusto equilibrio tra le parole chiave e l’usabilità, ossia compilandolo con ciò che effettivamente rappresenta l’immagine ma con un occhio al posizionamento, inserendo le principali parole chiave da posizionare.

Infine la presenza dell’attributo alt nelle immagini costituisce un requisito imposto dal W3C la cui omissione provocherà un errore nella validazione del codice della pagina.

Trascurare gli attributi alt, pregiudica la possibilità di avere un posizionamento su Google migliore tra i risultati di ricerca, in quanto consentono di essere mostrati tra i risultati della ricerca per immagini (Google Image Search).

Attributo Title (Titolo dell’immagine)

L’attributo title consente, al passare del mouse sopra l’immagine, di mostrare un testo descrittivo all’utente e risulta molto utile per migliorare la comprensione dell’immagine.

A differenza dell’attributo alt, viene sempre mostrato all’utente e non solo nel caso di assenza o non caricamento dell’immagine.

Dal punto di vista SEO l’attributo title deve differire dall’attributo alt e aggiungere ulteriori informazioni relative all’immagine.

Dimensione Immagini

Gli attributi Height e Width, ossia altezza e larghezza dell’immagine, devono essere sempre compilati per non provocare rallentamenti nel caricamento della pagina relativi al fenomeno del browser reflow.

Sempre dal punto di vista delle dimensioni, le immagini possono avere un enorme impatto sui tempi di caricamento, soprattutto quando si inserisce un’immagine enorme e la si mostra molto piccola, come l’utilizzo di un’immagine di 1500 * 1500 pixel per una visualizzazione a 250 * 250 pixel.

Scalare le immagini è una delle ottimizzazioni più semplice ed efficace per velocizzare il caricamento delle pagine: è sufficiente ridimensionarle nella misura corretta con una qualsiasi software per editing foto (GIMP, Photoshop, etc.).

Ad esempio, WordPress ci aiuta in questo lavoro, fornendo l’immagine in più grandezze subito dopo il caricamento.

Compressione Immagini

Dal punto di vista della compressione, ridurre il peso delle immagini significa ridurre la quantità di byte in transito durante lo scambio di informazioni tra browser e server.

Di conseguenza aumenta la velocità di erogazione dell’intera pagina all’utente.

Ottimizzare le immagini nella corretta qualità lossless prima di pubblicarle online, permette quindi alla pagina di caricare più velocemente, un aspetto che Google tiene in forte considerazione: più veloce è il caricamento del sito, più semplice sarà scansionare e indicizzare una pagina (per maggiori informazioni sull’argomento leggere: Come funziona Google: Scansione, Indicizzazione e Posizionamento).

Per comprimere le immagini, esistono software e servizi specifici che permettono di riscrivere il codice interno ai file immagine in modo che occupi meno spazio, ma lasciando i contenuti visuali inalterati (i pixel dell’immagine saranno identici a quelli del file originario). Alcuni esempi sono:

• Caesium
• FILEminimizer Pictures
• FileOptimizer
• ImageOptim

Per verificare che le immagini del nostro sito siano compresse correttamente, sarà sufficiente utilizzare il tool gratuito PageSpeed Insights e nei suggerimenti per l’ottimizzazione, verificare quali immagini della pagina analizzata non presenta la corretta formattazione e compressione.

Immagini Responsive

Utilizzare immagini responsive, ovvero che si adattano in base al dispositivo di navigazione, è un altro aspetto essenziale anche per la SEO.

Immagini non visualizzate correttamente, potrebbero rovinare l’esperienza su dispositivi mobile e aumentare la frequenza di rimbalzo, in quanto l’allineamento non pertinente peggiora la fruizione della pagina all’utente finale.

Vi sono diverse tecniche per l’implementazione delle immagini responsive, dove la soluzione più diffusa consiste nell’impostare tramite CSS la larghezza dell’immagine con la proprietà “max-width: 100%”.

Altre soluzioni riguardano l’Adaptive images e gli attributi srcset e sizes del tag <img>.

Sitemap di immagini

Al fine di velocizzare l’indicizzazione delle immagini e aumentare le probabilità che siano mostrate nei risultati di Google Images, è consigliabile creare una Sitemap di immagini in formato xml.

La Sitemap di immagini ci consente di indicare a GoogleBot le immagini che vogliamo siano indicizzate e fornire ulteriori informazioni sulle immagini, tra cui l’ubicazione geografica e la licenza.

È possibile generare una Sitemap di immagini manualmente o automaticamente attraverso strumenti come Screaming Frog.

Open Graph e Twitter Cards

Per facilitare l’acquisizione delle immagini durante la condivisione di un post su Facebook e altri canali social, è consigliabile aggiungere nella sezione <head> del tuo sito i meta tag Open Graph:

< meta property="og:image" content="http://www.miosito.it/nome-immagine.jpg" / >

l’implementazione di questo markup assicura che l’immagine sia inclusa correttamente nei tuoi post su Facebook (l’Open Graph è utilizzato anche da Pinterest).

Assicurati di utilizzare immagini di alta qualità, poiché i post con immagini di qualità superiore tendono ad essere più attrattivi e condivisi sulle piattaforme social.

Le Twitter Cards svolgono lo stesso ruolo per il social Twitter e presentano un markup molto simile all’Open Graph.

Conclusioni: perché utilizzare le immagini

Le immagini rendono un articolo esteticamente migliore e possono contribuire all’ottimizzazione SEO delle nostre pagine.

Se sei un blogger o scrivi articoli per una rivista o un quotidiano online, potresti porti spesso questa domanda: dovrei aggiungere un’immagine al mio articolo? La risposta è sicuramente sì.

Le immagini, se aggiunte con criterio, aiutano gli utenti a comprendere meglio il contenuto del tuo articolo.

Se prestiamo attenzione anche agli aspetti legati all’ottimizzazione, che abbiamo appena discusso, migliorerà anche il posizionamento del tuo sito.

Si dice che un’immagine vale più di mille parole. Quindi, non esitare e utilizza le immagini!