come inserire immagini in html per la seo

Come inserire immagini in HTML per la SEO

  1. blog Come inserire immagini in HTML per la SEO
event_available
schedule

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.

check_circle

Leggi anche

Come creare sottomenu backend WordPress con add_submenu_page()
Scopri di più
Come creare pagina di amministrazione backend WordPress
Scopri di più
Cos'è il marketing mix
Scopri di più
Perché analizzare i competitor
Scopri di più
Come creare controlli personalizzati per Wp customizer
Scopri di più
Come inviare dati dei form con Ajax serialize() a php
Scopri di più
Elenco icone Google in un array in codice php
Scopri di più
Come usare le chiavi API Google
Scopri di più

Contattaci!

Preventivo sempre gratuito

perm_identity
alternate_email
phonelink_ring
message

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

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.

message
perm_identity
alternate_email

keyboard_arrow_up