SEO Blog

Una fotografia ottimizzata a venezia retta da un braccio.

 

Come migliorare la SEO ottimizzando le immagini

Sulla ottimizzazione delle immagini per la SEO ne ho lette tantissime ma quasi tutti gli articoli non trattano alcuni punti che oggi ho intenzione di affrontare.
Sulle immagini per la SEO, Google ne parla almeno dal 2006.

Questa è una SEO tecnica spesso trascurata o abusata; ti spiegherò come ottimizzare le tue immagini per migliorare la visibilità e smetterla una volta per tutte di inserire nel TAG ALT la parola chiave di una pagina.

Spiegherò cos'è l'ottimizzazione delle immagini e perché è importante; i passaggi per integrarle nelle tue pagine e quali strumenti puoi utilizzare per garantire un'ottimizzazione perfetta (come ad esempio Google Vision API).


Cos'è l'ottimizzazione delle immagini?

Ottimizzare le immagini è una delle migliori pratiche SEO per ottenere i maggiori vantaggi possibili in termini di posizionamento ed esperienza utente, ad esempio, come implementare le migliori pratiche di codifica, aggiungere il markup schema per oggetti immagine, utilizzare la più alta risoluzione disponibile, ecc.

Disegno di Andrea Giudice ultima cena

La mia visione dell'ultima cena (non sono solo SEO!)
(dal sito dei Pulpi)

Perché la tecnica di ottimizzazione è importante per la SEO

Esistono milioni di SERP che traboccano di copie di immagini che coprono tutti i cluster delle parole chiave, ciascuno con migliaia di backlink.

Un essere umano non sarebbe in grado di valutare 10 pagine; ai nostri occhi quelle immagini sono tutte meravigliose (e spesso uguali).
Eppure Google non ha problemi a capire che i primi 3 risultati, che ottengono circa il 55% dei click, dipendono da come pubblichi le immagini sul tuo sito.

Guarda queste due pagine e cerca di trovare le differenze che rendono un'immagine più posizionabile dell'altra:

  
 

Noti differenze?
Non ce ne sono, per un essere umano sono copie identiche.

Ora dai un' occhiata a questi due blocchi codice:

