Pubblicato il - Aggiornato il

Cosa sono e come gestire al meglio i banner dei siti web

Digital Marketing

Cosa sono e come gestire al meglio i banner dei siti web

I banner pubblicitari sono delle grafiche – dinamiche o statiche – che vengono utilizzate per portare visite verso una determinata landing page. Partendo da questa definizione possiamo ragionare su come ottimizzare questo percorso indispensabile per attivare diversi processi di digital marketing.

In sintesi, se vuoi portare il pubblico che arriva sul sito web verso una pagina di vendita, prenotazione o richiesta preventivo devi prendere in considerazione l’idea di inserire banner in diverse aree. Il vero problema di questa soluzione riguarda la congestione grafica che può causare un web banner.

Pensa solo questo: esiste una penalizzazione specifica di Google dedicata alle pubblicità interstiziali, un tipo di banner particolarmente invasivo che occupa l’intera pagina. Chiaramente stiamo parlando di una condizione estrema ma è sicuramente vero che quando si sceglie di utilizzare i banner per indirizzare traffico verso determinate risorse bisogna valutare diversi aspetti. Ad esempio? Ecco cosa devi sapere.

Cos’è un banner pubblicitario?

Con questo termine intendiamo una pubblicità grafica – in alcuni casi animata – presente su un sito internet. Di base è l’elemento dell’advertising online che consente di collegare l’utente verso una destinazione commerciale. Il tutto attraverso un link che funziona come un collegamento ipertestuale.

banner pubblicitario

Qui in alto puoi vedere due esempi di banner sul sito Search Engine Journal situati in due posizioni diverse dell’above the fold. Lo scopo è quello di promuovere un bene o un servizio. Alcuni banner su mobile non hanno link a pagine interne o esterne al dominio ma avviano una telefonata a un numero.

Su un sito internet posso mettere un banner diretto verso una pagina interna o esterna. In quest’ultimo caso sarà opportuno inserire un attributo nofollow per evitare che Google possa ipotizzare una compravendita di link pubblicitari, eventualità che potrebbe essere fonte di penalizzazione SEO.

Da leggere: cos’è e a cosa serve il data storytelling

Tipi di banner, forme e dimensioni

Come puoi ben immaginare, ci sono diverse forme e tipologie di creatività pubblicitarie da aggiungere sul sito web o sul blog per raggiungere l’obiettivo. Ovvero attirare l’attenzione e i click dell’utente.

Lo scopo è veicolare il traffico sulle pagine giuste, per farlo bisogna scegliere come e dove inserire i banner in base alle diverse esigenze. Iniziamo a distinguere i banner dal punto di vista grafico.

Posizione

Possiamo parlare di soluzioni sitewide che si posizionano in aree comuni del sito web – soprattutto header e sidebar – e quelle interne ai contenuti o editoriali che sono inclusi nelle pagine web.

banner sito dimensioni

Poi abbiamo i pop-up che invadono la lettura e l’uso della pagina web imponendo all’utente un’operazione per chiudere la finestra e continuare la navigazione. Ovviamente, stiamo parlando di un livello di invasività sempre maggiore in cui l’user experience rischia di registrare un passo indietro.

Forma

Esistono diversi tipi di banner e la distinzione si definisce anche in base alla forma. Che può essere quadrata e rettangolare, con forme differenti che vanno dallo Skyscraper (rettangolo molto alto che prende tutta l’area verticale della pagina) al Leaderboard che svolge la stessa funzione in orizzontale.

Tutto cambia, però, se parliamo di banner da mobile che sono leggermente diversi anche perché bisogna considerare che lo spazio degli schermi è molto ridotto. Quindi è giusto preservare l’UX.

Dimensione

Per affrontare il tema delle dimensioni dei banner pubblicitari sui siti web si deve prendere in considerazione l’Interactive Advertising Bureau (IAB), uno standard che ha creato e aggiornato con costanze le dimensioni ufficiali dei principali banner pubblicitari. Che sono riuniti in questo elenco:

  • Rettangolo medio: 300 x 250
  • Pop Up Quadrato: 250 x 250
  • Rettangolo verticale: 240 x 400
  • Rettangolo largo: 336 x 280
  • Rettangolo: 180 x 150
  • Banner: 468 x 60
  • Metà banner: 234 x 60
  • Micro bar: 88 x 31
  • Bottone 1: 120 x 90
  • Bottone 2: 120 x 60
  • Benner verticale: 120 x 240
  • Bottone quadrato: 125 x 125
  • Leaderboard: 728 x 90
  • Skyscraper largo: 160 x 600
  • Skyscraper: 120 x 600

Queste misure, prese da Wikipedia, sono espresse in pixel e possono essere gestire in modo da aggiungere i banner nelle varie sezioni delle pagine. L’obiettivo è quello di valutare i giusti equilibri interni, sia in termini di estetica che di funzionalità. Avendo sempre come riferimento le conversioni.

Come creare un banner efficace?

Esiste una vera e propria arte per realizzare un banner vincente. Non solo dal punto di vista grafico ma anche per renderlo facile da cliccare. Non c’è nulla di peggio su un sito web di un elemento pubblicitario che occupa spazio ma non viene cliccato e utilizzato dal pubblico. L’obiettivo è sempre lo stesso: portare visite verso le landing page o le schede prodotto. In che modo avviene questo?

Punta sulla persuasione

