• Tweet

• Tweet

L’uso degli header nelle pagine web è l’esempio più immediato del rapporto tra i vecchi mezzi di comunicazione di massa e internet perchè rimanda subito all’antica suddivisione in capitoli, paragrafi e sottoparagrafi dei libri e dei quotidiani.

E anche se può sembrare un argomento superato nell’attuale scenario SEO, credo che sia sempre utile fare una ripassata delle principali regole sull’HTML Headings (anche fonte immagine). Ideale quando decidi di fare un po’ di manutenzione al tuo blog!

H1, unico e solo

Quanti titoli ha l’ultimo libro che hai comprato? Ovviamente uno, e questo vale anche per una pagina web: deve esserci solo un <h1> che, ovviamente, indica ai motori di ricerca e agli utenti l’elemento più importante del testo. Questa non è una regola assoluta perché lo stesso Matt Cutts suggerisce che non è un problema articolare una pagina con due <h1>, a patto che ci sia una reale necessità e che non esageri pensando che questo possa avere dei vantaggi in termini SEO.

Consequenzialità

La regola vuole che non si dovrebbero mescolare gli head che dovrebbero susseguirsi in ordine decrescente e coerente con le sei possibilità offerte. Ciò significa che non è consigliabile saltare un head intermedio e, ad esempio, passare direttamente dall’<h1> all’<h3>. Inutile sottolineare che in una pagina web l’<h1> deve essere il primo head.

Utilità

Un head è un titolo a tutti gli effetti e, in quanto tale, deve servire a descrivere senza tanti giri di parole il testo che introduce. Non farti prendere dalla smania di inserire keyword a go-go e pensa piuttosto al piacere che proveranno i lettori nel trovarsi di fronte un testo ben organizzato. Allo stesso modo, l’inserimento di head inutili in un testo può avere l’effetto opposto.

Formattazione

Sicuramente è giusto piegare la formattazione degli header ai caratteri estetici di un blog/sito con i Css ma non dimenticare mai di differenziare coerentemente i vari titoli. L’<h1> è l’head più importante della pagina e quindi deve avere un carattere maggiore, leggermente superiore all’<h2> e così via fino agli <h6>(lo dice anche il W3School: <h1> defines the largest heading and <h6> defines the smallest heading). E cerca di mantenere lo stesso font per tutti!

Controllo

Sei terrorizzato dall’idea di dover spulciare ogni angolo del tuo codice HTML per verificare gli header? Niente paura, ci sono diversi strumenti che ti possono aiutare: io preferisco Wave – Web Accessibility Evaluation Tool e la funzione XRay della classica SEO ToolBar per Firefox.

Extra tips: Header e HTML5

Novità sull’argomento heeader con l’arrivo dell’HTML5 (attualmente ancora in fase draft)? Sì, qualcosa si muove come nel caso del nuovo elemento <header> descritto dall’ottimo articolo di Extrowebsite. Da tenere sott’occhio!