Heading Tag: cosa sono e come utilizzarli correttamente

Ogni sito web è unico, con sviluppatori e designer che inseriscono nel codice le proprie voci distintive. Ma un elemento che ogni singolo sito web ha in comune sono gli heading tag (o tag di intestazione) . Gli heading non solo suddividono i tuoi contenuti in sezioni più leggibili, ma creano la struttura semantica del tuo sito in modo che i motori di ricerca e i software di accessibilità (screen reader) possano riconoscere esattamente di quali contenuti è composto.

A volte si fa un pò di confusione sull’uso e la funzione corretta degli heading TAG, quindi in questo post esamineremo tutti i 6 livelli dei tag intestazione e vedremo come e quando usarli correttamente.

Perché usare gli heading HTML?

Come già detto, gli heading creano lo scheletro del tuo sito. Senza di essi, non solo il titolo e lo scopo del tuo sito saranno poco chiari, ma il contenuto viene visto da utenti e spider dei motori di ricerca come se fosse un gigantesco muro di testo, anche se lo spezzi usando i paragrafi.

Inoltre, gli screen reader e il software di accessibilità li usano per navigare i tuoi contenuti. Quindi, se non includi heading HTML, il tuo sito diventerà inaccessibile a molte persone perché semplicemente non possono spostarsi all’interno della pagina e dei contenuti.

In più, anche i motori di ricerca e altri crawler web che arrivano al tuo sito navigano attraverso gli heading. Recentemente, Google ha preso in considerazione la semantica nel suo algoritmo, il che significa che l’intento di ricerca pesa molto. I tag di intestazione HTML sono una parte importante di questo, perchè comunicano a Google e ai visitatori dove trovare informazioni specifiche sulle pagine, organizzate per importanza gerarchica.

E ogni tag all’interno della tua pagina aiuta tutto questo a modo suo.

La gerarchia degli heading è importante

La gerarchia dei heading tag è importante. L’ordine in cui utilizzi questi tag può determinare la SEO del tuo sito. 

Puoi modificarli usando i CSS e rendere ad esempio un tag H6 più grande, in grassetto e più prominente di un tag H2, ma dovresti comunque cercare di tenerli in ordine per non confondere i crawler (e i lettori).

Pensa ai tag in ordine crescente come se fossero le intestazioni per la struttura del tuo post. Dovresti solo (in generale) mettere un numero più alto sotto il suo predecessore immediato. Puoi nidificarli quanti ne vuoi in profondità, ma assicurati di mettere in sequenza ogni volta solo quello successivo.

Ecco un esempio:

<h1>Titolo</h1>
    <h2>Punto principale 1</h2>
        <h3>Sottoargomento</h3>
            <h4>Specifiche</h4>
        <h3>Punto principale 2</h3>
            <h4>Sottoargomento</h4>
                <h5>Esempio</h5>
            <h4>Specifiche</h4>
                <h5>Esempio</h5>
                    <h6>Esempio molto specifico che spiega questo punto</h6>

Potrebbero esserci casi specifici in cui hai un singolo H6 sopra un H4, ma per la maggior parte delle volte, Google e altri motori di ricerca determinano la priorità dell’argomento e misurano l’efficacia del contenuto per cercare l’intento utilizzando le intestazioni per navigare tra i tuoi contenuti.

Heading H1

Il tag H1 è il più banale degli heading tag HTML, pur essendo uno dei più fraintesi. Nella maggior parte dei casi, vedrai l’intestazione H1 come tag title di una determinata pagina o post. È ciò che i motori di ricerca mostreranno (probabilmente) nelle SERP. Anche il tuo browser lo mostrerà nella sua barra del titolo, anche se molti plugin SEO e app simili consentono di cambiarlo. 

Per questo motivo, sebbene sia importante avere la frase chiave target nel tag H1, non è necessario al 100%. Scrivi i titoli e i titoli semanticamente per rispettare l’intento di ricerca dei visitatori invece di inserire parole chiave negli heading tag HTML.

L’immagine sopra mostra un tag H1 usato come titolo di un articolo sul blog Creativemotions. È anche l’unico tag H1 sulla pagina. Questo indica che quello è l’argomento del contenuto della pagina.

Per anni, la pratica standard era quella di avere un (e solo uno) tag H1 per pagina. Per la maggior parte dei casi, questo è ancora un buon consiglio. Google e altri motori di ricerca eseguono la scansione della tua pagina e cercano il tag H1. Quindi lo usano per determinare l’argomento, il titolo e la struttura.

Tuttavia, Google ha dichiarato esplicitamente che la presenza di più tag di intestazione HTML H1 sul tuo sito non comporta alcuna penalità SEO . Ciò non significa che devi riempire la tua pagina inserendoli ovunque, ma che puoi usarne più di uno per pagina quando se ne presenta la necessità.

