Best practice relative alla SEO per Google Immagini

Google offre diversi prodotti e funzionalità della Ricerca che aiutano gli utenti a scoprire visivamente le informazioni sul web, come le immagini dei risultati di testo, Google Discover e Google Immagini. Sebbene ogni funzionalità e prodotto abbia un aspetto diverso, i consigli generali per fare in modo che le immagini vengano mostrate sono gli stessi.

Illustrazione che mostra le immagini nei risultati della Ricerca Google, nella scheda Immagini e in Feed personalizzato

Per ottimizzare le tue immagini in modo che vengano visualizzate nei risultati di ricerca di Google, segui queste best practice:

  1. Aiutaci a scoprire e indicizzare le tue immagini
  2. Ottimizza le pagine di destinazione immagine

Aiutaci a scoprire e indicizzare le tue immagini

I requisiti tecnici per includere i tuoi contenuti nei risultati di ricerca di Google si applicano anche alle immagini. Poiché le immagini hanno un formato sostanzialmente diverso rispetto all'HTML, esistono requisiti aggiuntivi per l'indicizzazione delle immagini; ad esempio, trovare immagini sul tuo sito è diverso, e la presentazione delle immagini influisce anche sull'eventuale indicizzazione o meno di un'immagine e per le parole chiave appropriate.

Utilizza elementi immagine HTML per incorporare immagini

L'utilizzo di elementi immagine HTML standard aiuta i crawler a trovare ed elaborare le immagini. Google può trovare le immagini nell'attributo src dell'elemento <img> (anche se è un elemento secondario di altri elementi, come l'elemento <picture>). Google non indicizza le immagini CSS.

Valido:

<img src="puppy.jpg" alt="Un cucciolo di golden retriever" />

Non valido:

<div style="background-image:url(puppy.jpg)">Un cucciolo di golden retrieve</div>

Utilizza una Sitemap di immagini

Puoi fornire l'URL di immagini che altrimenti non potremmo rilevare inviando una Sitemap di immagini.

A differenza delle normali Sitemap, puoi includere URL di altri domini negli elementi <image:loc> delle Sitemap di immagini. In questo modo puoi utilizzare le reti CDN (Content Delivery Network) per ospitare le immagini. Se utilizzi una rete CDN, ti invitiamo a verificare la proprietà del suo nome di dominio in Search Console, in modo da poterti informare su eventuali errori di scansione che potremmo rilevare.

Immagini adattabili

La progettazione di pagine web adattabili porta a una migliore esperienza utente, dal momento che le persone possono accedervi su numerosi tipi di dispositivi. Consulta la nostra guida alle immagini adattabili per scoprire le best practice relative alla gestione delle immagini sul tuo sito web.

Le pagine web utilizzano l'elemento <picture> o srcset di un elemento img per specificare le immagini adattabili. Tuttavia, alcuni browser e crawler non comprendono questi attributi. Ti consigliamo di specificare sempre un URL di riserva tramite l'attributo src.

L'attributo srcset consente di specificare versioni diverse della stessa immagine, in particolare per le diverse dimensioni dello schermo. Ad esempio: 

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

L'elemento <picture> è un contenitore che viene utilizzato per raggruppare diverse versioni <source> della stessa immagine. Offre un approccio di riserva per consentire al browser di scegliere l'immagine giusta in base alle funzionalità del dispositivo, ad esempio la densità dei pixel e le dimensioni dello schermo. L'elemento picture è utile anche per usare i nuovi formati di immagine con riduzione controllata incorporata per i client che ancora non supportano i nuovi formati.

Come specificato nella sezione 4.8.1 dello standard HTML, assicurati di fornire img come elemento di riserva con un attributo src quando usi picture utilizzando il seguente formato: 

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

Utilizza formati delle immagini supportati

La Ricerca Google supporta le immagini a cui viene fatto riferimento nell'attributo src di img nei seguenti formati file: BMP, GIF, JPEG, PNG, WebP, SVG e AVIF È opportuno anche far corrispondere l'estensione del nome file con il tipo di file.

