Di Riccardo Esposito | Pubblicato il - Aggiornato il
L’header è la sezione alta del sito web. Si tratta della testa, compresa nell’above the fold, che appare subito nel caricamento. Qui troviamo il logo, il menu di navigazione e le icone social. Ma anche la ricerca interna del blog o sito web.
Quando una pagina web si carica c’è un elemento che viene visto prima di tutti gli altri. Si tratta dell’header, vale a dire l’elemento composto da codice HTML che permette al tuo sito internet di presentarsi al pubblico. Ovviamente nel miglior modo possibile.
Siamo abituati a chiamare tutto ciò che vediamo quando si carica una pagina web semplicemente above the fold. Ovvero sopra la piega, così come si dice nel gergo giornalistico. Però in quest’area troviamo headline dell’articolo, immagine, primo paragrafo. E poi, sicuramente, un header. Vogliamo approfondire questo tema?
Indice dei contenuti
Cos’è un header, definizione e spiegazione
L’header è la parte più in vista dell’intero blog o sito web che si trova in home page e in tutte le altre pagine. In quest’area troviamo alcuni elementi fondamentali per la navigazione e l’identità di brand. Come ad esempio il logo, le icone social, la navigazione.
La centralità di questo elemento, sia da desktop che da mobile, dipende dal fatto che qui puoi racchiudere alcune informazioni decisive sia per aiutare il pubblico a capire chi sei e cosa fai, sia per ottimizzare il tuo portale dal punto di vista della SEO.
Attenzione alle differenze con header e heading. Quest’ultimi sono i sottotitoli che inserisci prima dei paragrafi e vanno dall’H1 all’H6, passando per H2, H3, H4 e H5.
Da leggere: cos’è e a cosa serve l’heading H1
Cosa mettere in un header, ecco un esempio
Per avere un quadro chiaro di cosa stiamo parlando possiamo prendere un caso concreto di header e analizzarlo così possiamo capire come è fatto e cosa troviamo in questa sezione del sito web. Come puoi vedere, si tratta di un’area piccola ma decisiva.
In questa sezione di un portale, di solito, si trovano elementi necessari sia per presentare il portale al pubblico che per scoprirlo e navigarlo. Nello specifico troviamo:
- Nome del sito.
- Menu principale.
- Ricerca interna.
Questi sono gli oggetti che dovresti trovare sempre, tecnicamente fanno parte dell’header. Nello specifico il nome è situato sempre a sinistra e il menu a destra insieme alla ricerca. Poi ci sono elementi che cambiano e che potresti rintracciare o meno. Cosa mettere nell’header? Ecco una lista di elementi ricorrenti:
- Navigazione secondaria.
- Logo con payoff.
- Tagline del sito web.
- Cambio lingua.
- Icone social network.
- Link a sezioni interne o login.
- Barre di promozione.
- Bottoni con call to action.
Spesso le intestazione della pagina cambiano in base al tipo di progetto. Ad esempio, negli e-commerce troviamo anche i link ai vari elementi per gli acquisti come carrello e link a check-out con indicazione degli elementi che stai per acquistare sul portale.
Come modificare e cambiare header
Senza accedere al codice HTML, per modificare la parte superiore del sito web puoi utilizzare l’editor compreso nel tuo tema WordPress. Basta andare in personalizza e poi in builder dell’header dove puoi intervenire su più aspetti della testata e della navbar.
Con questo sistema dimenticati di modificare l’header HTML: bastano pochi click per aggiungere moduli e sezioni nelle varie aree, sia in verticale che in orizzontale. Puoi verificare anche da mobile e da tablet, basta usare il pulsante in basso nell’editor visuale.
Come ottimizzare l’header di un sito web
Ci sono alcune regole da seguire per avere una sezione alta del tuo progetto adeguata alle esigenze SEO e UX? Certo, in primo luogo devi assicurarti che questa sezione sia rapida nel caricarsi e poco impegnativa per l’utente. In poche parole deve essere:
- Leggera.
- Bassa.
- Semplice.
Non devi creare uno spazio affollato, dai i giusti pixel a ogni elemento. Però non creare un header inutilmente alto perché è solo spazio sprecato che rubi all’above the fold e al main content della pagina. L’header dà informazioni generiche, non specifiche.
Logo
Per ottimizzare questa parte del portale devi caricare un logo con le dimensioni giuste, compresso ma non di bassa qualità. Il file deve essere rinominato con il nome brand e fai lo stesso quando inserisci il tag alt. Sotto al logo puoi aggiungere il payoff.
Menu
Il menu di navigazione è un elemento fondamentale dell’header. Puoi aggiungere voci e cambiare anchor text ma è importante ragionare in termini di economia.
L’header deve essere semplice, pulito, non ingombrato da decine di link e tendine (esempio in alto). Inoltre devi prevedere lo spazio per il campo di ricerca interna.
Scrolling
Header fisso o a scorrimento? Di sicuro per le landing page lunghe è meglio utilizzare un fixed header o sticky con menu che segue lo scrolling, ovvero che combacia con la navigazione verticale dell’utente. Per pagine brevi è inutile questa opzione.
Mobile
Dovrebbe essere buona regola inserire un menu a panino per la versione mobile che non è invece adatto al sito web desktop. Quindi dovresti avere due versioni differenti che cambiano in base al dispositivo. Di solito è automatico con i migliori temi WordPress.
Cos’è e come gestire l’header HTML
Esiste anche un header HTML, ovvero tutto quello che si trova nella parte superiore lato codice. In questa sezione troviamo una serie di informazioni molto importanti che non vediamo normalmente sulla pagina web ma consentono al portale di funzionare.
D’altra parte c’è sempre stata questa confusione tra header inteso come parte superiore, testa del sito web, e tag <head>
del codice che riguarda la parte principale della pagina. Possiamo dire che esiste un header HTML e uno grafico. Cosa troviamo nel primo?
- Meta tag.
- Fogli di stile.
- Script.
- Favicon.
- Font.
In pratica, nel tag <head>
trovi tutto quello che serve al sito web per prepararsi e presentarsi. Ad esempio, hai tutte le informazioni modificate grazie a WordPress SEO by Yoast tipo meta description e tag title, ma anche le indicazioni del meta tag robots rispetto a:
- Index o noindex della pagina web.
- Follow o nofollow dei link.
Chiaramente qui trovi anche gli script per Google Analytics, Search Console, pixel di tracciamento. Per modificare l’header HTML puoi utilizzare plugin specifici come Header and Footer Code Manager o attingere al Google Tag Manager che ti consente di intervenire in modo strutturato. Alternativa: puoi modificare il file header.php.
Dove si trova questo elemento? Semplice, puoi raggiungerlo cliccando su Aspetto nella dashboard del tuo sito web WordPress. Qui hai la voce editor e nella lista dei file trovi anche header.php. Qui puoi modificare, inserire e togliere codice. Ricorda però il backup.
Ogni modifica deve essere valutata con cura altrimenti rischi di ritrovarti con un sito web non funzionante. Hai presente la classica pagina bianca della morte che appare all’improvviso? Perfetto, una modifica mal fatta all’header HTML è la causa principale.
Categoria: Guide per webmaster
Ottimo articolo, utile, interessante..
Spiegato in maniera semplice e dettagliata
Non ce nulla da aggiungere 🙂
Grazie, sei molto gentile 🙂