Indice
- COSA CI GUADAGNI: Perché devi ottimizzare correttamente le tue immagini.
- SEO E USER EXPERIENCE: I tuoi utenti preferiscono trovarsi davanti ad immagini
- SITEMAP: Indicizzane una ad Hoc per le immagini.
- IMPORTANTE: Se utilizzi troppe immagini grandi rallenterai il caricamento della tua pagina, sempre che tu non faccia così…
- RIDURRE IL PESO: 2 consigli pratici.
- SERVER: 2 accorgimenti (facili) per ottimizzare drasticamente i tempi di caricamento delle tue immagini.
- OTTIMIZZAZIONE SEO DELLE IMMAGINI: Ciò che devi assolutamente conoscere.
- 1. Grazie alle immagini puoi superare il primo risultato.
- 2. Ottimizza il nome dell’immagine.
- 3. Ottimizza il tag ALT.
- 4. Usa immagini dalle giuste dimensioni.
- 5. Usa immagini originali
- 6. Sapevi che Google legge (e capisce) il testo e ciò che viene mostrato nelle immagini?
- 7. Cosa sono gli EXIF data e come ottimizzarli
- 8. Immagini e semantica (NON fatelo a casa).
- DOVE TROVARE IMMAGINI BELLE E GRATUITE
- 29shares
- Facebook22
- Twitter3
- Google+0
- LinkedIn4
Ti è mai capitato di utilizzare Google immagini, fare click su un immagine e finire su un sito?
Quando si parla di aumentare le visite al sito e generare traffico troppo spesso ci si scorda del potenziale che hanno le immagini e per questo motivo oggi ho deciso di rispondere alla tua domanda riguardo il come apparire su Google scrivendoti in questo post TUTTO, ma proprio tutto ciò che devi conoscere in tema di ottimizzazione SEO per le immagini se poi ti dovessi accorgere che ho scordato qualcosa scrivimelo nei commenti ok?
Prima di darti un passaggio nel mondo dell’ottimizzazione SEO delle immagini ci sono alcune brevi premesse che da consulente SEO ritengo importanti e doverose.
Scarica l'articolo completo in PDF!
Questo articolo è lungo +2000 parole. La maggior parte dei miei lettori preferisce scaricarlo per rileggerlo con più calma.
Sblocca ora questo articolo in formato pdf.
COSA CI GUADAGNI: Perché devi ottimizzare correttamente le tue immagini.
I benefici derivanti da un corretto utilizzo delle immagini nei tuoi contenuti sono molteplici ma, secondo me, i 3+1 principali benefici sono:
- Contenuti più chiari e assimilabili per i tuoi utenti.
- Maggiore attenzione durante il temibile “scrolling disattento” nelle tue pagine (aumentando il tempo di permanenza).
- Un immagine, quando correttamente ottimizzata in ottica SEO, ti aiuta a spiegare ai motori di ricerca perché la tua pagina è meglio delle altre.
- BONUS: Un contenuto denso d’immagini curate viene di norma giudicato un contenuto “migliore” e di maggior valore.
Secondo Alexa il 55.2% del traffico su Google è attribuibile a Google Search, il 24.7% a Gmail e il 10.1% proprio da Google Immagini.
In poche parole, una marea di traffico, e tu che sia un esperto SEO o no non vuoi lasciarlo in balia del caso, vero?
SEO E USER EXPERIENCE: I tuoi utenti preferiscono trovarsi davanti ad immagini
Secondo uno studio condotto grazie all’eye tracking dal Nielsen Norman Group “Photo as a Web Content“, emerge molto chiaramente come le immagini aiutino le persone a comprendere meglio il testo guadagnandosi addirittura una maggiore attenzione.
Lo studio ci mostra infatti come, a parità di possibilità l’immagine sia quasi sempre il punto di partenza per comprendere il testo e non viceversa.
Un corretto utilizzo delle immagini ti aiuta dunque a guadagnare un livello di lettura più profondo e meno superficiale.
SITEMAP: Indicizzane una ad Hoc per le immagini.
Quando abbiamo visto come indicizzare un sito abbiamo parlato anche di immagini ma sapevi che puoi generare una sitemap ad Hoc contenente tutte le immagini?
Seguendo questo link trovi le direttive ufficiale di Google: https://support.google.com/webmasters/answer/178636?hl=it
Se utilizzi WordPress, attraverso SEO by Yoast, puoi attivare o disattivare la generazione automatica della sitemap andando su Sitemaps XML->media
La sitemap per le immagini consente a Google di trovare con facilità ogni media.
Vuoi approfondire l’indicizzazione? Leggi l’approfondimento: indicizzare un sito
IMPORTANTE: Se utilizzi troppe immagini grandi rallenterai il caricamento della tua pagina, sempre che tu non faccia così…
Se da un lato hai un sacco di motivi per fare un largo utilizzo delle immagini sulle tue pagine e più in generale nei tuoi contenuti è anche vero che quando un immagine non è correttamente ottimizzata può trasformarsi in un vero e proprio macigno capace di rallentare il tuo sito come poche cose al mondo.
Per fortuna viene però in tuo aiuto l’ottimizzazione SEO delle immagini che, grazie ai suoi perfezionamenti, ti permette di risolvere metodicamente anche questo fastidioso problema.
In ottica SEO infatti, mai come in questo periodo storico votato al mobile, il tempo di caricamento delle pagine è di fatto uno tra i principali fattori di Ranking.
Google AMP ne è una dimostrazione e nessun SEO si sogna infatti di ignorare questo parametro e lavorare all’ottimizzazione SEO delle immagini significa oggi (anche e sopratutto) sapersi garantire un corretto tempo di caricamento di pagina.
Ecco dunque cosa e come puoi fare:
- Ottimizzare la dimensione del file
- Richiedere al server il caricamento delle immagini solo quando servono
- Sfruttare un hosting “vicino” ai tuoi utenti
Huuuuu vuoi sapere come? Si parte!
RIDURRE IL PESO: 2 consigli pratici.
Il primo problema con il quale hai molto probabilmente già avuto a che fare riguarda il peso delle immagini.
Mettiti in testa una cosa: utilizzare sulle tue pagine immagini pesanti significa far sprofondare i tuoi contenuti in quell’abisso chiamato web.
Più di una volta mi è stato chiesto quale fosse il “peso ideale” per un immagine e sebbene non esista un “peso forma” per le tue immagini qui vale la regola che meno pesa meglio è.
JPG & PNG8: I formati amici della SEO per le tue immagini sul web.
A parità di qualità un immagine può arrivare addirittura a pesare il doppio quando salvata utilizzando un formato scorretto. Senza entrare nel dettaglio di tutti i formati disponibili quelli che ti consiglio di preferire (a seconda del caso) sono: JPG & PNG 8Bit.
Quando preferire il JPG?
Se ti trovi davanti ad immagini molto elaborate è probabile che, a parità di qualità, il formato JPG ti restituisca un immagine più leggera.
Se ad esempio salvassi questa vista panoramica densa di dettagli nel formato PNG 8 avresti un immagine pesante 133.2Kb.
Al contrario, in formato JPG compresso, potresti arrivare ad ottenere un file finale di soli 29Kb!
Il bello del formato jpg è proprio che ti permette di regolare il livello di compressione lasciando che sia tu a preoccuparti del compromesso peso/qualità.
Quando preferire il PNG 8Bit?
Al contrario della compressione JPG che se spinta al massimo toglie qualità alle tue immagini, grazie al formato PNG 8 Bit puoi garantirti immagini leggere e sempre di ottima qualità.
Lavorando appunto su una scala di colori più ridotta questo tipo di formato da il suo meglio quando utilizzato per salvare immagini con un basso numero di dettagli.
L’immagine PNG 8 qui sopra ad esempio, pur mantenendo tutti i suoi dettagli, pesa soltanto 14Kb!
TIPS: Personalmente nei miei contenuti cerco sempre di tenermi sotto i 50Kb ad immagine.
Tool gratuiti e 100% Online per comprimere le tue immagini.
Personalmente utilizzo da anni Photoshop ma negli ultimi mesi sono rimasto molto soddisfatto nello scoprire questi semplici quanto utili tool sempre pronti all’uso.
Il primo: https://compressjpeg.com/it/
Il secondo: https://compresspng.com/it/
Come vedi ti trovi davanti a due servizi completamente identici se non fosse per l’output!
Vai sul tuo preferito e trascina le tue immagini nell’area pronta per il drag’n drop
Entro qualche secondo potrai scaricare le immagini pronte all’uso opportunamente compresse in un file zip.
BONUS: Questa non la sapevi…Sfrutta Google Page speed!
Come ti spiegavo qualche post fa nell’articolo dedicato alla SEO on page questa è una vera e propria chicca usata da pochi.
Sapevi infatti che Google page speed oltre a dirti quanto lento o veloce sia la tua pagina ti fornisce i files già ottimizzati pronti da sostituire?
Se vuoi ottimizzare le immagini già presenti sulle tue pagine vai su https://developers.google.com/speed/pagespeed/, analizza la url realtiva alla pagina e, una volta terminato il caricamento fai click in basso sul link presente nel box “ottimizzazioni trovate”.
Una volta ricevuto lo ZIP prendi le immagini ottimizzate, sostituiscile alle originali e hai fatto!
SERVER: 2 accorgimenti (facili) per ottimizzare drasticamente i tempi di caricamento delle tue immagini.
Accorgimento 1. Di al server di caricare le immagini solo quando servono.
Chi ha detto che le immagini devono essere caricate sempre e tutte in una volta?
Immagina di avere sulla tua pagina 10 immagini da 50Kb ciascuna. Se il server le richiedesse tutte insieme, prima di poter vedere la tua pagina caricata dovresti attendere il caricamento di ben 500Kb di roba anche se la maggior parte si trovasse ad esempio in fondo alla pagina.
Proprio per evitare di caricare immagini che non servono, ormai da anni, esiste una tecnologia semplice e di facile implementazione che in sintesi blocca il caricamento delle immagini per renderle disponibili solo quando effettivamente richieste, il suo nome è LazyLoading.
Se vuoi ridurre drasticamente i tempi di caricamento delle tue pagine impedendo al server di scaricare senza motivo tutte le risorse, il mio suggerimento è di non perderti quanto ti sto per dire.
Lazy Loading per sviluppatori.
Se sei uno sviluppatore saprai certamente implementare jquery nelle tue applicazioni.
Vai all’indirizzo https://plugins.jquery.com/lazyload/, scarica il plugin e installalo sul tuo sito.
Utilizza il tag NOSCRIPT per preservare la struttura html dell’immagine e, a differenza di quanto vedi nella guida ufficiale ricordati di aggiungere sempre il tag ALT.
Sebbene quanto scritto nella guida ufficiale sia corretto personalmente ritengo ancora utile per la SEO preservare il costrutto html dell’immagine integro così da poter utilizzare tutti i tag utili per l’ottimizzazione del posizionamento sui motori di ricerca.
Lazy Loading per NON sviluppatori.
Se non sei uno sviluppatore e utilizzi WordPress non hai che l’imbarazzo della scelta. Vuoi sapere quale plugin ho scelto io?
Il suo nome è A3 Lazy Load.
Il bello di questo plugin è che ti permette d’implementare il LazyLoading in maniera semplice e assolutamente veloce.
Cercalo tra i plugin di wordpress e una volta installato assicurati di attivare il suo caricamento per le immagini, su tutti i contenuti e nei widget.
Infine, per fare in modo che il NOSCRIPT venga attivato sposta su ON la voce “noscript support”.
Semplice no? Ed il bello è che per fare tutto sono sufficienti poco meno di 5 Min!
Accorgimento 2. NON rallentare il caricamento delle tue immagini usando server distanti dai tuoi visitatori.
I tuoi utenti sono in italia? Scegli un server che stia sul territorio nazionale!
Devi sapere che ogni volta che viene caricata una risorsa proveniente dalle tue pagine il browser fa un’apposita “chiamata al server”.
In sostanza il tuo browser chiede al server di dargli, ad esempio, quella specifica immagine.
Più distante sarà il server tanto più tempo ci impiegherà a fornire quanto richiesto. Utilizzando un server “vicino” ai tuoi visitatori ridurrai dunque la latenza migliorando i tempi di caricamento delle tue immagini.
Su questo principio si fonda il delivery delle immagini attraverso reti globali che prendono il nome di CDN.
Il funzionamento di una CDN è molto semplice. In sostanza conserva una copia in cache del tuo contenuto per poi servirlo all’utente dal nodo più prossimo alla sua connessione.
i vantaggi derivanti dall’utilizzo di una CDN sono svariati e oltre a migliorare la velocità di caricamento delle tue immagini ci sono notevoli vantaggi anche dal punto di vista della sicurezza.
Personalmente la mia scelta va su Cloudflare che nella sua soluzione 100% gratuita mi permette di utilizzare potenti funzioni di cache, content delivery, risparmio banda nonché di firewall.
Onestamente non saprei trovarti un motivo per non utilizzarlo 😀
Accorgimento BONUS: Carica le immagini da un dominio senza cookie.
Tra tutte le richieste fatte al server ogni volta che viene caricata un immagine c’è ne sono numerosissime tra script e cookie.
Visto che quando carichi un immagine puoi benissimo privarti di tutta quella roba faresti bene a creare uno o più sotto domini nei quali caricare esclusivamente gli assets per poi richiamarli in assenza di cookie!
OTTIMIZZAZIONE SEO DELLE IMMAGINI: Ciò che devi assolutamente conoscere.
Molto bene, chiariti i primi aspetti tecnici fondamentali su ciò che puoi e ciò che dovresti fare possiamo ora addentrarci nel vivo di questo post.
la prima consulenza web è sempre gratuita! Si lo voglio!
1. Grazie alle immagini puoi superare il primo risultato.
Ti svelo un piccolo segreto che se usato a dovere può fare la differenza in termini di strategia: Spesso e volentieri, a differenza di Google Search, a parità di parola chiave, su google immagini troverai meno concorrenza.
Google immagini infatti, quando posiziona i risultati, utilizza un sistema algoritmico completamente a se rispetto a Google Search e questo significa che potresti essere anche in 50° posizione con una parola chiave trovandoti però in 1° su Google Immagini.
Ti faccio un esempio. Prendiamo una chiave a caso come ad esempio “porte in alluminio”.
Trattandosi di un prodotto con un evidente flessione estetica è abbastanza verosimile che l’utente vada a “guardare” le porte tra i risultati di Google Immagini alla ricerca di quella che gli piace di più.
Ecco che in questo caso il primo risultato appartiene al sito casapratica.it sito che al contrario non trova luce su Google Search se non oltre la 3° pagina!
Ma non è tutto perché grazie all’image box di Google questi stessi risultati vengono “iniettati” anche su Google Search in posizione addirittura prominente rispetto al primo risultato organico.
Ed ecco che magicamente un sito posizionato oltre la terza pagina si trova bello in mostra addirittura sopra il sito in prima posizione, scommetto che non ti dispiacerebbe farti trovare la no?
2. Ottimizza il nome dell’immagine.
Sebbene grazie all’intelligenza artificiale Google si dimostri sempre più bravo nel leggere e contestualizzare ciò che viene rappresentato all’interno delle immagini è bene ricordare che ad oggi il nome del file resta sempre un ottimizzazione da preferire.
Questo significa che:
- 123123.jpg non va bene
- parola-chiave.jpg tutto attaccato o separato dal segno meno va bene
3. Ottimizza il tag ALT.
Se c’è una cosa che ogni esperto SEO sa questo è proprio che lasciare un immagine senza tag ALT è un grave errore.
In HTML il tag ALT sta letteralmente per “testo alternativo” e se ti stai chiedendo alternativo a cosa la risposta è… alle immagini. Questo tag nasce infatti proprio per sopperire il vuoto davanti al mancato caricamento delle immagini e per questo motivo è bene che venga utilizzato per descrivere ciò che l’immagine contiene.
Presente l’immagine che ti ho mostrato poco fa?
Eccoti l’esempio della sua corretta ottimizzazione SEO:
4. Usa immagini dalle giuste dimensioni.
Perché continui a caricare immagini larghe 1000px se poi alla fine devono stare in uno spazio largo appena 300px ?
A me puoi dirlo, chi è che ti spinge a compiere questo atto vandalico?
Tra gli errori più comuni non potevo non nominare l’utilizzo di dimensioni non corrette. Se non vuoi sprecare risorse devi assicurarti di utilizzare sempre immagini delle corretta dimensione.
Se non hai idea di come fare puoi usare l’inspector del tuo browser chrome o Firefox.
Su Firefox ad esempio fai click con il tasto destro sull’immagine e poi seleziona “analizza elemento”.
Una volta aperto l’inspector, assicurandoti di avere l’immagine evidenziata, fai click sulla voce “calcolate”.
Il valore che ti comparirà nel box sotto la voce “spaziatura interna” ti dirà esattamente lo spazio necessario a quella specifica immagine per essere visualizzata.
Ovviamente lo stesso puoi farlo sulle colonne, o su qualunque altro punto del layout tu intenda “misurare”.
5. Usa immagini originali
Google, come probabilmente già sai, tende a preferire i contenuti originali e a “punire quelli copiati”. Ciò che in tanti ignorano e che questo accade anche per le immagini.
Come dimostra ampiamente la funzione “Google Search by Image” il motore di ricerca è perfettamente in grado di riconoscere un immagine originale da una copiata.
Sebbene le immagini migliorino in genere l’esperienza utente andando così ad incidere su fattori molto cari a Google – come ad esempio il tempo di permanenza – è sempre bene tenere presente che, quando possibile, sarebbe sempre bene utilizzare immagini 100% nuove.
TIPS
Hai notato che nei miei post tendo ad inserire quasi esclusivamente screen-shoot? Ecco, l’obiettivo è proprio quello di permettere a Google d’indicizzare queste nuove immagini “originali” aumentando così di riflesso il “valore” dei contenuti.
6. Sapevi che Google legge (e capisce) il testo e ciò che viene mostrato nelle immagini?
Il brevetto per la decodifica dei loghi registrato da Google nel 2011 è praticamente cosa vecchia se pensiamo che oggi, grazie all’intelligenza artificiale, riesce persino a riconoscere schizzi fatti a mano!
Vuoi provare? Eccoti il link: https://aiexperiments.withgoogle.com/quick-draw
Comprendere quest’aspetto è molto importante. Se c’è una cosa che ho imparato negli anni è infatti che tutto ciò che smuove qualcosa a livello algoritmico potrebbe tornarti utile per il tuo posizionamento.
Ma Google riconosce esattamente il testo contenuto nelle immagini?
Lascia che ti mostri un esempio. Prendiamo un articolo per il quale sono al momento in prima posizione.
A seguito della ricerca per immagini della parola chiave “frasi pubblicitarie” ecco comparire rispettivamente copertina e meme presente nel testo.
A quanto pare Google sta attribuendo peso a queste immagini perché presenti nell’articolo.
Questo è facile ma cosa accadrebbe se invece provassimo a cercare una parola non pertinente, per il quale il sito non si posiziona ma contenuta esclusivamente in un immagine?
Ecco la risposta, l’immagine viene riconosciuta e posizionata al primo posto su Google Images. Avevi forse dei dubbi?
7. Cosa sono gli EXIF data e come ottimizzarli
Permettimi di dirtelo subito: SI, Google legge gli EXIF data.
Questo tipo di dati contenuti all’interno delle immagini vengono aggiunti con l’intento di fornire informazioni addizionali sull’immagine come ad esempio quando è stata scattata, a che ora, dove etc…
Fermo restando che WordPress rimuove in automatico questi dati durante il caricamento delle immagini, ho ritenuto opportuno farti sapere che questi esistono, sono letti da Google e grazie alla loro ottimizzazione è possibile ad esempio specificare la paternità di un immagine o ad esempio inserire una EXIF description contenente le tue parole chiave.
Una lista completa relativa a questi dati è disponibile a questo indirizzo: https://it.wikipedia.org/wiki/Exchangeable_image_file_format
8. Immagini e semantica (NON fatelo a casa).
Non sono certo di quanto ti sto per dire ma la logica mi impone di pensare che se Google riconosce il contenuto delle immagini queste ultime avranno per forza un “peso semantico”.
Prendiamo un articolo come questo ad esempio, nel quale parliamo di SEO e di immagini. Utilizzando un immagine “nota” a Google per questo tema dovrei rafforzare per forza di cose la pertinenza su questo tema.
Ecco che allora faccio una prova… vado su Google Images, cerco “SEO image optimization”
e una volta ottenuta la lista d’immagini vado a caricare la prima.
Se due più due fa quattro così facendo dovrei aver inserito in questo articolo una “citazione autorevole” che aumenterà la pertinenza al tema trattato consegnando valore a questo articolo.
Ti farò sapere come è andata!
BONUS SOCIAL MEDIA: Immagini perfette per la condivisione.
Quando condividi un post avrai sicuramente notato che ogni social media mostra un immagine d’anteprima. Lasciare ai software la generazione automatica di quello spazio potrebbe compromettere l’efficacia del post e per questo motivo è molto importante che tu te ne prenda cura.
Ogni social media utilizza delle dimensioni proprie e come non bastasse queste cambiano nel tempo, per questo motivo ti segnalo questo post di SproutSocial nel quale trovi una lista sempre aggiornata delle dimensioni adatte per ogni social media: https://sproutsocial.com/insights/social-media-image-sizes-guide/
Se il tuo obiettivo è la “condivisione perfetta” non puoi fare a meno di conoscere il markup html basico per indicare ai social media quali informazioni condividere.
È consigliato utilizzare questi meta dati HTML subito dopo il meta tag “description” dunque all’interno del tag <head> della nostra pagina.
Facebook Open Graph
Info in italiano disponibili qui: https://developers.facebook.com/docs/sharing/best-practices
<meta property="og:title" content="/> <meta property="og:type" content="article" /> <meta property="og:url" content="" /> <meta property="og:image" content="" /> <meta property="og:description" content="" /> <meta property="og:site_name" content="" />
NOTA BENE
Se hai inserito i meta tag nella pagina ma Facebook continua a non mostrare l’immagine è molto probabile che tu debba inviare la URL attraverso il debugger che trovi qui: https://developers.facebook.com/tools/debug/
Una volta effettuato l’invio la cache di Facebook si aggiornerà mostrando correttamente i dati che gli hai fornito nel tuo markup.
Dimensioni delle immagini su Facebook
Usa immagini di almeno 1200 x 630 pixel per mostrarle sui dispositivi ad alta risoluzione. Usa immagini di almeno 600 x 315 pixel per mostrarle di dimensioni maggiori nei post con link a una pagina. La dimensione delle immagini può arrivare fino a 8 MB.
Immagini di piccole dimensioni su Facebook
Se l’immagine è inferiore a 600 x 315 pixel, continuerà a essere visibile nel post, ma con dimensioni notevolmente minori.
Mantieni proporzioni simili a 1.91:1 per mostrare immagini intere nella sezione Notizie, evitando che siano tagliate.
Dimensioni minime delle immagini su Facebook
Le dimensioni minime per le immagini sono 200 x 200 pixel. Usando un’immagine più piccola, visualizzerai un errore nel debugger.
<meta name="twitter:card" content="descrizione dell'immagine"> <meta name="twitter:site" content=""> <meta name="twitter:title" content=""> <meta name="twitter:description" content=""> <meta name="twitter:creator" content="> <meta name="twitter:image:src" content="">
credit: PostCron
Google+
Sebbene questo social stia schiattando il formato “itemprop” è ancora valido e comunque utilizzato da Google
<meta itemprop="name" content=""> <meta itemprop="description" content=""> <meta itemprop="image" content="">
credit: PostCron
DOVE TROVARE IMMAGINI BELLE E GRATUITE
Sei arrivata/o sino a qui? Molto bene! Eccoti un premio, la lista dei miei 3+1 siti web preferiti dal quale prelevare 100% gratis immagini belle e pertinenti 😀
- https://www.pexels.com/
- https://everypixel.com/free
- https://freephotos.cc/it
- BONUS: https://allthefreestock.com/
Come hai potuto vedere con i tuoi occhi, l’ottimizzazione delle immagini è un tema che, se preso nella sua totalità, ci porta a prendere in considerazione numerosi aspetti. Spero di aver contribuito con questo articolo a darti qualche spunto ma se avessi qualunque domanda o (magari) contributo scrivimi nei commenti ok?
Fai marketing ascoltando, non strillando.
Un abbraccio.
- 29shares
- Facebook22
- Twitter3
- Google+0
- LinkedIn4
ROBERTO SERRA