Puoi anche incorporare immagini come URI di dati. Gli URI di dati consentono di incorporare un file, ad esempio un'immagine, nella pagina impostando l'attributo src di un elemento img come stringa codificata Base64 secondo il seguente formato: 

<img src="data:image/svg+xml;base64,[data]">

Le immagini incorporate possono ridurre le richieste HTTP, ma valuta con attenzione quando usarle perché potrebbero aumentare notevolmente le dimensioni della pagina. Per saperne di più, consulta la sezione dei pro e dei contro dell'uso di immagini incorporate nella nostra pagina web.dev.

Ottimizza per velocità e qualità

Le foto di alta qualità attraggono gli utenti più di immagini sfocate e poco nitide. Inoltre, le immagini nitide nella miniatura dei risultati sono più allettanti e possono aumentare la probabilità di ottenere traffico. Ciò detto, le immagini sono spesso il fattore decisivo nella dimensione complessiva della pagina e possono renderla lenta e pesante da caricare. Assicurati di applicare l'ottimizzazione più recente dell'immagine e le tecniche per le immagini adattabili per fornire un'esperienza utente rapida e di alta qualità.

Analizza la velocità del tuo sito con PageSpeed Insights e consulta la nostra pagina sull'importanza della velocità per scoprire le best practice e le tecniche per migliorare il rendimento del sito web.

Ottimizza le pagine di destinazione immagine

Anche se non è immediatamente evidente, i contenuti e i metadati delle pagine in cui è incorporata un'immagine possono avere un'influenza notevole su come e dove l'immagine potrebbe essere visualizzata nei risultati di ricerca di Google.

Controllare il titolo e la descrizione della pagina

La Ricerca Google genera automaticamente un link del titolo e uno snippet per descrivere al meglio ogni risultato e spiegare in che modo è correlato alla query dell'utente. Questo aiuta gli utenti a decidere se fare clic o no su un risultato. Ecco due esempi di come potrebbero apparire i link dei titoli e lo snippet i una pagina dei risultati di ricerca di Google:

Illustrazione che mostra titoli e descrizioni nei risultati di ricerca di immagini

Utilizziamo una serie di fonti diverse per queste informazioni, tra cui informazioni nei tag title e meta per ogni pagina.

Puoi aiutarci a migliorare la qualità del link del titolo e dello snippet visualizzati per le tue pagine seguendo le linee guida per i titoli e per gli snippet di Google.

Aggiungi dati strutturati

Se includi dati strutturati, Google può mostrare le tue immagini in determinati risultati avanzati, tra cui un badge in evidenza in Google Immagini, che offrono agli utenti informazioni pertinenti sulla tua pagina e consentono di indirizzare il traffico verso il tuo sito in modo più mirato.

Segui le linee guida generali sui dati strutturati e le linee guida specifiche per il tipo di interesse; in caso contrario, i tuoi dati strutturati potrebbero non essere idonei per la visualizzazione nei risultati avanzati su Google Immagini. In ognuno di questi tipi di dati strutturati, l'attributo dell'immagine è un campo obbligatorio per consentire l'idoneità per il badge e per i risultati avanzati su Google Immagini. Ecco due esempi di come potrebbero apparire i risultati avanzati su Google Immagini:

Illustrazione che mostra come i risultati avanzati possono essere visualizzati in Google Immagini

Utilizza nomi file, titoli e testo alternativo descrittivi

Google estrae le informazioni relative all'oggetto dell'immagine dal contenuto della pagina, inclusi didascalie e titoli delle immagini. Ove possibile, assicurati che le immagini siano posizionate vicino al testo e sulle pagine pertinenti all'oggetto dell'immagine.

