SEO Immagini: Guida all'Ottimizzazione Definitiva in 11 Step

Gli alt tag sono i testi alternativi che vengono mostrati al posto dell’immagine quando il browser non riesce a caricarla per qualche motivo. Ma anche quando l’immagine viene visualizzata correttamente, passandoci sopra col cursore del mouse potrai vedere il testo di questo tag (a seconda delle impostazioni del tuo browser). Anche l’attributo alt aggiunge valore al tuo sito web: curando questo elemento per ciascuna delle tue immagini contribuirai alla conquista di un ranking migliore. Di fatto, anzi, l’oculato utilizzo degli alt tag è probabilmente il metodo più efficace per fare in modo che i prodotti del tuo e-commerce risultino in evidenza su Google images o nella ricerca generica.

Diamo un’occhiata al codice sorgente di un alt tag:

La priorità numero 1, quando provvedi ad ottimizzare le immagini, è di compilare per ognuna di esse il campo alt tag. Ecco alcuni suggerimenti:

• descrivi le tue immagini per esteso, esattamente come per il nome del file: le abbreviazioni non sempre sono interpretate
• se vendi prodotti che hanno un numero di serie o di modello, includili nell’alt tag
• non “farcire” allo stremo i tuoi alt tag di keyword (alt=”honda hornet naked moto compra miglior prezzo sconti affare” o simili)
• non utilizzare gli alt tag per le immagini puramente decorative: i motori di ricerca penalizzano anche l’eccessiva ottimizzazione

Spendiamo qualche parola anche per il title dell'immagine. La "letteratura" in materia di web marketing ha discusso lungamente sulla sua importanza, in particolare rapportandola a quella dell'alt tag. Non è il caso di ripercorrere qui l'intero dibattito, ma segnaliamo che Google ha esplicitamente specificato come sia l'alt tag l'elemento che gli spider tengono maggiormente in considerazione per comprendere il significato del file immagine. Il title, d'altro canto, fornisce informazioni aggiuntive a corredo. Indipendentemente da chi, fra alt tag e title, vinca questo braccio di ferro, il nostro consiglio è di sfruttare qualunque opportunità di ottimizzazione per le tue immagini. Compila dunque anche il title: per quanto riguarda la struttura ed il contenuto del testo da scegliere puoi, in linea di massima, rifarti alle medesime indicazioni che abbiamo suggerito per nomi e alt tag.

Questo punto è particolare perché riguarda un aspetto importante dell'ottimizzazione delle immagini, ma non le coinvolge direttamente: riguarda infatti il contesto nel quale si trovano inserite. Se entrassi in un negozio di prodotti tipici toscani e, fra insaccati e ottimi vini, trovassi la nostra fiammante Hornet, la cosa ti sembrerebbe quanto meno eccentrica, giusto? Ebbene, in qualche modo il crawler di Google prova la medesima sensazione se il significato dell'immagine inserita sulla tua pagina web non è ben contestualizzata nel testo che la precede e la segue. E Google non apprezza questo tipo di "originalità". Anche se hai un e-commerce, dunque, non sottovalutare l'importanza di un'appropriata redazione in ottica SEO dei tuoi contenuti testuali: fai in modo che introducano e forniscano dettagli in linea con il significato dell'immagine, così che Google possa giudicare il contenuto complessivo coerente, rilevante e - conseguentemente - di alta qualità.

Sempre parlando di contesto, aggiungiamo una brevissima postilla su un altro elemento che, pur essendo esterno all'immagine, influisce molto sul suo ranking in Google images. Stiamo parlando della Domain Authority del sito web, spesso abbreviata nell'acronimo DA: si tratta di una metrica sviluppata da Moz che determina, su una scala da 1 a 100, quanto è affidabile e autorevole il tuo sito web. È una discriminante fondamentale che i motori di ricerca utilizzano per valutare l'importanza di un dominio e, di conseguenza, la posizione da assegnargli nella pagina dei risultati. Quindi ricorda: la stessa immagine, anche ottimizzata per tutti gli altri parametri, se inserita in un sito con DA 57, avrà un ranking sicuramente maggiore rispetto a quello che avrebbe su un sito con DA 3.

