Immagini in un sito web ottimizzate per la SEO

0
2362
immagini sito web

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.

Vediamo come realizzare delle immagini ottimizzate per la #SEO del nostro sito Condividi il Tweet

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.

Torna al sommario

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.

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).

Torna al sommario

 

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.

Torna al sommario

Le risorse per recuperare immagini

Online esistono diversi portali che si occupano di raccogliere immagini e offrirle ai propri 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.

Torna al sommario

I portali di risorse gratis

Torna al sommario

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.

Per maggiori informazioni vi lascio una risorsa un po’ datata, che raccoglie diversi portali di stock photos: bluevertico.com.

Torna al sommario

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.

Torna al sommario

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à).

Torna al sommario

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.

Torna al sommario

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à;

Torna al sommario

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;

Torna al sommario

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.

Torna al sommario

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;
  • inserire le stesse parole chiave nell’attributo alt del tag IMG.

Per fare un esempio: <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.

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.

immagini seo
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.

Torna al sommario

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.

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.

Torna al sommario

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;
Immagini in un sito web ottimizzate per la SEO
4.75 (95%) su 4 voti

CONDIVIDI
Nato con la passione per l'informatica da mamma Access e papà ASP nel 2002 rinnego repentinamente la mia paternità facendomi adottare da papà PHP e mamma SQL. Allevo HTML e correlati fiori in CSS mentre vedo i frutti del mio orticello SEO crescere grazie alla passione e alla dedizione della coltura biodinamica; perchè il biologico è fin troppo artificiale. Realizzo siti internet a tempo pieno, nei restanti momenti mi occupo di redigere articoli per questo sito e saltuariamente far esperimento nel mare che è internet.

LASCIA UN COMMENTO