Come ottimizzare le immagini per la SEO

Come ottimizzare immagini per la SEO del tuo sito? Oggi più che mai le immagini sono fondamentali per gli articoli e le pagine del tuo sito web.

Sono ben viste anche da Google al punto tale da premiare le pagine web con immagini pertinenti e ben posizionate all’interno del testo.

Anche creare un’infografica può aiutarti nel miglioramento dei tuoi articoli descrittivi.

Negli ultimi anni la nuova frontiera del posizionamento online è proprio l’User Experience, ovvero l’esperienza e la soddisfazione di chi legge i tuoi contenuti. Conosci un modo migliore delle immagini per migliorare SEO così come l’esperienza utente?

L’ottimizzazione delle immagini è anche un punto fondamentale della tua strategia SEO.

Come inserire immagini in HTML

Le immagini in HTML si inseriscono con il tag <img>, senza tag di chiusura e specificando il percorso assoluto dell’immagine, in questo modo:

<img src="https://www.il-mio-sito.it/percorso-immagine/nome-immagine.jpg">

L’attributo “src” indica proprio il percorso dell’immagine sul tuo sito ma deve includere anche “https://” per la SEO.

Ottimizzare il nome dell’immagine per la SEO

L’ottimizzazione delle immagini parte proprio dal nome del file. Anche qui possiamo e dobbiamo descrivere concretamente cosa rappresenta l’immagine che vogliamo inserire.

Non caricare mai sul tuo sito immagini con nomi tipo IMG00007532.jpg o farai molta fatica a raggiungere la prima pagina di Google.

Anche in questo caso dovrai inserire:

• Parole chiave per cui vuoi posizionarti
• Breve descrizione del contesto in cui si trova l’immagine
• Descrizione di cosa rappresenta esattamente l’immagine

Evita nomi dei file troppo lunghi o con elenchi di parole chiave. Il nome deve avere un senso logico!

Se vuoi rinominare ad esempio un’infografica sulla SEO delle immagini allora il nome gusto sarà: “infografica-ottimizzazione-seo-per-immagini.jpg”.

L’attributo ALt – Ottimizzare immagini per la SEO

Siccome Google non riesce ad interpretare il contenuto dell’immagine attraverso i pixel, dobbiamo specificare manualmente cosa vogliamo rappresentare, tramite l’attributo “alt”.

Questo è sempre stato l’attributo più importante da specificare per la SEO altrimenti la tua immagine non veniva nemmeno presa in considerazione, come se non avessi caricato nulla.

<img src="https://www.il-mio-sito.it/percorso-immagine/nome-immagine.jpg"
    alt="Descrizione dell'immagine con parole chiave">

L’attributo Alt deve essere:

• Una breve frase descrittiva dell’immagine
• Deve contenere le parole chiave per cui vuoi indicizzare la pagina web
• Non deve essere un elenco di parole chiave

Attributo Title delle immagini

Anche questo è un attributo molto importante per ottimizzare immagini per la SEO. Dobbiamo infatti inserire in questo campo una breve descrizione dell’immagine più dettagliata rispetto all’attributo Alt.

Non esagerare con la lunghezza delle descrizioni: poche parole, semplici e soprattutto esaustive.

Dovrai inserire:

• Breve descrizione dettagliata
• Le parole chiave per cui vuoi posizionare il tuo articolo
• Descrizione inserente al contesto in cui viene posizionata l’immagine

Attributi width ed height – Dimensioni delle immagini per la SEO

Gli attributi width ed height specificano la larghezza e l’altezza dell’immagine. Non sono strettamente necessari in termini tecnici, infatti tutti i browser creano un elemento <img> delle dimensioni corrette anche se questi attributi non sono impostati.

È però importante specificarli per migliorare l’esperienza utente. Questi attributi infatti creano il contenitore delle dimensioni corrette ancora prima che l’immagine venga caricata evitando sostanziali variazioni di layout.

Il ragionamento è molto semplice: a nessuno piace vedere elementi che cambiano dimensione durante il caricamento della pagina.

<img src="https://www.il-mio-sito.it/percorso-immagine/nome-immagine.jpg"
    alt="Descrizione dell'immagine con parole chiave"
    width="800px"
    height="540px">

Attributo srcset

L’attributo srcset serve a specificare diverse versioni della stessa immagine.

È molto utile per aumentare la velocità di caricamento della nostra pagina web e anche per evitare di inserire immagini in HTML che devono essere rimpicciolite dal browser. Google è molto pignolo, infatti dover rimpicciolire le immagini equivale a pixel (e quindi kilobyte) in eccesso.