Allo stesso modo, il nome file può dare a Google indicazioni molto chiare sull'oggetto dell'immagine. Se possibile, utilizza nomi file brevi ma descrittivi. Ad esempio, my-new-black-kitten.jpg è meglio di IMG00023.JPG. Se possibile, evita di utilizzare nomi di file generici come image1.jpg, pic.gif e 1.jpg. Se il tuo sito ha migliaia di immagini, ti consigliamo di automatizzare la denominazione delle immagini. Se localizzi le immagini, ricorda di tradurre anche i nomi dei file, tenendo presente le linee guida sulla codifica degli URL se utilizzi caratteri non latini o speciali.

L'attributo più importante per fornire più metadati per un'immagine è il testo alternativo (testo che descrive un'immagine), che migliora anche l'accessibilità per le persone che non possono vedere le immagini sulle pagine web, compresi gli utenti che utilizzano screen reader o hanno connessioni a larghezza di banda ridotta.

Google utilizza il testo alternativo insieme ad algoritmi di visione artificiale e ai contenuti della pagina per capire l'oggetto dell'immagine. Inoltre, il testo alternativo nelle immagini è utile come anchor text se decidi di utilizzare un'immagine come link.

Nella scrittura di un testo alternativo, concentrati sulla creazione di contenuti utili e informativi che utilizzino parole chiave in modo appropriato e che siano coerenti con il contesto dei contenuti della pagina. Evita di riempire gli attributi alt con parole chiave (note anche come parole chiave in eccesso) perché questo potrebbe compromettere l'esperienza utente e portare alla classificazione del tuo sito come spam.

Non valido (testo alternativo mancante):

<img src="puppy.jpg"/>

Non valido (parole chiave in eccesso):

<img src="puppy.jpg" alt="cucciolo di cane cucciolo di cagnolino cuccioli cucciolo di cagnolino cagnolini cucciolo cucciolata cagnolino cane retriever labrador wolfhound setter pointer cucciolo jack russell terrier cuccioli cibo per cani cibo per cuccioli di cane a buon mercat"/>

Migliore:

<img src="puppy.jpg" alt="cagnolino"/>

Ottimale:

<img src="puppy.jpg" alt="Cucciolo dalmata che gioca al riporto"/>

Inoltre, tieni conto dell'accessibilità del testo alternativo, in base alle linee guida di W3. Per l'elemento <img>, puoi aggiungere l'attributo alt dell'elemento, mentre per gli elementi <svg> incorporati puoi utilizzare l'elemento <title>. Ad esempio: 

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

Ti consigliamo di testare i tuoi contenuti valutandone l'accessibilità e utilizzando un emulatore di connessione di rete lenta.

Disattiva il collegamento incorporato di Google Immagini

Puoi impedire che l'immagine a grandezza originale venga mostrata nella pagina dei risultati di ricerca di Google Immagini scegliendo di disattivare il collegamento incorporato in quei risultati. Per disattivare il collegamento incorporato:

  1. Quando viene richiesta l'immagine, esamina l'intestazione del referrer HTTP contenuta nella richiesta.
  2. Se la richiesta proviene da un dominio Google, rispondi con un codice di stato HTTP 200 o 204 e senza contenuti.

Google continuerà a eseguire la scansione della pagina e a rilevare l'immagine, ma nei risultati di ricerca mostrerà una miniatura generata al momento della scansione. Questa disattivazione è possibile in qualsiasi momento e non richiede la rielaborazione delle immagini del sito web. Questo comportamento non è considerato cloaking delle immagini e non determina azioni manuali.

In alternativa, puoi impedire del tutto la visualizzazione dell'immagine nei risultati di ricerca.

SafeSearch è un'impostazione disponibile negli account utente Google che ti consente di stabilire se visualizzare, sfocare o bloccare immagini, video e siti web espliciti nei risultati della Ricerca Google. Assicurati che Google comprenda la natura del tuo sito in modo che possa applicare i filtri SafeSearch, se opportuno. Scopri di più su come etichettare le pagine per SafeSearch.