Supporto volontario e collaborativo per Joomla!® in italiano

SEO - Ottimizzare le immagini e renderle SEF

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Ciao a tutti,Ottimizzare immagini SEO
con questo articolo voglio illustrarvi come fare SEO (Search Engine Optimization) ottimizzando le immagini.
Non intendo parlare di gallery fotografiche, ma delle immagini che vengono inserite negli articoli come illustrazioni o approfondimento al testo degli articoli.
Pubblicare nel proprio sito immagini SEF (Search Engine Friendly) è un'attività molto spesso sottovalutata ma che può portare degli ottimi risultati.




Le immagini possono essere molto rilevanti a livello SEO, trasmettere ulteriore significato al contenuto della nostra pagina web e portare traffico organico anche attraverso la ricerca "immagini" di Google e affini, per poter sfruttare al meglio tutte queste potenzialità dobbiamo dare le indicazioni ai motori di ricerca per capire cosa raffigurano e quindi dobbiamo ottimizzare le nostre immagini.

In questa guida elencherò i 5 punti che seguo dettagliatamente quando il proprietario di un sito web richiede i miei servigi come consulente SEO, illustrandovi sia la parte teorica che la messa in pratica attraverso gli strumenti di Joomla! ed altri software e servizi gratuiti.

I punti da seguire:
  1. Ottimizzare il nome
  2. Alt Text - Testo Alternativo
  3. Title - Titolo Immagine
  4. Dimensione immagine (altezza e larghezza in pixel)
  5. Peso immagine (dimensione del file in KB)

Per rendere più comprensibile tutti i passaggi immaginiamo di dover ottimizzare le immagini per un sito dedicato ai telecomandi universali per tv.

Punto 1 - Ottimizzare il nome del file

Il peggior esempio che posso portarvi è quando vengono caricate direttamente le immagini scattate dalle macchine fotografiche, il nome DSC201611090343.jpg non fornisce nessuna indicazione ai motori di ricerca.
Il nome del file deve essere preciso, conciso e contenere la parola chiave che vogliamo ottimizzare.
L'immagine deve essere inerente alla parola chiave e rappresentare l'oggetto descritto (es. non possiamo avere un file immagine che si chiama telecomando-universale-tv.jpg ed è rappresentata la Tour Eiffel).
Il nome non deve contenere le Stopwords (articoli, preposizioni, avverbi, ecc) ma deve contenere solo le parole chiave.
Le parole del testo devono essere separate dal simbolo - (meno).
Le parole chiavi per voi più importanti, quelle che vorreste avessero più rilevanza per Google vanno scritte a sinistra, all'inizio del testo, per sfruttare il principio di prominenza.
Nel caso in cui nello stesso articolo dobbiamo inserire 2 o più immagini dello stesso prodotto per differenziare il nome vi sconsiglio di utilizzare i numeri o attributi tipo "fronte" o "retro" ma potete sfruttare il nome del file immagine per cercare di intercettare altre intenzioni di ricerca da parte degli utenti, esempi: telecomando-universale-tv-decoder.jpg oppure telecomando-universale-tv-compatibile.jpg ; in questo modo forniamo ai motori di ricerca l'indicazione che la nostra pagina web è rilevante per la parola chiave "Telecomando Universale TV".
Personalmente come prima immagine di un articolo inserisco un file che abbia il nome uguale o molto simile al titolo dell'articolo in modo di marcare la rilevanza dell'articolo stesso per quella keyword.

Guida ottimizzare immagini SEO

NO! www.tuosito.net/images/DSC201611300353.jpg SI! www.tuosito.net/images/telecomando-universale-tv.jpg

Punto 2 - Alt Text - Testo Alternativo

L' Alt Text o testo alternativo è una stringa di testo la cui funzione è quella di essere visualizzata quando per il browser non è possibile far visualizzare l'immagine sullo schermo; viene utilizzato in particolar modo nei browser text-based e nei browser specifici per utenti non vedenti.
I motori di ricerca sfruttano questo campo per evincere le parole chiave che descrivono l'immagine.
Il mio consiglio per ottimizzare l'Alt Text è quella di utilizzare il nome utilizzato per il file immagine eliminando il simbolo - (meno) ed utilizzando anche le preposizioni, articoli propri della lingua italiana.
Esempio:
<img src="www.tuosito.net/images/telecomando-universale-tv.jpg" alt="Telecomando Universale per TV" />

Nell'editor di default di Joomla!, l'editor TinyMCE, per inserire il campo Alt Text si deve compilare la voce "Descrizione Immagine" nella finestra che compare quando si inserisce l'immagine nel proprio articolo.

