I tag di intestazione H1, H2, H3 ecc… sono elementi HTML utilizzati per definire le intestazioni di una pagina.
I titoli, si sa, sono la parte più importante di una pagina, sia essa la pagina di un libro, di un giornale o di un articolo sul web. Senza un titolo i testi all’interno di una pagina non hanno capo e senso.
Differenziano l’intestazione “h1” e i sottotitoli da “h2” a “h6” dal resto del contenuto.
Il numero da 1 a 6 determina l’importanza e la posizione di un’intestazione nella gerarchia complessiva della struttura di una pagina. I tag “H” sembrano solo dei codici HTML ma, in realtà non è così e vanno utilizzati bene per rendere la pagina comprensibile e facile per chi legge e soprattutto per i motori di ricerca che devono indicizzarla.
La pagina web in fondo è una gerarchia di nodi, per cui il tag di intestazione è il punto di partenza da cui si diramano altri nodi e si dovrebbe avere uan sola intestazione H1 perchè è la radice da cui iniziano tutti gli altri nodi. In pratica è la struttura del documento html che lo rende facilmente fruibile sia agli utenti che ai motori di ricerca. Una struttura ben fatta è sempre un buon punto di partenza.
I Titoli in html e su carta stampata
Sul web il titolo ha la sua grande importanza e di solito è anche l’url della pagina stessa. In html il titolo si evidenzia con il tag “H1”. E, come nella stampa, ci sono diversi di titoli che hanno tutti il loro ruolo predefinito.
Nella stampa troviamo il titolo, l’occhiello, il catenaccio e il sommario. In html abbiamo tutti i tag “H”: h1, h2, h3, h4, h5, h6. Teniamo ben presente sempre che le regole della carta stampata valgono anche per il web. Cosa vogliamo dagli utenti della nostra pagina? Catturare l’attenzione e far sì che continuino a leggere la nostra pagina. Bene, allora è buona consuetudine seguire le regole della carta stampata: sono regole perfette anche per i contenuti di un sito internet.
Le regole sul web
Quando si scrive per il web è necessario tenere conto delle regole. Non a caso gli H hanno dei numeri discendenti che naturalmente spiegano il loro posizionamento. Posizionare un H5 prima di un H1 o saltare un “H” è sbagliatissimo: potrebbe creare problemi di comprensione sia agli utenti e soprattutto ai motori di ricerca. Il W3C ci chiarisce le idee: “i documenti non dovrebbero saltare i livelli (ad esempio, da H1 a H3) , poiché la conversione di tali documenti in altre rappresentazioni è spesso problematica.”
Alcuni esempi:
Questo no:
<h4>Titolo 4</h4>
<h1>Titolo 1</h1>
<h3>Titolo 3</h3>Questo sì:
<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
Come utilizzare i tag H?
“H” sta per “heading”, cioè titolo: le grandezze previste sono sei. Dall'”h1″, il più importante, si va via via degradando fino all'”h6″.
L’h1 è il più importante: deve spiegare bene il soggetto di tutto quello c’è scritto nella pagina. E’ il tag necessario per permettere immediatamente di capire cosa contiene il testo della pagina stessa. I motori di ricerca oggi richiedono che l’H1 contenga la keyword più importante della pagina e ne cercano all’interno del testo sottostante la ripetizione nelle sue varie declinazioni e la spiegazione. Inoltre, un buon link in entrata dovrebbe contenere lo stesso titolo h1, con la stessa keyword. Perciò è molto importante studiarlo bene perché un titolo ben fatto è il 90% dei risultati Seo.
Al contrario, le intestazioni inferiori nell’ordine (da H2 a H6) possono essere utilizzate tutte le volte che si desidera.
Di conseguenza l’H2, posto al di sotto di esso, deve contenere una breve frase esaustiva per ampliare ulteriormente il concetto dell’H1. Sarebbe come il “catenaccio” di una pagina di stampa.
Un tag “H2” definisce le intestazioni di secondo livello nella tua pagina web.
I tag dei sottotitoli come H3, H4, H5, H6 vengono utilizzati per suddividere i contenuti e renderli scansionabili e facili da leggere.
Purtroppo, molti webmaster utilizzano i tag “H” come formattazione per i loro contenuti, senza sapere che invece sono titoli veri e propri. E’ necessario assolutamente evitare di usare titoli per gli elementi di design: il rendering dovrebbe essere sempre fatto utilizzando i CSS per controllare l’aspetto dei tag H rendendoli più grandi o più piccoli.
Anche l’utilizzo di troppi “H” è errato. Ricordiamoci che i titoli agli occhi dei motori di ricerca sono sempre rilevanti e quello che contengono è catalogato come keyword e che tali keyword le andranno a cercare all’interno del testo sottostante.
Per questo motivo si deve utilizzare la giusta gerarchia agli “H”, senza metterne troppi, e così aiutare i motori di ricerca a capire quali sono gli argomenti più importanti della nostra pagina.
Google stesso ci ammonisce: “Utilizziamo i tag H per comprendere meglio la struttura del testo in una pagina. John Mueller, Google”
Per questo la struttura di una pagina web ottimizzata deve assolutamente seguire le linee guida dell’html: la pagina sarà così di più semplice lettura e avrà la formattazione che desideriamo.