<img src="/2020/cane.webp" width="40%" height="auto" />
.cane {
background:url(/2020/cane.webp) no-repeat center center;
background-size: contain;
 

 

Anche se il risultato visivo sulla pagina è lo stesso, il codice è completamente diverso, al punto che quello di sinistra probabilmente non sarà neanche indicizzato.
Il codice è ciò che il motore di ricerca legge; questo è uno dei motivi per cui devi seguire le migliori pratiche quando aggiungi immagini alle pagine del tuo sito.
Questi punti sono molto importanti per i motori di ricerca proprio perchè essi leggono il codice html della pagina.

Chi deve fare dell'ottimizzazione delle immagini una priorità?

Anche se ogni sito web dovrebbe ottimizzare le immagini, sicuramente i primi a farlo dovrebbero essere gli e-commerce.

Un'elevata concorrenza e una forte dipendenza dall'impatto da contenuti visivi rende questo settore il primo a necessitare una buona ottimizzazione delle immagini.
Considera che con centinaia di migliaia di pagine, ognuna con più immagini di un prodotto, gli e-commerce avranno maggiori possibilità di guadagnare visibilità.
Se aggiungi il fatto che una corretta ottimizzazione delle immagini offre più spazio per implementare parole, questa necessità diventa evidente.

Le migliori pratiche per l'ottimizzazione delle immagini

Ora che abbiamo stabilito cos'è l'ottimizzazione delle immagini e perché è così importante, esaminiamo i dettagli.

Anche se tratterò alcuni principi che nella pratica hanno dimostrato di funzionare, come per ogni consiglio SEO è necessario prendere tutto come una goccia nell'oceano, perchè il posizionamento potrebbe avvenire in modo diverso per diversi argomenti e settori verticali competitivi.

Tutto quello che devi sapere sui tag <img

Il consiglio più importante per l'ottimizzazione delle immagini è usare il tag <img> insieme all'attributo <alt> in modo da ottenere qualcosa di simile:

 

<img src="/andrea-giudice.jpg" alt="il peggior seo del mondo">

 

Dove il tag <img> aggiunge l'immagine e l'attributo <alt> la descrive.

In generale, questa è la prassi ma le cose come al solito, sono molto più complicate.

Perché compilare il testo <alt

Quando Google fa il crawling di una pagina, prima scarica tutto il contenuto testuale come un grande ammasso di codice, poi inizia a suddividerlo in gruppi.
A questo punto entra in gioco l'HTML-5, perchè i tag semantici aiutano Google a orientarsi intorno al testo e a fargli capire come stanno le cose.

Il tag <img> con l'attributo <alt>, quindi, viene letto esattamente nello stesso modo degli altri contenuti testuali, ad esempio raggruppati dal tag <p>.

Una volta che Googlebot arriva al tag immagine, accadrà una delle seguenti cose, a seconda di come hai implementato l'attributo <alt>:

  • Nessun attributo <alt> - Scenario peggiore.
    Google non sarà in grado di ottenere alcun contesto per quell'immagine e la tratterà come irrilevante.
    Quel tipo di immagine non si indicizzerà mai e potrebbe anche danneggiare il posizionamento della tua pagina.
  • Attributo <alt> vuoto - Situazione migliore.
    Trovando un tag <alt> vuoto, il motore di ricerca considererà automaticamente la tua immagine come decorativa e cercherà di ottenere il significato attraverso il contesto dei paragrafi testuali che la circondano.
  • Attributo <alt> correttamente compilato - Situazione più utile ai fini del posizionamento.
    Il crawler utilizzerà l'attributo <alt> per capire il significato di quell'immagine e poi lo integrerà analizzando il testo circostante per valutare correttamente il significato, il suo contesto e la rilevanza per l'utente.

Prima che il crawler analizzi il codice html, tag, script, ecc (il tag <img> non è ancora elaborato), l'attributo <alt> è considerato allo stesso modo di qualsiasi altro contenuto testuale che fa parte della pagina web.
Questo è esattamente il motivo per cui le immagini richiedono l'attributo <alt>, anche vuoto; in seguito potrai studiare il testo da inserirci per migliorare il potenziale di ranking.

Il tag <img> prevede anche l'attributo <title> per specificare il titolo dell'immagine e i motori di ricerca lo usano solo per valutare un'immagine se non esiste attributo <alt>.
Se l'attributo <alt> è compilato, il <title> non avrà peso SEO.

Importante: il nome del file dell'immagine non influenza il posizionamento in alcun modo.

Didascalia nell'immagine

Ahrefs consiglia di usare le didascalie, ma anche in questo caso le cose non sono così semplici.

Il tag <img> non prevede l'attributo <caption>.
<caption> è un attributo del tag <figure>, tag usato per aggiungere immagini a una pagina web.

Perché allora non usare <figure> invece che <img>, visto che <figure> comprende anche dell'attributo <caption>?

<figure>, a differenza di <img>, ha uno scopo ben specifico: è usato per dire ai motori di ricerca che l'immagine al suo interno è indipendente dal contesto della pagina.
In altre parole, <figure> neutralizza completamente qualsiasi aumento di ranking che la tua immagine potrebbe fornire alla pagina.

<figure> è un po' simile a <section> o ai CSS.

All'interno del <caption> puoi aggiungere testo che sarà letto dai motori di ricerca ma non avrà una grande influenza in termini di posizionamento dell'immagine.

Come scrivere l'attributo perfetto <alt> per la SEO

Un gatto nero con gli occhi gialli

I tag <alt> non devono essere implementati solo come descrizione delle immagini ma come parte del testo che stai scrivendo nella pagina.

  • L'immagine che descrivi nell'attributo <alt> deve essere effettivamente pertinente con il testo della pagina.
  • Ricorda che l'attributo <alt> di un'immagine non è il suo nome di file, né il duplicato del suo titolo.

Il testo dell'<alt> dovrebbe essere in grado di sostituire la tua immagine, e funzionare bene nel contesto della pagina web che la circonda.

I due errori più comuni sono:

  • Copiare il titolo dell'immagine o la pagina web stessa e usarli come testo <alt>
  • Usare lo stesso identico testo <alt> per immagini diverse.

Evita il più possibile questi errori, perché il crawler semplicemente ignora il testo duplicato dell'<alt> come lo farebbe con qualsiasi altra copia.

Compilare il testo <alt> a caso, inserendo ad esempio le parole chiave come se non ci fosse un domani, ed evitando di descrivere l'immagine come realmente appare ai tuoi occhi, non migliora l'ottimizzazione e indebolisce l'efficacia delle foto che avrebbero potuto aiutarti a raggiungere una visibilità migliore.
Google, l'immagine la interpreta - leggi più avanti - quindi, cercare di ingannarlo serve a poco.

Per compilare il tag <alt> devi seguire la stessa procedura per la compilazione dei testi come nel tag <p>.

Rendi il testo <alt> comprensibile: inizia con la lettera maiuscola come se fosse un normale paragrafo e metti un punto alla fine della frase prima di chiudere il tag.

Come utilizzare gli attributi src e srcset per indicizzare immagini di alta qualità

All'interno del tag <img>, due importantissimi, e sempre trascurati, attributi per la SEO sono <src> e <srcset>.
Ecco come appaiono nel codice:

<img alt="testo dell'alt" src="/immmagine1.jpg" srcset="/images/tags/immagine2.jpg 370w, /tags/immagine3.jpg 600w" dimension="370px">

L'attributo <src> specifica l'URL sorgente dell'immagine che si vuole implementare.

L'attributo <srcset> è apparso con l'HTML-5 qualche anno fa e il suo compito è quello di definire un insieme (src_set) di immagini con diverse dimensioni, risoluzioni, ecc.

Questo stratagemma viene applicato in modo che il browser mostri solo le immagini che si adattano perfettamente al dispositivo che ospita la pagina.
La domanda logica che un esperto SEO si porrà sarà: ma quale immagine all'interno di questo set viene indicizzata da Google?

Semplice: per indicizzare un'immagine si usa sempre e solo l'attributo <src>. Per mostrarla a dimensioni differenti si utilizza l'attributo srcset.

Questo significa che, a meno che non sia necessario supportare i vecchi browser è possibile fare in modo che Google indicizzi la tua immagine ad alta risoluzione, mentre l'utente che accede alla pagina otterrà l'immagine che meglio si adatta al suo dispositivo.
Sarà quindi sufficiente inserire la miglore immagine nell'src e quelle ridotte nell'attributo <src_set>.

Questa tenica può aiutarti enormemente, considerando che la qualità dell'immagine è un importante fattore di ranking.

La risoluzione delle immagini, quindi, è importante quando si cerca di classificare contenuti visivi ma fai attenzione perchè Googlebot è in grado di capire se hai usato un software per aumentare le dimensioni e sarà in grado di capire se è sfocata, difficile da leggere, ecc.

Considerando che vale comunque la pena avere immagini ad alta risoluzione indicizzate, anche rilevandole come sfocate saranno comunque indicizzate e meglio considerate.

Alcuni software gratuiti per modificare le proporzioni delle immagini che funzionano molto bene sono Fastone Image o ImageMagick, perchè dispongono di molti filtri per ridurre gli artefatti del ridimensionamento.

Come usare il markup dello schema ImageObject per aumentare il tuo potenziale di ranking

Sono appassionato di dati strutturati perchè sono un ottimo strumento per ottenere alcune funzionalità tra le SERP per portare a CTR più elevati.
Detto questo, esistono centinaia di markup disponibili che Google è in grado di leggere, anche se purtroppo questi codici non influenzano il posizionamento.

Il markup più importante per la SEO delle immagini è ImageObject di schema: viene usato per segnalare dove si trova l'immagine e per dare molte informazioni aggiuntive.
Quanto segue è la versione base: 

<img itemprop="contentUrl" alt="descriione dell'immagine" src="/image.url.jpg"/> 
<meta itemprop="contentUrl" content="miniatura.jpg"/>

Il motivo principale per cui dobbiamo usare questo attributo è l'attributo <thumbnail>.

Attributo Thumbnail

Sia per le immagini degli articoli che per le immagini dei prodotti, Google ha una linea guida:

"Per ottenere i migliori risultati, crea diverse immagini ad alta risoluzione [...] con le seguenti proporzioni: 16x9, 4x3 e 1x1".

Ciò significa che per ogni immagine che si carica, è necessario avere anche tre immagini aggiuntive che abbiano questi rapporti.

Naturalmente, l'utente non dovrà vedere queste tre immagini aggiuntive.

Attraverso l'attributo <thumbnail>, sarai in grado di aggiungere tre versioni per ciascuna immagine della tua pagina.
Queste miniature, a loro volta, verranno indicizzate e saranno quelle che appariranno tra le serp.

Se la pagina web contiene i markup che a sua volta contengono i link alle immagini che l'utente non vedrà mai grazie ai meta tag, il cui compito è quello di dire al motore di ricerca che quelle immagine sono anteprime e Google, a sua volta, utilizzerà quelle miniature nei risultati della ricerca.

Dove trovare le immagini?

Le immagini le trovi sui soliti siti stock ma dovresti crearle originali.
Questa è una questione molto importante in ottica SEO, oltre che di unicità di contenuti.

Va da sé che non si dovrebbe mai rubare il contenuto grafico visivo di un altro sito web sei vuoi evitare un avviso DMCA per violazione di diritti d'autore.

Sappiamo che l'unicità dell'immagine è un fattore importante per l'ottimizzazione; nonosante ciò, molti si rivolgono ancora alle immagini stock (me compreso), semplicemente perché sono più facili da reperire.

In termini di severi sforzi di ottimizzazione, tuttavia, è sempre preferibile creare immagini e non utilizzare quelle reperibili sui siti stock, anche se le si acquista.
Considera sempre che anche se hai acquistato un'immagine, Google non lo sa. Quello che il motore di ricerca riscontrerà sarà un'immagine indicizzata tempo indietro, proprio da quei siti, quindi, sarà una copia. 

Google sa da dove proviene quell'immagine, chi è il suo creatore, la data di pubblicazione, ecc.
Ciò significa che anche se l'hai pubblicata sul tuo sito web, l'unico modo per trarne qualche vantaggio è assicurarsi di ottenere la massima qualità possibile, preferibilmente - una qualità superiore a quella indicizzata in passato dalla versione trovata sui siti stock.

Sfortunatamente, vendere un'immagine con una risoluzione uguale o ridotta rispetto a quella visibile è una pratica nota ai fornitori. 
Quell'immagine quindi, non ti aiuterà per niente in ottica SEO, addirittura, forse dovresti chiedere i soldi indietro.

Avvengono spesso furti online e dato che Google ama le pagine con immagini, e creare contenuti grafici originali richiede molte risorse, spesso accade che un altro furbastro rubi le tue foto cercando di utilizzarle per posizionarsi ed ottenere visibilità.

Per tutelarti, dovresti sempre aggiungere alcuni attributi specifici che indicano chi è il proprietario dell'immagine, attraverso lo standard IPTC o il markup ImageObject.

I tre attributi più importanti sono:

  • Autore (artista; creatore) - l'autore dell'immagine
  • CopyrightNotice - link alla licenza di copyright e la sua descrizione
  • Fonte (credits) - link al proprio sito web o al sito web da cui si è presa l'immagine.

Se i tuoi concorrenti si limitano a copiare l'immagine, Google ti considererà proprietario e ti darà preferenza a causa di questi tag.
Se la concorrenza cancellerà quei tag, Google ti darà comunque la preferenza in quanto ci incoraggia a utilizzarli.
Se la concorrenza utilizzerà la tua stessa licenza, potrai rivalerti con una marca temporale e procedere per vie legali.

Quale formato immagine funziona meglio per la SEO?

Tempo fa c'erano molti formati immagine tra cui scegliere: JPEG, PNG, GIF.
Oggi la questione dell'estensione "migliore" si risolve molto più facilmente: il formato webP è in assoluto il migliore.

Quasi tutti i browser supportano il webP in modo nativo, la conversione richiede pochissimo tempo.
Il webP è circa il 25% inferiore rispetto all'equivalente versione in JPEG e PNG, che si tratti di immagine senza perdita dati o meno.

Certo, esistono formati che offrono livelli di compressione maggiori ma non sono supportati da tutti i browser.

Il formato webP è supportato da oltre l'80% di tutti i browser.
Conviene quindi investire in questo 80%; per l'altro 20%, potremo contare sempre sul buon vecchio JPEG.

Unico punto: pare che ad oggi i social abbiano qualche problema nel creare l'anteprima col formato webp tramite opergraph.
In questo post, ad esempio, tutte le immagini sono in webP e per creare l'anteprima ho dovuto usare un JPG.

Lazy Load e CDN: convegono?

Un consiglio molto diffuso tra i SEO è quello di usare il Lazy Load e le CDN per le immagini.
Sono considerate pratiche obbligatorie se si vuole aumentare la velocità di caricamento della pagina.

La velocità della pagina è importante, naturalmente, ma davvero dovremmo sacrificare altri aspetti dell'ottimizzazione per migliorare marginalmente i tempio di caricamento?

Dovremmo fidarci di Lazy Load?

Il Lazy loading è una tecnica di codifica: non si caricano immediatamente tutti gli oggetti presenti ma solo durante lo scroll.
In breve: se non hai bisogno di alcuna ottimizzazione delle immagini e vuoi concentrarti sulla velocità della pagina, usa il Lazy.

Se, invece, miri al posizionamento e non hai centinaia di immagini per pagina, allora evita il lazy load.

Il problema è che è molto difficile capire come Googlebot interpreta la logica dei JS sulle nostre pagine web.
Per questo motivo, il Lazy Load può rendere inutili tutti i vantaggi che nostre immagini portano al sito e spesso la percezione di velocità di caricamento è un compromesso trascurabile.

Per contro, Google ha raccomandato da diversi anni (più volte!) di usare il lazy load e questo punto ha confuso molti webmaster portandoli all'esasperazione.
Googlebot non è in grado di leggere le istruzioni del lazy load poiché il crawler elabora il nostro codice solo come un enorme mucchio di testo HTML.

Questo significa che usando il lazy loading ti dai la zappa sui piedi!
Una soluzione potrebbe essere quella di usare il tag <noscript>, ma il crawler non è in grado di interpretare correttamente la logica js, quindi, siamo punto d'accapo.

Le cose adesso vanno un po' meglio da quando Googlebot ha iniziato a usare Chrome 76 per eseguire la scansione delle pagine.
Tuttavia, il problema persiste: i crawler semplicemente non riescono sempre a seguire in modo efficiente le istruzioni JS.

Aggiungere un lazy load ad una pagina web con, ad esempio, 10 immagini non è molto funzionale: la maggior parte dell'utenza non sarà in grado di accedere alle tue immagini in modo ottimale e anche in questo caso, il lazy load non migliorerà molto la velocità.

Per concludere, direi che se non ti interessa il traffico organico proveniente dalle immagini e hai una pagina con decine e decine, allora usa il lazy load.

Dovresti usare la CDN?

Le CDN (content delivery network) sono un sistema di server che vengono affittati per aumentare la velocità delle pagine e gestire un traffico eccessivo.
In sostanza, le tue pagine web sono più veloci perché i server a cui stanno effettivamente accedendo sono più vicini fisicamente all'utenza.

In breve: se hai a che fare con un'enorme traffico che riporta un ping al tuo server di oltre 80 ms, allora si, la dovresti usare, ma se così non fosse, la CDN può finire per crearti danno, perchè costringeremo i browser a sessioni più complesse per ottenere più o meno lo stesso risultato.

Quando usare la CDN

Per quanto riguarda i risultati effettivi, la CDN è utile solo in circostanze molto specifiche, ad esempio:

All'improvviso si riceve molto traffico e i server non sono in grado di gestirlo.
Quando la CDN ti fornisce un servizio o una funzione aggiuntiva, ad esempio la conversione di immagini in massa nel formato webP.
A parte questo, la CDN non è indispensabile, e questo è dovuto alla natura stessa dei CDN.

La CDN è funzionalmente un altro server che noleggi per fornire un'esperienza più veloce all'utenza, perchè "più vicino".
Ma ciò che accade in realtà con una CDN funzionale è che, indipendentemente da come la si imposta, si sta costringendo i browser a creare due connessioni: una a voi, e una alla CDN.

La CDN richiede un browser più veloce perchè sono necessari mediamente 30ms in più per creare una connessione alla CDN, senza considerare cose come TLS/SSL, congestione, routing, e così via.
Questo significa che il ping non sarà il 30ms pubblicizzato, ma un valore molto più alto.

Il tempo effettivo necessario per creare una connessione tra server e il browser potrebbe arrivare fino a centinaia di millisecondi e questo non è esattamente il vantaggio che cercavi di ottenere.

La CDN può sicuramente essere una valida opzione ma solo se il ping della tua utenza supera gli 80-100ms.
Considera anche che questo è il ping di un browser che accede ad un server lontano mezzo mondo (senza contare i problemi tecnici).

Inoltre, ci è stato detto nell'ultimo decennio che la posizione dell'host influisce sul posizionamento e che è meglio avere i server più vicini al proprio pubblico.
In una situazione in cui il ping è inferiore a 80ms, il framework CDN non fornirà grandi benefici peggiorerà le prestazioni.

Come usare GoogleVision per capire come l'IA di Google vede le immagini

Uno degli strumenti più utili nell'arsenale di ottimizzazione delle immagini dell'esperto SEO è l'API Cloud Vision di Google.
Il servizio è a pagamento ma fortunatamente, c'è una prova gratuita funzionante, e usarla dopo aver terminato il periodo di prova è anche molto semplice.

Carica l'immagine che vuoi aggiungere alla tua pagina web e guarda come Google la interpreta.
Ecco cosa "capisce" Google in quell'immagine.

Non male, no?
È uno strumento molto utile.

Attraverso di esso, vedrai come Google legge il testo presente nelle pagine, come quell'immagine funzionerà nella ricerca ed altro ancora.

Nella colonna Etichette di Google Vision API, vedrai a quali query di ricerca l'analisi dei media punterà dopo che la tua immagine sarà stata scansionata, indicizzata e analizzata.

L'industria che ne trarrebbe maggior beneficio è quella dei servizi medici ma purtroppo, un numero enorme di immagini caricate su quei siti web finisce per essere etichettata come "contenuto per adulti".
Quelle immagini, quindi, ottengono solo penalizzazioni e finiscono per non essere mostrate come risultato di una ricerca sicura e poiché la ricerca sicura è l'impostazione predefinita per la maggior parte dell'utenza che fa ricerche - e noi stessi di solito non la togliamo quando cerchiamo un servizio medico - questi siti web finiscono per subire perdite di posizionamento e bassi CTR.

Conclusione

Esistono altri punti che non mi sono soffermato a descrivere ma credo di essere stato abbastanza esaustivo.
Trovo molto interessante il fatto che Google riconosca le immagini tramite AI e le posizioni correttamente se l'ALT corrisponde a ciò che esso vede.
Dai, smettiamola di mettere una parola chiave nell'ALT a caso. La pacchia è finita da tempo.

L'ottimizzazione delle immagini richiede un sacco di tempo, risorse e spesso un fotografo professionista. Questo è il motivo per cui è trascurata.

Se la SEO è costosa, questo è uno dei motivi; quando ti viene fatto un preventivo per posizionare il tuo sito, chiedi sempre se le immagini sono originali.

 

Aggiungi commento


Andrea Giudice Esperto seo e consulente google ads itlaiaAndrea Giudice, esperto SEO e consulente Google ADS

Contattami subito senza impegno per un analisi al tuo sito o per dare vita ad un progetto in rete

Chiedi una consulenza

Contatti

 

Andrea Giudice su Facebook Andrea Giudice su Twitter Andrea Giudice su linkedin Andrea Giudice su instagram Il feed del blog di Andrea Giudice esperto seo freelance

Abbiamo 144 visitatori e nessun utente online

Badge Linkedin

Ultimi commenti

Login