email

Come inserire immagini in HTML per la SEO

Ti trovi in:
  1. blog Come inserire immagini in HTML per la SEO

Pubblicato il , aggiornato il 31 Marzo 2021

Come inserire immagini in HTML per la SEO del sito web? 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.

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?

Tempo richiesto: 40 minuti.

Come inserire immagini in HTML per la SEO

  1. L’attributo alt

  2. Il nome del file per la SEO

  3. Attributi srcset, width ed height

  4. Dati strutturati

code

Come inserire immagini in HTML

Le immagini in HTML si inseriscono con il tag <img>, senza tag di chiusura e specificando ill 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’attributo ALt

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 le parole chiave per Google">
code

Attributi delle immagini per la SEO

Il nome del file

Anche nel nome del file possiamo inserire informazioni sul contenuto dell’immagine. Non caricare mai immagini con nomi tipo IMG0000253.jpg o verrai penalizzato fortemente nel posizionamento.

Attributi width ed height

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 (così dice Google) “sostanziali variazioni di layout”.

Il ragionamento è molto semplice. A nessuno piace che gli elementi della pagina si spostino di continuo durante il caricamento, specialmente se dobbiamo cliccare su un tasto e questo scompare al caricamento dell’immagine che sta sopra.

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

Attributo srcset

L’attributo srcset serve a specificare diverse dimensioni della stessa immagine o meglio, immagini che raffigurano la stessa cosa ma con dimensioni differenti.

È 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">

code

I Dati strutturati

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 come le stelle delle recensioni che vedi nella SERP di Google sono proprio opera dei nostri dati strutturati.

Gli unici dati strutturati per le immagini sono il meta tag dei contenuti per adulti o la licenza di utilizzo ma è possibile inserirle all’interno dei dati strutturati delle pagine.

Puoi specificare ad esempio, nei dati strutturati degli articoli, il percorso dell’immagine di copertina.

Anche i prodotti del tuo shop possono contenere dati strutturati con le immagini prodotto e persino le guide “How To”, cioè le “istruzioni” per fare la pizza o il nodo alla cravatta ecc.

Ci sono altri dati strutturati con immagini come le informazioni sulla tua azienda (logo), eventi in programma, caroselli e anche libri.

Contattaci!

Preventivo sempre gratuito

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message