Quando utilizzare più heading H1

L’unico scopo di un tag H1 è quello di indicare una sezione completa su un singolo argomento. Ciò significa che se hai una singola pagina che ha più di un argomento, potresti utilizzare un tag H1 per ogni nuovo argomento in quella pagina. In questo modo diresti a Google che la tua pagina non riguarda solo l’argomento nel titolo. Ma potrebbe anche esserci in basso una sezione su un argomento completamente diverso (ma correlato).

Sui siti web a pagina singola, questo è importante anche perché su quella pagina potresti avere una sezione Informazioni , Prezzi , Contatti e Portfolio. Quindi, come fai a far sapere a Google che il contenuto di ciascuna sezione è a se stante?

Con i Tag H1, ecco come. Tratti ogni sezione come se fosse una mini-pagina web, usando la gerarchia di cui abbiamo discusso sopra. In questo modo, Google vede le intestazioni mentre naviga attraverso la pagina e può quindi determinare da quale di quelle sezioni estrarre (e così via) gli snippet in primo piano per rispondere alle query dei ricercatori.

Puoi scegliere anche di utilizzare un tag H1 ogni volta che usi un tag di sezione sul tuo sito, ma ti consigliamo di farlo solo quando si tratta di una sezione di importanza parallela al titolo della pagina, anziché di una subordinata.

Heading H2

I tag H2, probabilmente sono gli heading tag HTML più utilizzati nelle tue pagine e per una buona ragione. La maggior parte dei post e delle pagine su Internet è costituita da un singolo argomento con alcune sottovoci.

Ogni contenuto che crei dovrebbe contenere almeno un tag H2. Yoast e altri plugin SEO suggeriscono un’intestazione ogni 300 parole circa. A seconda del contenuto, ecco a cosa servono i tag H2.

Separano gli argomenti secondari (o i passaggi) per facilitare la lettura. La maggior parte dei nostri post, ad esempio, è costituita principalmente da titoli H2 (con H3 quando applicabili). Questo perché i nostri articoli sono su un singolo argomento, in cui cerchiamo di risolvere un singolo problema.

Avremo il titolo come Come installare WordPress in locale con XAMPP come tag H1, ma i sottotitoli come “Perchè dovresti installare WordPress in locale utilizzando XAMPP” saranno in H2.

I tag H2 rappresentano i singoli passaggi che riguardano direttamente l’argomento H1. In questo particolare post abbiamo usato la seguente struttura:

<h1>Come installare WordPress in locale con XAMPP</h1>
    <h2>Perché dovresti installare WordPress in locale utilizzando XAMPP</h2>
    <h2>Introduzione al software XAMPP</h2>
    <h2>Come installare WordPress in locale utilizzando il software XAMPP</h2>
        <h3>Installare XAMPP ed eseguire la configurazione</h3>
        <h3>Eseguire e configurare XAMPP per il tuo ambiente WordPress</h3>
        <h3>Scaricare ed eseguire WordPress</h3>
    <h2>Come installare WordPress Multisite in locale su XAMPP</h2>
    <h2>Cosa puoi fare con l'installazione locale di WordPress</h2>
    <h2>Conclusione</h2>

I tag di intestazione H2 in questo post ripercorrono le idee principali, perchè utilizzarlo, come iniziare e scaricarlo, come configurarlo ecc. Mentre ci sono dei passaggi al di sotto di quelli anche in H3, i titoli H2 indicano l’argomento su larga scala dell’articolo. Sono una visione di alto livello che i crawler e i lettori saranno in grado di scansionare per vedere se l’articolo contiene le informazioni che stanno cercando.

In generale, avrai diversi tag H2 per articolo, mentre potresti non avere sottotitoli nidificati al di sotto di essi. Se la tua pagina o post è su un singolo argomento che non è suddiviso in sezioni con sottosezioni come nell’esempio sopra, sarebbe meglio avere più tag H2 rispetto a H2 nidificato -> H3 -> H4 perché indicano ai crawler che stai entrando più in profondità di un argomento.

Heading H3

I tag H3, d’altra parte, sono i tag in cui i tuoi articoli possono davvero scavare nei dettagli del tuo argomento. Non dovresti mai usare questi tag direttamente sotto un tag H1. Googlebot e motori di ricerca li vedono assolutamente come sottotitoli. Considerando che un H2 è accettato come titolo principale per le sezioni all’interno di un singolo articolo (con l’H1 che dichiara l’argomento principale come titolo, ricorda).

Se osservi attentamente l’immagine sopra, vedrai che lo stile e il dimensionamento effettivi tra i nostri tag H2 e H3 non sono molto diversi. Il motivo è che non vogliamo che tu presuma scansionando che qualsiasi punto che facciamo in un H3 sia meno importante di un H2. Perché non lo è.