<img srcset="immagine-320w.jpg 320w,
       immagine-480w.jpg 480w,
       immagine-800w.jpg 800w"
   sizes="(max-width: 320px) 280px,
      (max-width: 480px) 440px,
      800px"
   src="immagine-800w.jpg" alt="Immagine dinamica">

Contesto: i paragrafi prima e dopo l’immagine

Per scrivere un articolo efficace, le immagini non vanno inserite a caso ma devono arricchire il testo dei paragrafi circostanti.

In tutti gli attributi che abbiamo visto dovrai scrivere frasi contenenti una descrizione dell’argomento trattato nei paragrafi circostanti, non solo le parole chiave per cui vuoi posizionare l’articolo.

Compressione delle immagini per la SEO

Già da tempo la velocità delle pagine web è fondamentale per la SEO, sappiamo tutti infatti che nessuno vuole aspettare durante il caricamento.

Cosa influisce sulla velocità di caricamento delle pagine? Oltre a rimuovere file CSS e Javascript in eccesso, anche le immagini hanno il loro impatto non indifferente.

Ogni kb risparmiato è un miglioramento ma fai attenzione a non perdere qualità! È una buona prassi aumentare la velocità del tuo sito web ma fai attenzione a non rovinare l’esperienza utente con una qualità immagini scarsa

Per ridurre il peso delle immagini dovrai:

• Scalare le immagini nella dimensione effettivamente visualizzata
• Comprimerle rimuovendo metadati in eccesso
• Usare formati di file recenti, ad esempio il .webp

Ci cono diversi strumenti di test della velocità di un sito web che possono aiutarti anche nel posizionamento SEO

Il formato WebP delle immagini per la SEO

Il formato WebP (.webp) è stato sviluppato da Google nel 2010 proprio per migliorare la compressione delle immagini senza perdita di qualità.

Google lo identifica come il formato ideale per il web, anche se i motori di ricerca hanno impiegato parecchio tempo prima di implementarlo correttamente.

Ci sono diversi strumenti online gratuiti che ti consentono di convertire le immagini in WebP oppure puoi utilizzare lo strumento di conversione di Google, cwebp.

• cwebp (di Google)
• Cloudconvert

Sitemap di immagini

Come per articoli e pagine del tuo sito, anche per le immagini esiste una sitemap specifica in formato .xml che può aiutarti a ottimizzare le immagini per la SEO.

Puoi generare una sitemap di immagini con il plugin per WordPress Yoast SEO oppure manualmente con Screaming Frog

Open Graph e Twitter Cards per la SEO

I dati Open Graph sono metadati (tag <meta>) che consentono di implementare l’immagine durante la condivisione sui social, in particolare Facebook.

<meta property="og:url" content="https://www.il-mio-sito.it/percorso-articolo" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Titolo articolo" />
<meta property="og:description" content="Descrizione articolo" />
<meta property="og:image" content="https://www.il-mio-sito.it/percorso-immagine/nome-immagine.jpg" />

Nella guida ufficiale di Facebook trovi maggiori dettagli su come implementarli al meglio.

Anche per il social Twitter si possono specificare dei metadati, ovvero le Twitter Cards:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@site" />
<meta name="twitter:creator" content="@creator" />
<meta property="og:url" content="https://www.il-mio-sito.it/percorso-articolo" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Titolo articolo" />
<meta property="og:description" content="Descrizione articolo" />
<meta property="og:image" content="https://www.il-mio-sito.it/percorso-immagine/nome-immagine.jpg" />

Ti lascio la documentazione ufficiale per inserire le Twitter Cards.

Dati strutturati

Cosa sono i dati strutturati? Sono informazioni testuali che vengono lette dai motori di ricerca per interpretare meglio il contenuto delle pagine web. Servono principalmente per migliorare i risultati di ricerca nella SERP perché aggiungono stelle delle recensioni e altre informazioni utili.

Gli unici metadati sulle immagini sono il tag dei contenuti per adulti o la licenza di utilizzo:

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

Puoi però inserire il percorso delle immagini all’interno di altri microdati come:

• L’immagine di copertina di un articolo
• Dati strutturati per Immagine prodotto
• Immagine ricetta
• Immagini dei diversi passaggi delle guide “How To”
• Logo del brand

Contattami

perm_identity

alternate_email

phonelink_ring

message

Ho letto la vostra Informativa privacy e acconsento Al trattamento dei miei dati personali per l’erogazione del servizio richiesto.

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Invia