Analizziamo in questo articolo perchè è necessario inserire immagini in un sito web, dove recuperarle e renderle uniche, ma sopratutto come e perchè ottimizzarle ai fini della SEO on-site raggiungendo un compromesso tra ciò che percepisce l'utenza e cosa riesce a comprendere il motore di ricerca.
Questa guida all'ottimizzazione SEO delle immagini tratterà oltre al posizionamento un altro aspetto molto importante che, a parer mio, un Consulente SEO deve valutare: quanto una immagine migliora la percezione utente nei confronti del sito.
Vediamo come realizzare delle immagini ottimizzate per la #SEO del nostro sito Share on XSommario
- Perché utilizzare delle immagini?
- Le risorse per recuperare immagini
- La differenza tra immagini raster e vettoriali
- Come elaborare le immagini
- Come ottimizzare le immagini per la SEO
- Conclusioni
Perchè in termini di usabilità e creatività è necessario inserire immagini
Inserendo una o più immagini pertinenti con il contenuto presente nelle nostre pagine web otterremo diversi vantaggi:
- aumento dell'usabilità della pagina, grazie a riferimenti visivi grafici, nel caso di presenza di molteplice testo;
- comprensione immediata o agevolata del contenuto testuale;
- offriremo all'utenza un momento di pausa nella lettura dell'articolo, migliorando la percezione che i nostri visitatori hanno del nostro sito;
- posizionamento dell'immagine sulla Search di Google dedicata;
- nel caso di immagini virali aumenteremo la diffusione del nostro contenuto, ma una azione di questo tipo richiede più tempo e immaginazione;
- maggiore interazione sui social network, associando l'immagine all'url grazie ai metatag sociali (con i Facebook Open Graph e le Twitter Card)
Naturalmente le grafiche, vanno studiate in termini di dimensioni, peso e aspect ratio in funzione dei device su cui andranno visualizzate. In questo caso ci viene in aiuto il Responsive Web Design di cui ho parlato in diversi articoli di qualche mese fa.
Perchè rendere uniche le tue immagini
Quando andiamo a scegliere delle immagini è opportuno fare attenzione al soggetto che andremo ad utilizzare, cercando di renderle uniche e caratteristiche, questo perché se utilizziamo soggetti usati già da altri rischiamo di confondere l'utenza o di instillare un senso di dubbio sul prodotto/servizio che sponsorizziamo rendendo la nostra pagina "artificiale" o "dozzinale", come se fosse prodotta in serie.
In particolare quando scegliamo delle foto con dei modelli è necessario fare attenzione a scegliere dei soggetti che non siano già stati utilizzati in diverse situazioni, in più ai fini del posizionamento SEO di una immagine sulla SERP dedicata di Google è opportuno comprendere la frequenza di uso del file grafico: il motore di ricerca di Mountain View infatti prova a visualizzare su Google Immagini file differenti, perciò utilizzando contenuto duplicato non potrai posizionarti nei primi risultati.
Ad esempio, come vedete nella galleria qui di fianco la stessa immagine di dottoressa viene utilizzata per diversi articoli, che trattano argomenti in campo medico decisamente differenti. Sarà forse che la signorina è altamente specializzata e formata grazie a diverse lauree?
Rafforzo questo concetto mostrandovi come la stessa modella viene utilizzata per argomenti e lavori diversi, come potete vedere nella seconda galleria:
- per pubblicizzare prodotti depilanti;
- in campo oculistico;
- per la reclame di prodotti dimagranti.
Per spiegare ancor meglio questo concetto vi mostro poi una carrellata di foto dello stesso modello che si occupa di una serie di lavori, con una professionalità e una attitudine da far invidia a MacGyver, visti i diversi campi di impiego delle sue abilità
- architetto;
- carpentiere;
- chef;
- elettricista;
- fotografo (si si è sempre lui!);
- insegnante di corsi di formazione (beh tutto questo sapere infuso nella stessa persona è necessario che sia condiviso);
- medico pediatra, padre di famiglia;
- con problemi di capelli (beh con tutto lo stress dovuto alle diverse attività effettuate mi sembra normale che qualche problema arrivi).
Come fare a realizzare immagini uniche
Non sono molti i modi per inserire immagini mai utilizzate nei nostri contenuti. Per farlo le strade da percorrere sono le seguenti:
- realizzarle completamente da noi, mediante l'ausilio di software grafici;
- utilizzando delle fotografie scattate per l'occasione;
- modificando delle grafiche esistenti creando dei fotoritocchi;
E' chiaro però che, sopratutto se non siamo grafici, è necessario partire da delle immagini esistenti prima di realizzarne di nuove.
Le risorse per recuperare immagini
Online esistono diversi portali che si occupano di raccogliere immagini e offrirle ai paltropri utenti. I portali gratuiti tendenzialmente offrono poca scelta e grafiche non delle migliori, ma quando ne servono parecchie, e il budget non consente spese per questa attività, conviene farci affidamento integrando le immagini principali, acquistate da portali che le vendono.
I portali di risorse gratis
- Pixabay
- Freepik
- Pexels
- Gratisography
- Fancycrave
- Unsplash
- Stocksnap
- Goodfreephotos
- Foodiesfeed, un portale da cui recuperare immagini gratuite per il proprio sito di ricette
- getrefe.tumblr.com, poche immagini ma di qualità
- Jaymantri, anche qui poche foto ma di altissima qualità
- Libreshot
- Lifeofpix
- Littlevisuals, a questo sito ci si può iscrivere e ricevere le nuove immagini direttamente nella propria casella di posta elettronica
- Magdeleine, aggiornato quotidianamente
- Focastock
- Morguefile
- Negativespace
- Picjumbo, dove inserendo la propria email si riceveranno gli aggiornamenti sulle nuove foto caricate sul portale, ogni giorno
- Picography
- Splitshire
- Startupstockphotos, diverse immagini per lo stesso soggetto
- Stokpic, anche qui potrai ricevere le nuove foto caricate direttamente sulla tua casella di posta elettronica
- Stocksnap
- Resplashed
- Bucketlistly
- Psdhive un portale di sorgenti (.PSD) per Photoshop gratuite
- Isorepublic, dove poter trovare immagini gratuite e a pagamento
- la search per immagini di google, facendo attenzione ad impostare i filtri per mostrare solo gli elementi che è possibile utilizzare/modificare per uso commerciale
- Ultima risorsa (ma non ultima) è un fantastico portale che permette di ricercare immagini, tra chi le distribuisce in maniera gratuita, con i classici filtri sul contenuto e, udite udite, in funzione dei colori (fino a 5) con cui sono state realizzate. Il portale è TinEye Reverse Image, di cui trovate una guida all'uso, della funzionalità di ricerca immagini per colori, sul sito di strumentipercomunicare.net
I portali a pagamento
A pagamento esistono diversi portali che offrono stock di risorse grafiche (e in alcuni casi video) ad un costo proporzionato alla qualità. Se scegliete di investirci del denaro fate attenzione alle licenze con cui vengono rilasciate, in alcuni casi la facoltà di uso dell'immagine decade dopo un determinato periodo temporale.
- Shutterstock.com
- Fotolia
- Gettyimages
- Dreamstime
- Envato con le piattaforme dedicate di Graphicriver o Photodune
Per maggiori informazioni vi lascio una risorsa un po' datata, che raccoglie diversi portali di stock photos: bluevertico.com.
La differenza tra immagini raster e vettoriali
Prima di vedere come elaborare le immagini vediamo brevemente la differenza tra raster e vettoriali. Dico brevemente e se siete dei grafici storcerete un pochino il naso dalla seguente definizione, ma provo a spiegarmi per chi come me, di grafica non conosce molto e per prodotti di qualità deve ricorrere all'ausilio di persona specializzata.
La grafica raster
"Descrivendo digitalmente" una grafica o meglio digitalizzando una immagine otterremo un file di tipo raster o bitmap.
La grafica raster permette di creare immagini, partendo da una fotografia digitale o da una immagine digitalizzata mediante scanner, composte da milioni di pixel, in funzione della risoluzione con cui viene salvata. Generalmente a maggiore risoluzione (e qualità) corrisponde un peso del file maggiore.
La grafica raster, per il web, generalmente sono nei formati: .JPG, .PNG, .GIF e .JPEG2000 (a differenza di formato corrisponde differenza di compressione e qualità).
Le immagini vettoriali
Le immagini vettoriali sono composte mediante algoritmi matematici, da software particolari (Illustrator, Indesign e Inkscape per fare alcuni esempi) che permettono di utilizzare colori piatti o sfumature, ma che risultano globalmente meno dettagliate. Offrono però la possibilità di essere ridimensionate all'infinito senza perdita di risoluzione.
I formati per la grafica vettoriale, per il web è uno solo, il .PDF . E' possibile però partire da un file sorgente, elaborarlo in termini di dimensione e poi convertirlo in raster, salvandolo in uno dei formati visti nel paragrafo precedente.
Come elaborare le immagini
Per elaborare e creare nuove grafiche i software in commercio a pagamento e più conosciuti sono sicuramente:
I tool gratuiti, con meno funzioni e spesso meno "ergonomici" sono:
- Gimp, l'alternativa open-source a Photoshop;
- Inkscape, un software open-source per creare immagini vettoriali;
- Paintnet, il più semplice tra gli strumenti proposti ma con meno funzionalità;
Come ottimizzare le immagini per la SEO
Al fine di ottimizzare le immagini ai fini della SEO on-page è necessario muoversi in due sensi:
- evitare che influiscano nei tempi di caricamento della pagina;
- far si che offrano valore aggiunto al contenuto;
Ridimensionare la grafica
Mediante l'ausilio di uno dei software sopra descritti è opportuno ridimensionare le immagini in funzione della destinazione e di dove dovremo inserire la grafica.
In particolare è necessario, ai fini di ottenere un file il meno pesante possibile:
- comprendere le dimensioni effettive e tagliare o ridimensionare l'immagine in altezza e larghezza per ottenere i valori richiesti;
- inserire immagini di risoluzione pari a 72 dpi (la risoluzione della grafica per il web);
- salvarla in un formato che sia un compromesso tra qualità e dimensioni;
Photoshop e i programmi della Adobe ci vengono particolarmente in aiuto con la funzionalità Salva per il Web, che permette, con una finestra di anteprima, di mostrarci come comparirà l'immagine utilizzando diversi formati e livelli di qualità della stessa. Per maggiori informazioni su come utilizzare questi strumenti al meglio e per comprendere nel dettaglio l'uso delle jpeg progressive vi rimando ad un interessante articolo di un collega.
Ottimizzare la SEO delle immagini
Per offrire valore aggiunto al nostro contenuto è opportuno, quando inseriamo delle immagini mediante il tag <IMG>:
- rinominare il file con parole chiave descrittive del contenuto dell'immagine;
- Utilizzare l'attributo alt del tag IMG e per l'uso di questo attributo vi sono due scuole di pensiero che vedremo a seguire.
Un esempio di markup HTML di come viene inserita una immagine su un sito web è il seguente: <img src="nome-file.jpg" alt="nome file" />.
L'attributo alt ai fini pratici fa comparire il testo che abbiamo inserito quando l'immagine non viene mostrata (perchè corrotta o mancante) o in fase di caricamento. Questo attributo, come OGNI attributo HTML non deve essere inserito necessariamente prima o dopo l'attributo src e l'ordine non influenza la renderizzazione dell'immagine da parte del browser o l'ottimizzazione SEO.
Un ulteriore uso dell'attributo "alt" nel tag IMG viene da parte degli screen reader delle persone non vedenti, che leggeranno il contenuto dell'attributo per descrivere all'utenza meno fortunata il contenuto dell'immagine.
Per come utilizzare questo attributo (che comunque va usato!) vi ho appunto accennato che vi sono due scuole di pensiero:
- i SEO che vogliono ottimizzare le immagini solamente per il motore di ricerca e che consigliano di inserire all'interno di questo attributo le parole chiave con cui posizionare il contenuto (anche io ero di questa scuola fino a tempo fa);
- i SEO che provano a rendere accessibile il proprio sito a tutti gli utenti (compresi i non vedenti) e che per questo mettono una descrizione del contenuto dell'immagine, che in caso di immagine non pertinente creerà qualche difficoltà nell'usare le parole chiave per cui vogliamo posizionarci (di mio ora preferisco questo metodo per rendere i miei più contenuti accessibili a tutta l'utenza);
Come i motori di ricerca interpretano le immagini
Con il progredire della tecnologia gli algoritmi software sono riusciti ad interpretare sempre meglio il contenuto presente in una immagine. Ma ad oggi il contenuto che davvero riesce ad essere "letto" in maniera precisa è quello testuale. Per questo motivo aggiungendo del testo, relativo alle query per cui vogliamo far ritrovare il nostro contenuto, possiamo migliorare la SEO globale del nostro contenuto.
Di mio però cerco di non abusare di questo sistema, in quanto diciamocelo, spesso le immagini con del testo sopra sono particolarmente brutte e spesso peggiorano il design della nostra pagina. Oltretutto una immagine senza testo colpisce di più l'inconscio dei nostri visitatori e rimane impressa in maniera non razionale nel cervello di chi la visiona.
Fate attenzione ad assegnare come nome file e relativo attributo alt una descrizione effettiva della grafica, in quanto gli algoritmi di riconoscimento delle immagini del motore di ricerca Google riescono ad interpretare il contenuto e nel caso di scarsa corrispondenza dovrebbero penalizzarle nella SERP dedicata.[vc_message]Utilizzare una immagine per effettuare un link ad un contenuto vale di meno che utilizzare una ancora testuale.
Conclusioni
Inserire delle immagini in un contenuto può essere un bene o un male, in funzione di come e cosa andremo ad inserire, se usiamo l'immagine sbagliata rischiamo di provocare un caso come quello del Montreux Jazz Festival.
E' necessario dedicare del tempo alla scelta e alla realizzazione di elementi grafici o se pensiamo di non esserne capaci rivolgiamoci ad un creativo, il nostro sito web otterrà sicuramente dei vantaggi da una implementazione della veste grafica con cui presentiamo i nostri articoli.
Un video di approfondimento su alcuni strumenti per le immagini
A seguire vi segnalo questo video a cura di Giorgio Tave in cui esamina 12 strumenti gratuiti per l'elaborazione e creazione di immagini e in cui possiamo trovare informazioni su:
- strumenti online per la modifica e realizzazione di grafica;
- uno script per l'inclusione di immagini retina su un sito web;
- uno strumento per recuperare il codice esadecimale di una immagine;
- due strumenti online per la compressione delle immagini digitali;
- un tool per convertire le immagini raster in immagini vettoriali;
- uno strumento per creare grafici e flowchart
- un tool per creare delle immagini per i social network
- una utility per realizzare una favicon per siti internet;
- un portale per recuperare le meta informazioni di una immagine;
Commenti
