fbpx

Stai cercando come scrivere del testo sulle immagini del tuo sito web? Non vuoi rischiare di danneggiare la SEO del sito mettendo gradienti sulle immagini? Vuoi sfruttare al massimo ogni elemento del tuo sito web? Allora continua a leggere, perché in questo articolo i nostri esperti di realizzazione siti web di Roma ci spiegano come inserire correttamente i testi in overlay sulle immagini usando i gradienti e favorendo la SEO del tuo sito web!

Scrivere testi sulle immagini dei siti web è una pratica abbastanza diffusa. Ma come si può fare nel modo giusto? Designer alle prime armi e non addetti ai lavori potrebbero pensare che basti scrivere il testo direttamente sull’immagine, caricandola così sul sito, ma si tratta di un grosso errore. Ma se l’ideale è usare un’immagine come sfondo, scrivendo il testo in overlay sul sito, come possiamo renderlo leggibile? E come possiamo assicurarci che non impatti negativamente la nostra SEO? Continua a leggere per scoprire tutto!

Altri articoli che potrebbero interessarti:

Overlay immagini e SEO: il problema

Come accennato, scrivere del testo su un’immagine può essere un dilemma per molti designer. I caratteri devono essere ben leggibili, senza rovinare l’immagine, ma offrendo un buon contrasto testo/sfondo.

Scrivere del testo con un colore scuro su un’immagine chiara (o viceversa) potrebbe rovinare l’immagine, mentre usare un colore chiaro su un’immagina chiara (o scuro su scuro) potrebbe risultare in testo non leggibile. Ecco un esempio:

immagine-testo-no-gradiente-overlay

È ovvio che in questo caso, il testo in overlay sull’immagine risulti poco leggibile. Questo perché il contrasto tra testo bianco e nuvole è minimo. Il testo può essere letto, ma richiederebbe sforzo da parte degli utenti e la SEO, quella fatta bene, deve concentrarsi sul miglioramento della User Experience.

Un modo semplice per rendere il testo più leggibile è aggiungere un gradiente in overlay sull’immagine, ottenendo il seguente risultato:

immagine-testo-gradiente-overlay

Il testo è chiaramente più leggibile adesso. Ma ci sono due modi per aggiungere un gradiente su un’immagine. Questi metodi influenzano la SEO diversamente. Uno ha un impatto positivo sulla SEO del tuo sito web, mentre l’altro potrebbe avere ripercussioni negative.  

Il modo negativo per la SEO di usare gradienti in overlay

A molti web designer piace usare le scorciatoie. Quello che succede in troppi casi è che venga applicato un gradiente in overlay direttamente sull’immagine, usando Photoshop, Canva o altri strumenti di editing. Quindi, l’immagine viene caricata già modificata sul sito web, scrivendoci sopra il testo usando intestazioni H1, H2 e così via.

Non c’è nulla di male a scrivere il testo usando un’immagine come sfondo, anzi è il modo giusto. Tuttavia, applicare il gradiente direttamente sull’immagine è sbagliato per la SEO del sito web. Vediamo perché:

Forse avrai notato che è difficile trovare un’immagine con un gradiente in overlay su Google. Questo perché Google non pensa che valga la pena mostrare queste immagini nei propri risultati di ricerca. Ci sono diversi motivi per cui è così: Google vuole ottimizzare la User Experience, quindi non mostra immagini con overlay perché la peggiorerebbe.

I sistemi di Google riescono a riconoscere le immagini “pulite”. Guardando un’immagine con un gradiente in overlay senza testo, sembra che questa sia stata scattata con l’illuminazione sbagliata. Queste immagini sembrano risultano “gradevoli” solo guardandole sul sito web originale, nel contesto ideato dal web designer, con il testo applicato sopra e il CSS corretto.

Come usare i gradienti sulle immagini per la SEO

Usare i gradienti in overlay sulle immagini non è necessariamente negativo per la SEO. Abbiamo già parlato di quanto le immagini siano importanti per la SEO di un sito, quindi perché non dovresti sfruttarle al massimo per la SEO del tuo sito web?

Se vuoi mettere dei gradienti in overlay sulle immagini e vuoi ottenere degli impatti positivi sulla tua SEO, dovrai farlo nel modo corretto.

Il modo giusto, per usare l’overlay di gradienti sulle immagini senza danneggiare la SEO è facendolo direttamente sul tuo sito tramite CSS.

Così facendo, potrai caricare l’immagine senza modifiche e Google non troverà errori di esposizione. Quindi, potrai applicare un gradiente programmatico, che potrai anche modificare in futuro, nel caso dovessi voler cambiare colori. Infine, potrai scrivere il testo sull’immagine, assicurandoti che sia ben leggibile, proprio grazie al contrasto offerto dal gradiente.

Ecco come possiamo destrutturare l’immagine con gradiente e testo in overlay pubblicata sopra:

testo-gradiente-overlay
Gradiente applicato tramite CSS con testo

E quindi l’immagine originale:

immagine-roma-originale-senza-gradiente-overlay

Un buon web designer dovrebbe riuscire a implementare questo metodo senza difficioltà, visto che il gradiente CSS è un elemento essenziale e semplice da applicare per qualsiasi designer specializzato.

I gradienti CSS funzionano con praticamente qualsiasi CMS (Content Management System) moderno, come WordPress. Se il tuo designer non dovesse essere in grado di implementare un gradiente in overlay tramite CSS, è decisamente il caso di cercarne un altro.

Consigli per WordPress

Stai sviluppando il tuo sito web con WordPress in autonomia e ti interessa sapere come applicare un gradiente o un overlay direttamente dal CMS? Intanto complimenti! Quindi, ecco un modo semplice per sfruttare l’overlay tramite CSS sulle immagini del tuo sito WordPress:

  1. Nel post o nella pagina dove vuoi inserire l’immagine, aggiungi un blocco Copertina (o Cover).wordpress-blocco-copertina
  2. Seleziona l’immagine su cui applicare il gradiente in overlay e il testo cliccando su Aggiungi Media.wordpress-copertina-blocco-aggiungi
  3. Usa le impostazioni di Sovrapposizione del blocco, dalla barra a destra. Come vedi, puoi creare sia un overlay in tinta unita o usando un gradiente.wordpress-copertina-sovrapposizione
  4. Scrivi il testo, come titolo o paragrafo, sul blocco Copertina.

La Copertina è uno dei blocchi Gutenberg predefiniti di WordPress ed è veramente molto potente. Ti consiglio di esplorare tutte le impostazioni che ti mette a disposizione, perché potrai personalizzarlo veramente tanto a seconda delle tue esigenze!

Pronto a migliorare la tua SEO?

Parlarci della tua attività e ti diremo quanto possiamo farti crescere!

Prenota la tua consulenza gratuita!

Hai capito come implementare overlay di gradienti e altri elementi sulle immagini per la SEO del tuo sito web? Vorresti saperne di più? Commenta qui sotto e condividi questo articolo con i tuoi amici! Non dimenticarti di iscriverti alla newsletter di Stolas Informatica e di seguirci su FacebookInstagram e Telegram per rimanere sempre aggiornato!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Torna su

Segui Stolas!

Iscriviti alla mailing list di Stolas per ricevere in anteprima novità e sconti!

Grazie per esserti iscritto!

Something went wrong.

Segui Stolas!

Iscriviti alla mailing list di Stolas per ricevere in anteprima novità e sconti!

Grazie per esserti iscritto!

Something went wrong.