Prima di proseguire con il resto delle cose da sapere sull'ottimizzazione delle immagini, assicuriamoci di aver assimilato ciò che abbiamo trattato fino a questo punto. Fortunatamente, ci viene in aiuto un video che puoi trovare sul canale YouTube di NetStrategy e che riportiamo anche qui.

Una tendenza molto comune è quella di mostrare i prodotti da diverse angolazioni. Rimanendo sulla nostra meravigliosa Hornet, quello che vuoi è che i tuoi potenziali clienti possano ammirare più di un dettaglio: per ognuno di essi crea un alt tag differente, così da sfruttare al massimo l’opportunità SEO di queste immagini extra. Giusto per fare un esempio:

L’obiettivo è di aggiungere delle descrizioni ai tuoi alt tag base in modo tale che gli utenti che stanno facendo delle ricerche sul web approdino al tuo sito. Uno sforzo in più da fare, ma per il quale Google ti ricompenserà.

Potresti poi desiderare di fornire immagini più grandi ai visitatori delle tue pagine; questo senz’altro ne migliorerà la user experience. È però buona norma evitare di farne l’upload e di restringerne poi le dimensioni dal codice sorgente: questo influirà negativamente sul tempo di caricamento, dal momento che ad un’immagine più grande corrisponderà un codice più grande. Potresti piuttosto scegliere di affidare ad un pop-up o all’apertura di una nuova pagina web separata, l’opzione di vedere l’immagine ingrandita.

Qualche dato da considerare:

• la maggior parte degli utenti aspetta circa 3 secondi per il caricamento di una pagina su computer desktop o laptop;
• questo tempo di attesa è invece di circa 5 secondi per le connessioni da dispositivi mobili;
• Amazon ha calcolato che un rallentamento di 1 secondo nella visualizzazione delle proprie pagine comporta la perdita di 1.6 miliardi di dollari all’anno;
• il load time è un fattore di ranking per l’algoritmo di Google.

Sulla base di questo, è chiaro che – se non vuoi dire addio ad una parte significativa dei tuoi potenziali clienti – le tue immagini non possono impiegare 15 secondi a caricarsi. Al contrario, se riesci a diminuire la dimensione dei relativi file e incrementare così la velocità di caricamento delle pagine, meno persone “cliccheranno via” dal tuo sito.

Cosa puoi fare? Su alcune piattaforme per e-Commerce la compressione delle immagini avviene in automatico. Negli altri casi, è necessario trovare una soluzione differente. Eccone una: ottimizzare le immagini per web con Photoshop. La procedura è estremamente semplice e consiste sostanzialmente nell'utilizzare la funzione Salva per web in Adobe Photoshop: questo ti permette di adattare il file alla dimensione più bassa che ti puoi permettere, vale a dire avendo cura del fatto che la qualità dell’immagine risulti accettabile per il contesto.

Se non utilizzi Photoshop hai comunque a disposizione una vasta scelta di tool online per l’editing delle immagini (ad esempio PicMonkey, Pixlr, FotoFlexer) e di applicazioni software gratuite e open-source (come Gimp).

In genere, per l’e-commerce si consiglia di mantenere le immagini al di sotto dei 70 kb: fare questo può spesso risultare complicato, ma procediamo col prossimo punto.

Sono 3 i formati immagine più comuni e che prendiamo in considerazione: JPEG, GIF e PNG. ll primo è tale anche per “anzianità di servizio”, ed è diventato una sorta di standard de facto per il web. Le immagini .jpg possono essere compresse considerevolmente senza perdere troppo in qualità. Le immagini .gif sono di qualità inferiore rispetto ai JPEG e sono utilizzate in contesti meno esigenti come icone o elementi grafici decorativi. Il formato GIF supporta anche le animazioni, come certamente tutti i Redditor-addicted sanno. In ambito SEO va benissimo utilizzare GIF per gli elementi semplici e con pochi colori di una webpage, mentre sono poco funzionali per immagini più complesse e dettagliate come le fotografie.

