SEO per immagini e visual content: guida completa all’ottimizzazione

La SEO per immagini comprende gli interventi che aiutano motori di ricerca e utenti a comprendere il contenuto visuale presente nelle pagine di un sito.

Non riguarda soltanto Google Immagini. Le immagini possono essere utilizzate anche nelle anteprime dei risultati, nelle condivisioni social, nelle pagine dei prodotti e in altre funzionalità di ricerca.

Per poter essere elaborata correttamente, un’immagine deve essere accessibile e inserita nella pagina attraverso una struttura HTML comprensibile.

L’attributo alt descrive il contenuto o la funzione dell’immagine quando questa non può essere vista. È utile per l’accessibilità e contribuisce a fornire contesto ai motori di ricerca.

Il testo alternativo non deve essere considerato uno spazio da riempire obbligatoriamente con la parola chiave principale della pagina.

Google può utilizzare diversi elementi per comprendere il soggetto di un’immagine, compreso il testo presente nella pagina in cui è inserita.

Il nome del file può fornire un’indicazione leggera sul contenuto, ma non sostituisce una pagina ben scritta e un testo alternativo appropriato.

Caricare una fotografia molto più grande dello spazio in cui verrà visualizzata comporta un trasferimento di dati non necessario.

Un possibile esempio di immagine responsive è:

<img
  src="/foto-hotel-1200.webp" srcset="/foto-hotel-480.webp 480w,
    /foto-hotel-800.webp 800w,
    /foto-hotel-1200.webp 1200w"
  sizes="(max-width: 767px) 100vw, 800px"
  width="1200"
  height="800"
  alt="Camera matrimoniale con balcone panoramico"
>

Le dimensioni dichiarate nell’HTML non obbligano a mostrare l’immagine alla sua grandezza originale: il CSS può comunque adattarla al contenitore.

Non esiste un formato migliore per ogni tipo di immagine. La scelta dipende da fotografia, trasparenza, grafica, animazione e compatibilità richiesta.

• confronta qualità e peso del file;
• non comprimere fino a rendere l’immagine sfocata;
• rimuovi metadati non necessari quando opportuno;
• utilizza un formato di fallback se il progetto lo richiede;
• verifica il risultato sul dispositivo reale.

Il lazy loading rimanda il download delle immagini che non sono ancora vicine all’area visibile dello schermo.

Un esempio semplice è:

<img
  src="/progetto-sito-web.webp"
  width="900"
  height="600"
  loading="lazy"
  alt="Homepage responsive di un sito web aziendale"
>

L’attributo non dovrebbe essere applicato indiscriminatamente a tutte le immagini, soprattutto quando una fotografia iniziale rappresenta il contenuto principale della pagina.

Un visual efficace non è necessariamente quello più elaborato. Deve chiarire, dimostrare o rendere più comprensibile il contenuto.

Foto generiche di repertorio possono essere utili, ma non dovrebbero sostituire completamente immagini capaci di rappresentare l’identità reale dell’azienda.

L’immagine principale di una pagina può essere utilizzata come anteprima nei motori di ricerca, nelle piattaforme social e nelle applicazioni di messaggistica.

La selezione dell’anteprima resta comunque automatica e può variare in base al sistema che mostra il contenuto.

Nei siti con molte immagini o con risorse caricate attraverso sistemi complessi, una sitemap dedicata può aiutare a segnalare file che potrebbero essere più difficili da scoprire.

Sitemap e dati strutturati non sostituiscono una pagina accessibile, un’immagine pertinente e una corretta configurazione tecnica.

Prima di pubblicare un’immagine è necessario verificare di avere il diritto di utilizzarla nel contesto previsto.

• utilizza fotografie proprie o regolarmente concesse;
• rispetta eventuali obblighi di attribuzione;
• conserva licenze e autorizzazioni;
• verifica la presenza di persone riconoscibili;
• non pubblicare documenti o dati riservati;
• controlla le condizioni delle librerie stock;
• indica autore e copyright quando necessario.

Il risultato dei test automatici deve essere interpretato nel contesto della pagina reale e verificato anche su smartphone e connessioni differenti.

• caricare fotografie nelle dimensioni originali senza ridimensionarle;
• utilizzare nomi generici come IMG_001.jpg;
• ripetere parole chiave nell’attributo ALT;
• descrivere immagini decorative come contenuti importanti;
• omettere WIDTH e HEIGHT quando possono essere indicati;
• applicare il lazy loading all’immagine principale;
• utilizzare immagini di sfondo per contenuti informativi;
• pubblicare immagini sfocate o eccessivamente compresse;
• inserire visual non pertinenti al testo;
• ignorare licenze, copyright e privacy;
• considerare la conversione in WebP come unica ottimizzazione;
• promettere traffico o conversioni grazie alle sole immagini.

• scegli un’immagine pertinente e di buona qualità;
• verifica di poterla utilizzare legalmente;
• ridimensionala in base allo spazio disponibile;
• confronta JPEG, PNG, WebP, AVIF o SVG;
• comprimi il file senza degradarlo eccessivamente;
• utilizza un nome breve e descrittivo;
• scrivi un testo alternativo contestuale;
• usa ALT vuoto per gli elementi decorativi;
• posiziona l’immagine vicino al testo pertinente;
• indica larghezza e altezza;
• utilizza SRCSET per le immagini responsive;
• applica il lazy loading soltanto fuori dalla parte iniziale;
• configura un’immagine rappresentativa della pagina;
• controlla prestazioni e accessibilità;
• verifica periodicamente immagini e collegamenti.

• Servizi SEO per aziende e professionisti
• Come migliorare la velocità del sito web
• Guida alla SEO locale
• Quanto costa realizzare un sito web
• Realizzazione di siti web professionali
• Creazione e gestione di blog aziendali