È solo di dimensioni più piccole per indicare che è un punto subordinato a un H2, piuttosto che un legame diretto con l’argomento generale, che è più importante dal punto di vista strutturale per quanto riguarda la SEO per il tuo articolo.

Per i lettori umani, piuttosto che i bot, la distinzione visiva aiuta semplicemente a spostarli in basso nella pagina e suddividere le informazioni per analizzarle più facilmente.

Tag H4, H5, H6

Li abbiamo raggruppati insieme per un motivo. In generale, sarà difficile trovare siti che sfruttano appieno la gamma di heading tag HTML completa da H1 a H6. La struttura più utilizzanta, in genere, è da H1 a H3. 

H4

Nella maggior parte dei casi, il tag H4 avrà lo stesso scopo di un tag H3. Li userai per entrare nei dettagli di passaggi e negli esempi, ma sempre annidati sotto le intestazioni principali. I designer generalmente li modificano con CSS più piccolo di un H3.

Hanno un uso limitato nella normale creazione di contenuti. Un argomento tende ad essere molto approfondito se le idee devono essere suddivise in modo che sia necessario un tag di intestazione H4.

H5 e H6

Puoi usare le intestazioni H5 e H6, in due diversi modi

Primo modo

(Solo per un esempio, abbiamo suddiviso questa particolare sezione in varie parti tramite l’intestazione e ora siamo sotto H4 perché è un sotto-argomento secondario dell’articolo principale.)

Queste intestazioni sono spesso utilizzate in sommari ed elenchi simili, sebbene la loro funzione principale sia tecnicamente la stessa delle altre, delineando argomenti di importanza decrescente in tutta la pagina. Sarà piuttosto raro trovare un documento con una gamma completa di intestazioni fino a H6.

Secondo modo

Alcune persone usano i tag H5 e H6 come intestazioni di formattazione “speciali”. Applicheranno CSS speciali a questi due tag di intestazione HTML che sono completamente diversi da H1 a H4. È quindi possibile utilizzarli per richiamare l’attenzione su argomenti e idee che altrimenti potrebbero essere trascurati.

Questa non è tecnicamente la migliore, poiché i titoli sono gerarchici. Tuttavia, se il tuo sito è nel complesso ben strutturato e usi H5 e H6 con parsimonia come stili speciali su determinate singole pagine o post, quasi sicuramente non avrai problemi con la SEO.

Ricorda solo che anche quando li usi per una formattazione speciale, non devi uscire dalla gerarchia. Tienili in ordine. Quindi, se usi H6 per dare uno stile a un sottotitolo, assicurati che il prossimo che usi sia un tag H1 o H2 per mostrare che sei tornato alla struttura standard.

Come NON USARE gli heading tag

Non strutturare una singola pagina con l’intera gerarchia di tag di intestazione fino in fondo. Utilizza un H1 per il tag title e tutti H2, invece di annidare ogni titolo successivo.

Sì:

<h1>Titolo</h1>
    <h2>Punto numero 1</h2>
    <h2>Punto numero 2</h2>
    <h2>Punto numero 3</h2>
    <h2>Punto numero 4</h2>

No:

<h1>Titolo</h1>
    <h2>Punto numero 2</h2>
    <h3>Punto numero 3</h3>
    <h4>Punto numero 4</h4>
    <h5>Punto numero 5</h5>
    <h6>Punto numero 6</h6>

Inoltre, non dovresti utilizzare gli heading tag a casaccio ma solo in ordine, altrimenti i crawler e i software di accessibilità non avranno idea di come navigare nella tua pagina..

No:

<h1>Titolo</h1>
    <h3>Punto Numero 2</h3>
    <h2>Punto Numero 3</h2>
    <h6>Punto Numero 4</h6>
    <h5>Punto Numero 5</h5>
    <h4>Punto Numero 6</h4>

In generale, puoi supporre che un crawler sappia che sei uscito da una sottosezione quando trova il successivo tag H1 o H2. Nello snippet di codice sopra riportato, i crawler e i bot avrebbero difficoltà ad analizzare la struttura delle informazioni del tuo argomento.

Conclusione

Gli heading tag sono un elemento importante di ogni sito web. Usarli correttamente può migliorare il tuo posizionamento nei motori di ricerca e l’esperienza utente del tuo sito poiché i visitatori saranno in grado di trovare più facilmente le informazioni che stanno cercando.

Ricorda di non inserire troppe parole chiave nei titoli. Anche se è una buona idea includere le parole chiave o le frasi che stai discutendo per assicurarsi che le tue idee siano chiare, Googlebot e gli altri bot sono piuttosto intelligenti e capiscono quando hai cambiato argomenti o sei sullo stesso.

Nel complesso, l’uso dei tag di intestazione HTML è incredibilmente importante, ma se tieni a mente solo alcune semplici regole, il tuo sito emergerà in poco tempo.

Buon lavoro!