Le immagini PNG hanno preso piede come alternativa al formato GIF: supportano più colori e non sono lossy, cioè non comportano la perdita di parte delle informazioni originali durante la fase di compressione e decompressione dei dati. Le dimensioni dei file .png possono comunque essere molto maggiori dei corrispettivi in JPEG, perciò il loro uso deve essere dosato con attenzione.

Tirando le somme:

• per la maggioranza delle situazioni di un e-commerce il JPEG è il formato più indicato;
• non utilizzare il formato GIF per immagini prodotto di grandi dimensioni;
• utilizza .gif per thumbnail o elementi decorativi;
• il PNG è una valida alternativa sia al JPEG che al GIF;
• prova ad utilizzare il PNG-8 al posto del PNG-24.

In molti siti e-commerce vengono utilizzate le thumbnail, cioè anteprime in formato ridotto di immagini più grandi. Sono molto utili perché permettono di presentare visivamente gli articoli di una categoria senza rubare troppo spazio. L'esempio che vedi qui sotto è uno screenshot dal sito di e-commerce EMP.

Appurato che le thumbnail sono un buon alleato dell’e-commerce, dobbiamo però sottolineare che potrebbero essere anche una minaccia silenziosa per il tempo di caricamento delle tue pagine. Appaiono infatti in uno step piuttosto critico del funnel e, se producono un rallentamento delle pagine categoria, possono portare alla perdita del cliente.

Fai in modo che la dimensione delle thumbnail sia la minore possibile; in questo caso vale sicuramente la pena rinunciare ad un po’ di qualità in favore di un alleggerimento del file. Anche per queste immagini il testo degli alt tag dovrebbe differenziarsi da quello associato alla versione più grande della stessa immagine. Oltre a creare un problema di contenuti duplicati, fare il contrario potrebbe comportare anche l’indicizzazione delle thumbnail al posto delle immagini delle quali costituiscono solo le anteprime, il che non è positivo. Piuttosto, meglio non attribuire alcun alt tag alle thumbnail.

Se il tuo sito impiega delle gallerie in JavaScript, pop-up per immagini o altri “tentativi Flash” di migliorare l’esperienza di shopping complessiva, una Google image site map potrebbe aiutarti ad essere notato dal re dei motori di ricerca. I web crawler non possono scansionare le immagini che non sono richiamate dal codice sorgente della pagina: per far sì che le trovino, dovrai segnalare la loro localizzazione in un’apposita mappa.

Google mette a disposizione diverse linee guida per la pubblicazione delle immagini. Puoi inoltre utilizzare l’apposita estensione di Google Sitemaps per dare al motore di ricerca delle informazioni aggiuntive sulle immagini del tuo portale; così facendo farai in modo che Google possa trovare più immagini di quante ne avrebbe localizzate normalmente.

Anche se le sitemap non garantiscono che le tue immagini siano indicizzate da Google, sicuramente migliorano l’ottimizzazione del tuo sito. Google Webmaster Tools fornisce indicazioni dettagliate su come redigerle correttamente: un elemento molto importante che viene segnalato è di corredare le immagini con le informazioni necessarie utilizzando dei tag specifici.

I siti web hanno spesso un assortimento di elementi grafici come sfondi, pulsanti e cornici; nel caso dei portali e-commerce, potremmo considerare qualunque immagine che non sia di un prodotto come un elemento decorativo.

Nonostante questo tipo di immagini possano fare la differenza dal punto di vista del design, anch’essi possono gravare sulla dimensione dei file e sui tempi di caricamento. Considera pertanto di ottenere un buon compromesso tra l’estetica e la funzionalità del tuo sito: né l’una e né l’altra dovrebbero ostacolare in alcun modo la conversione dei tuoi visitatori in acquirenti.

Concludiamo questo paragrafo con alcune tips utili:

