Header del sito web: cosa deve avere (e cosa evitare)

Cos'è l'header e perché è più importante di quello che pensi

L'header è la prima sezione visibile di un sito web: quella che appare subito, prima di qualsiasi scroll. Contiene il logo, la navigazione e quasi sempre una headline principale.

Ma il suo vero ruolo va molto oltre il design. L'header comunica in pochi istanti chi sei, cosa fai e per chi. Se queste tre informazioni non sono chiare entro 3 secondi, il visitatore se ne va.

Google lo sa. Per questo penalizza i siti con alta frequenza di rimbalzo — che spesso nasce proprio da un header che non risponde alla domanda implicita del visitatore: "Sono nel posto giusto?"

Gli elementi che non possono mancare

Il logo

Posizionato sempre in alto a sinistra. È il punto di ancoraggio visivo. Se il tuo logo non è riconoscibile o non dice nulla di chi sei, è il momento di ripensarlo.

La navigazione

Massimo 5-6 voci. Ogni voce in più riduce la probabilità che l'utente clicchi su quella che conta davvero. Meno è meglio — sempre.

La headline

Questa è la parte che fa la differenza. Non "Benvenuto nel mio sito". Non il nome della tua agenzia in grande. La headline deve rispondere a una domanda: cosa ottieni se resti qui?

Un esempio efficace: "Aiuto i professionisti a creare siti che attirano clienti" è infinitamente meglio di "Web Design Creativo e Innovativo".

La CTA principale

Un bottone. Una sola azione. Chiara, diretta, visibile. Non "scopri di più". Qualcosa come "Prenota una call gratuita" o "Vedi i miei lavori" — specifico e orientato al valore.

Le 4 tipologie di header e quando usarle

1. Header full-width con immagine di sfondo

L'immagine occupa tutta la larghezza, il testo è sopra. Funziona bene per attività visual: fotografi, hotel, ristoranti, brand di lifestyle. Attenzione al contrasto — il testo deve essere sempre leggibile.

2. Header centrato

Headline e CTA al centro, spesso su sfondo pulito. Funziona per professionisti e consulenti che vogliono far parlare il messaggio, non l'immagine. Trasmette chiarezza e autorevolezza.

3. Header asimmetrico (split layout)

Testo a sinistra, immagine a destra (o viceversa). È il formato più usato oggi perché combina chiarezza testuale e impatto visivo. Ideale per freelance, coach, agenzie.

4. Header minimal

Solo logo e navigazione, senza hero section. Funziona per portfolio o siti dove il contenuto inizia subito sotto. Rischioso se non sai cosa stai facendo.

Vuoi vedere esempi concreti di come questi layout vengono usati dai migliori siti? Leggi il nostro articolo sui 10 siti belli da cui prendere ispirazione.

Header mobile: le regole cambiano

Oltre il 60% del traffico web arriva da smartphone. Eppure la maggior parte degli header viene pensata per desktop e adattata al mobile come ripensamento.

Su mobile, l'header deve essere ancora più essenziale. Il logo, il menu a hamburger e — se possibile — una CTA visibile in alto. La navigazione si nasconde nel menu a scorrimento e deve essere toccabile con il pollice, non con la punta delle dita.

Un errore comune: menu hamburger che non si chiude correttamente, o link del menu che non portano da nessuna parte su mobile. Se non hai testato il tuo menu su smartphone, fallo adesso.

Per capire come strutturare l'interfaccia utente in modo che funzioni su tutti i dispositivi, leggi la nostra guida sull'interfaccia utente.

Gli errori più comuni (e come evitarli)

Headline generica. "Benvenuto" o il nome dell'azienda in grande non comunicano nulla. Scrivi per il tuo cliente ideale — parla del suo problema o del risultato che può ottenere.

Troppe CTA. "Contattaci", "Scopri i servizi", "Leggi il blog", "Iscriviti alla newsletter" — tutte nell'header. Il risultato: nessuna viene cliccata. Una sola azione, ben visibile.

Immagine di sfondo illeggibile. Testo bianco su foto chiara = invisibile. Usa sempre un overlay scuro o un'immagine che rispetti il contrasto.

Header troppo alto. Se l'header occupa tutta la schermata ma non dice nulla di utile, stai sprecando lo spazio più prezioso del tuo sito. Tieni il tuo layout delle sezioni proporzionato.

Font illeggibile su mobile. Quello che sembra grande su desktop diventa minuscolo su uno schermo da 5 pollici.

Come migliorare il tuo header oggi

Primo step: apri il tuo sito su un telefono che non hai mai usato per testarlo. Cosa vedi? Cosa capisce qualcuno che non ti conosce?

Secondo step: riscrivi la headline. Togli il tuo nome. Togli "benvenuto". Scrivi una frase che risponde a: chi sei, cosa fai, per chi lo fai. In 10 parole o meno.

Terzo step: guarda i dati. Usa Google Analytics e Search Console per vedere quanti visitatori rimbalzano subito — cioè entrano e escono senza fare nulla. Se il numero è alto, l'header è il primo posto dove intervenire.

Quarto step: testa il tono. L'header deve parlare con la stessa voce con cui parli ai tuoi clienti. Se il tuo tono di voce è caldo e diretto, anche l'header deve esserlo.