Mercoledì
03
Maggio 2023
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.
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.
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:
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”.
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:
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:
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">
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">
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.
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:
Ci cono diversi strumenti di test della velocità di un sito web che possono aiutarti anche nel posizionamento 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.
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
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.
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:
Tempo richiesto: 40 minuti.
Come inserire immagini in HTML per la SEO
Scrivi un commento