Come ottimizzare l'alt text per fare SEO con le immagini



Punto 3 - Title - Titolo Immagine

Il Title delle immagini è il testo che visualizziamo nel tooltip che esce quando rimaniamo fermi con il puntatore del mouse sopra un'immagine per alcuni secondi.
Il Title delle immagini è oggetto di contrasto nei pareri di molti Guru SEO, alcuni lo ritengono inutile al fine del posizionamento, altri ritengono che il title venga considerato dai motori di ricerca e che, di conseguenza, sia meglio ottimizzarlo.
Il mio parere è quello di ottimizzarlo per qesta ragione: anche se non viene considerato dai motori di ricerca può essere sempre un ottimo strumento per fornire informazioni aggiuntive al visitatore del nostro sito.
Con l'editor TinyMCE di Joomla! si deve compilare il campo "Titolo immagine" presente nella finestra che si presenta quando carichiamo l'immagine nel nosto articolo.

come ottimizzare il title delle immagini per la SEO


Nel caso specifico del nostro sito riguardanti i telecomandi universali per TV ho pensato di sfruttare il Title ed il conseguente tooltip che viene visualizzato per "fare maketing" e convincere il visitatore che i telecomandi presenti nel nostro sito sono i migliori del mercato e sono al 100% compatibili con il proprio televisore.
Il testo che andiamo ad inserire si rivolge all'utente e di conseguenza andrà scritto per le persone e non per i motori di ricerca utilizzando gli spazi e i vari articoli e preposizioni; per questo caso ho pensato di scrivere la seguente frase: "Il migliore telecomando universale perfettamente compatibile con la tua TV".
Esempio:
<img src="www.tuosito.net/images/telecomando-universale-tv.jpg" alt="Telecomando Universale per TV" title="Il migliore telecomando universale perfettamente compatibile con la tua TV" />

Punto 4 - Dimensione immagine - La larghezza e l'altezza in pixel

Le dimensioni delle immagini che carichiamo nella nostra pagina web sono importanti lato SEO non tanto per la rilevanza dei contenuti ma per la velocità con cui si carica il sito nel browser dell'utente; è cosa nota infatti che Google prediliga i siti veloci e consideri un fattore di ranking la velocità di caricamento.
Ad ulteriore conferma che è una buona prassi avere un sito che si carica velocemente ci sono molte statistiche che ci mostrano come, soprattutto da mobile, molti utenti abbandonino il sito se questo è troppo lento nell'apertura.
Secondo una statistica di Kissmetrics, riportata in italiano dal blog insidemarketing, se il sito ci mette un tempo maggiore di 4 secondi la percentuale di abbandono sale al 25% ed arriva al 50% con un tempo di caricamento di circa 10 secondi (leggi qui la statistica).
Caricare un'immagine di 1980 pixel di larghezza per 1056 pixel di altezza quando lo spazio fisico del contenitore dell'immagine è di 750 pixel di larghezza per 400 pixel di altezza è uno spreco di tempo in quanto il browser deve ridimensionare l'immagine adattandola allo spazio consentito dal contenitore ed anche uno spreco di banda sia da parte del server che del dispositivo dell'utente.
Quindi vi consiglio di caricare nel proprio spazio web immagini con le misure esatte per evitare il ridimensionamento da parte del browser.
Ridimensionare le immagini con GIMP per la SEOSe dovete ridimensionare le immagini, oltre a molti servizi online, potete utilizzare GIMP, un software open source per l'elaborazione digitale delle immagini che tra le moltissime opzioni vi permette anche di ridimensionare le immagini; il sito ufficiale da dove scaricare GIMP è questo: www.gimp.org
Una volta aperta l'immagine con GIMP cliccate sulla voce di menù Immagine -> Scala Immagine nella finestra che compare inserite i valori che vi servono per la vostra immagine (esempio 750 x 400 pixel) e cliccate su scala.
Esportate il file nel formato che preferite (jpg, png o gif) e caricate il file via FTP o attraverso la gestione media di Joomla! nel vostro server.
Ora il browser del pc del visitatore non dovrà più ridimensionare l'immagine e quindi non sprecherà più tempo e banda per effettuare questa operazione, ma se l'utente naviga il nostro sito da un altro tipo di dispositivo come uno smartphone od un tablet?
 Utilizzare XT Adaptive Images per ottimizzare le immagini per i vari dispositiviAvendo questi dispositivi una risoluzione di schermo differente dai pc quasi sicuramente le immagini del nostro sito occuperanno uno spazio diverso da quello utilizzato nella visualizzazione da desktop.