Per realizzare una creatività efficace devi sfruttare una buona combinazione di visual e copy. In primo luogo devi aggiungere un motivo alle persone per cliccare, spingendo verso la value proposition. Ovvero quello che aggiunge il vero benefit all’azione. Inoltre è importante aggiungere una call to action.

esempi banner sidebar

Questo significa utilizzare un bottone grafico con un invito a svolgere un’azione. Di solito, seguendo i principi base del persuasive marketing, è utile creare delle CTA brevi, dirette e con verbi imperativi.

Attenzione alla SEO dei banner

Certo, anche questi elementi grafici devono rispettare le regole della search engine optimization. Come suggerito, ricorda di aggiungere il rel="nofollow" se punti verso URL esterni perché potrebbero essere riconosciuti come parte di uno schema di link per migliorare il ranking di altri siti.

Assicurati di pubblicare immagini con un formato leggero e adeguato alle esigenze di un sito web veloce. Inoltre, cura il testo alternative per l’ottimizzazione SEO delle immagini che pubblichi online.

Attenzione, il tag alt serve a dare una descrizione dotata di senso alle immagini e quelle decorative possono anche non avere testo ma è sempre necessario, per un codice strutturato, mettere l’elemento tag alt="" vuoto. Ricorda, inoltre, che il tag alt fa la stessa funzione dell’anchor text per il link.

Non dimenticare i Core Web Vitals

Il piacere di portare potenziali acquirenti sulle tue pagine di vendita non deve mettere in ombra uno dei principi chiave dell’UX: la cura per i Core Web Vitals, ovvero gli elementi della page experience che influenzano l’attività dell’utente. Oltre alla velocità, devi curare alcuni aspetti che si collegano al design.

core web vitals pagespeed insights

Anche i banner sono coinvolti in questo processo di ottimizzazione che puoi avviare con una buona analisi con PageSpeed Insight. In primo luogo, assicurati che i banner siano in un formato leggero.

Controlla che la reattività sia buona nel momento in cui l’utente interagisce con il link. E che non ci siano sbalzi grafici in fase di caricamento della pagina tali da determinare problemi in termini di cumulative layout shift. Questo passaggio si ottiene anche indicando le dimensioni del visual lato HTML.

La semplicità vince sempre

Inutile ricordare che un banner non deve essere una collezione di messaggi (spesso confusi) che confondono l’utente. Devi essere lineare: colori che creano un contrasto con il font semplice e di buone dimensioni, inviti semplici e diretti, call to action su bottoni che aiutano a capire che c’è bisogno di un click. attenzione anche alle animazioni: attirano lo sguardo ma rischiano di confondere e appesantire.

Posiziona nel posto giusto

Esistono standard e regole condivise per utilizzare questi elementi di advertising su una pagina web desktop e mobile. Il nostro obiettivo è quello di trovare la soluzione giusta. Questo significa analizzare i risultati e decidere in base all’osservazione empirica. Proprio come si fa in un ciclo di Deming.

In pratica, usi un formato e lo testi. Se funziona lo perfezioni altrimenti lo cambi e provi una soluzione differente. In questi casi è fondamentale usare tool come Google Analytics con relativi link tracciati e strumenti di heat map come Hotjar e CrazyEgg per capire se il visual viene cliccato o ignorato.

Come inserire un banner su WordPress

Le soluzioni per aggiungere un banner sul tuo sito web, e nello specifico su WordPress, sono tante. La più semplice è la soluzione grafica che ti consente di creare un’immagine delle dimensioni indicate.

A questo punto puoi caricare il visual dove preferisci, ad esempio nella sidebar, e aggiungere un link per far arrivare le persone a destinazione. Ed è possibile fare lo stesso nel corpo degli articoli.

Questa soluzione, per quanto logica ed efficace in termini di performance, non è proprio quella più comoda in assoluto. Perché dovresti inserire su ogni contenuto che pubblichi lo stesso codice.

Per questo si può avviare un sistema dinamico per aggiungere i banner su WordPress. In questi casi si possono usare dei plugin specifici come OptinMonster, una delle migliori soluzioni per creare bottoni, pop-up e altri elementi grafici per permettere alle persone di cliccare sui tuoi messaggi pubblicitari

Da leggere: come sfruttare l’effetto priming per progettare un sito web efficace

Un buon metodo per gestire i banner

L’uso di questi elementi grafici pubblicitari sul sito web è fondamentale, non solo se lavori con gli introiti dell’ADV. Non esistono esclusivamente i banner di Adsense o quello che vendi agli inserzionisti. Anche le tue squeeze e sales page trovano beneficio da una buona gestione di questi elementi.

Per questo ho studiato un sistema per creare shortcode in WordPress in grado di richiamare dei web banner da inserire in varie sezioni del blog o del sito web. Poi in Looker Studio c’è la possibilità di monitorare l’andamento dei singoli elementi pubblicitari e capire quali funzionano meglio.

Ovviamente il tracciamento avanzato è fatto con Google Tag Manager per inviare i dati a Google Analytics. Così è possibile applicare, in modo chiaro e schematico, quel famoso processo di studio ed evoluzione di ogni singolo aspetto della tua strategia per portare traffico sulle pagine che contano.

Mirko Ciesco

Mirko Ciesco

Web Performer

Raccolgo dati dai siti per portarli ad un livello superiore! 🚀
Sono esperto in web performance, ottimizzo la SEO tecnica e miglioro l’usabilità dei siti internet attraverso la web analytics. Creo strategie vincenti partendo dai problemi delle Startup e delle aziende. Infine tengo corsi personalizzati online e in tutta Italia con la mission di rendere il web un posto migliore.