• scegli formati PNG-8 o GIF per cornici o pattern semplici: puoi ottenere un effetto grafico gradevole anche con pochi bytes;
• ove possibile, sfrutta i CSS per creare elementi decorativi al posto delle immagini;
• se vuoi utilizzare un’immagine di background, un trucco che puoi adottare per ridurne la dimensione è di tagliarne la parte centrale – che verrà coperta dal corpo della pagina – e sostituirla con una zona trasparente o in colore flat.

L’acronimo CDN sta per Content Delivery Network. Si tratta di insiemi di localizzazioni nel mondo che ridistribuiscono il contenuto dei tuoi server e conservano in cache i file che non richiedono un continuo aggiornamento; diversi e-commerce le utilizzano come hosting per le immagini ed altri file. Offrono un servizio che può risultare efficace per velocizzare i tempi di caricamento delle pagine e risolvere problemi di banda.

Le criticità si presentano quando parliamo di backlink, i link in ingresso. Come saprai, questi sono un elemento critico per la SEO e, in linea di massima, più il tuo sito ne ha e meglio viene valutato dai motori di ricerca. Mettendo le tue immagini in host in una CDN, in pratica le rimuovi dal tuo dominio e le consegni a quello della Content Delivery Network. Quando qualcuno linka alla tua immagine, quindi, in realtà sta regalando un backlink al sito della CDN. Insomma: come in molti altri contesti, dovrai operare una valutazione costi/benefici. Qualche appunto:

• il fatto che una pratica sia molto diffusa non la rende automaticamente la mossa migliore per il tuo specifico business;
• se il tuo sito web deve gestire quantità molto elevate di affari ogni mese, probabilmente appoggiarsi ad una CDN può essere una buona idea per sollevarlo da problemi di banda;
• se, invece, il tuo e-commerce muove “solo” centinaia di visitatori al giorno, è possibile che tu non abbia bisogno di un ulteriore servizio di hosting;

Ci sono poi altre criticità SEO collegate all’utilizzo di CDN sulle quali per ora non ci soffermiamo; in generale, assicurati di avere il supporto di un professionista che possa consigliarti quali mosse sono le più opportune per te.

Il fine ultimo dell’ottimizzare le immagini è di produrre un aumento nel tuo bilancio. Abbiamo parlato di come ridurre le dimensioni delle immagini e di come fare in modo che i motori di ricerca le indicizzino; ma come possiamo verificare quali convertono maggiormente?

• Testa il numero delle immagini prodotto per pagina: ridurre il numero delle immagini per pagina potrebbe aumentare il click-through-rate e le vendite. Ma è anche possibile che più immagini in una stessa pagina (come foto di un prodotto da più angolazioni) migliorino la user experience e portino quindi ad un incremento delle vendite. L’unico modo per capirlo è fare degli esperimenti.
• Testa quali inquadrature preferiscono i tuoi clienti: scegliere, per le immagini dei prodotti, le viste che i tuoi clienti preferiscono potrebbe incentivare la loro fidelizzazione. Un modo efficace per ottenere dati a questo proposito è chiederlo direttamente ai tuoi clienti: le interviste sono di solito un ottimo mezzo per comprendere se si è sulla strada giusta.

L’ottimizzazione delle immagini è un’operazione che spesso viene trascurata; tuttavia è un aspetto della Search Engine Optimization che riveste un ruolo molto più determinante di quanto si pensi per il posizionamento e la visibilità di un sito web su Google. Se poi il sito in questione è un e-commerce, l’importanza di tale manovra è più che mai amplificata.

Se vuoi che i prodotti del tuo shop online vengano presentati ai tuoi potenziali clienti prima di quelli dei tuoi competitor, allora non puoi esimerti dal curare in maniera puntuale anche questo aspetto SEO. Perciò, armati di pazienza e parti alla volta del perfezionamento di alt tag, nomi, formati e dimensioni delle immagini. Se poi sentirai l’esigenza di avere dei compagni di viaggio che conoscano bene la strada, chiamaci: in NetStrategy teniamo sempre la valigia pronta.