Come risolvere questo problema? Possiamo utilizzare l'estensione gratuita XT Adaptive Images che troviamo nella JED a questo link.
XT Adaptive Images scala in automatico le immagini presenti nel nostro sito e fornisce, automaticamente, l'immagine dalle dimensioni più adatte per la risoluzione dello schermo del dispositivo (pc, tablet o smartphone) del visitatore del nostro sito in modo da evitare il processo di ridimensionamento da parte del browser.
In questa guida non illustrerò la configurazione del plugin XT Adaptive Images visto che in questo sito è presente un articolo scritto da Francesco Fiorani dove spiega dettagliatamente il suo utilizzo.

L'articolo è raggiungibile a questo link:
http://www.joomla.it/e-ancora/articoli-community-3x/8157-xt-adaptive-images-immagini-ottimizzate-mobile.html

Punto 5 - Peso immagine - Dimesione del file in KB


Il peso delle immagini influisce sulla velocità di caricamento del sito, ovviamente un sito pesante impiega più tempo ad essere visualizzato sul browser dell'utente di un sito leggero. Le immagini, se non ottimizzate, possono influire molto negativamente sul peso complessivo di un sito.
La prima indicazione che mi sento di darvi è di controllare il valore di risoluzione dpi (punti per pollice) che ha l'immagine; un'immagine creata per la stampa su carta solitamente ha una risoluzione di 300dpi mentre un'immagine creata per il web, solitamente, ha una risoluzione di 72dpi, ovviamente un'immagine con risoluzione dpi maggiore è più pesante della stessa immagine ma con risoluzione dpi minore.
Potete diminuire il valore di risoluzione dpi con GIMP; il procedimento è lo stesso che abbiamo affrontato nel punto precedente con la sola differenza che al posto di modificare le dimensioni (altezza e larghezza) dell'immagine andremo a modificare il valore della risoluzione, quindi:
Aprite la vostra immagine con GIMP cliccate sulla voce di menù Immagine -> Scala Immagine e nella finestra che compare inserite il valore 72 nei campi relativi alla risoluzione dpi (pixel/in) e cliccate su scala.

Ottimizzare le immagini con GIMP

Settare il corretto valore di risoluzione dpi di un'immagine potrebbe non bastare per rendere la nostra immagine leggera, ci sono dei tool online o dei programmi da installare nel nostro computer che comprimono maggiormente il file dell'immagine in modo da renderla ancora più leggera mantenendo immutate le dimensioni e la qualità dell'immagine stessa.
Comprimere le immagini con Optimizilla In questo articolo voglio citarvi due tool online che forniscono questo servizio, il primo è Optimizilla e lo potete raggiungere al seguente url:

http://optimizilla.com/it/ 

mentre il secondo è I Love Img raggiungibile da questo link:

http://www.iloveimg.com/it/comprimere-immagine

Non ho nessuna predilezione "tecnica" trai i due, ma personalmente preferisco utilizzare Optimizilla perchè mi sta molto simpatico il logo con il drago :)
Se invece preferite scaricarvi un programma sul vostro computer per comprimere le immagini vi consiglio RIOT (Radical Image Optimization Tool), scaricabile da questo indirizzo:

http://luci.criosweb.ro/riot/

Un'immaggine con la corretta risoluzione dpi e la giusta compressione risulta molto più leggera dell'originale e la velocità di caricamento del vostro sito ne trarrà sicuramente giovamento! :)

Questi sono i 5 punti che seguo per ottimizzare le immagini dei miei siti web, spero che possano tornarvi utili e che vi aiutino a migliorare la SEO dei vostri siti.

Bonus Tips


Probabilmente lo avete già letto ma se non vi è capitato di farlo... in un mio precedente articolo descrivo un facile sistema per velocizzare le pagine web che contengono molte immagini, ecco il link:

http://www.joomla.it/e-ancora/articoli-community-3x/8231-miglioriamo-la-velocita-di-caricamento-delle-pagine-con-lazy-load-for-joomla.html


Grazie dell'attenzione! Alla prossima!

Roberto "marine" Marinello

commentaCommenta questo articolo sul forum

Calendario articoli

Dicembre 2017
Lun Mar Mer Gio Ven Sab Dom
27 28 29 30 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Ultima versione di Joomla!®

downloadVer. 3.8.3 Stabile Italiana
Data di rilascio: 12 Dicembre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: