Come utilizzare correttamente i tag di intestazione HTML

Ogni sito Web è un mostro unico, con sviluppatori e designer che inseriscono le proprie voci distintive nel codice. Ma un elemento che ogni singolo sito web ha in comune sono i tag di intestazione HTML. Queste intestazioni non solo suddividono i tuoi contenuti in sezioni più leggibili, ma creano il contorno semantico del tuo sito in modo che i motori di ricerca e il software di accessibilità possano dire esattamente quale contenuto costituisce il sito. A volte c'è un po' di confusione sull'uso e la funzione corretti dei tag di intestazione HTML, quindi vogliamo esaminare tutti e 6 i livelli e discutere come e quando usarli correttamente.

Iscriviti al nostro canale Youtube

Perché utilizzare i tag di intestazione HTML?

Come abbiamo detto sopra, questi tag creano lo scheletro del tuo sito. Senza di loro, non solo il titolo e lo scopo del tuo sito sono meno che chiari, ma il contenuto guarda agli utenti e ai bot come se fosse un gigantesco muro di testo, anche se lo spezzi usando i paragrafi.

Inoltre, gli screen reader e i software di accessibilità li utilizzano per navigare nei tuoi contenuti (a volte letteralmente). Quindi, se non includi i tag di intestazione HTML, il tuo sito diventa inaccessibile a molte persone perché semplicemente non possono spostarsi nella pagina e nel contenuto.

Inoltre, anche i motori di ricerca e altri crawler web che arrivano al tuo sito navigano attraverso i tuoi titoli. Di recente, Google ha preso in considerazione la semantica del codice nelle sue classifiche, il che significa che l'intento di ricerca è molto pesato. I tuoi tag di intestazione HTML sono una parte importante di questo, dicendo a Google e ai visitatori dove nella pagina trovare informazioni specifiche, organizzate per importanza gerarchica.

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

La gerarchia dei tag è importante

La gerarchia dei tag di intestazione HTML è importante. L'ordine in cui utilizzi questi tag può creare o distruggere la SEO per il tuo sito. Mentre puoi modellarli usando CSS e rendere un tag H6 più grande, più audace e più luminoso di un H2, dovresti comunque provare a tenerli in ordine per non confondere i crawler (e i lettori).

Pensa ai tag in ordine crescente come se fossero i titoli della struttura del tuo post. Dovresti solo (in generale), mettere un numero più alto sotto il suo immediato predecessore. Puoi annidarli in profondità quanto vuoi, ma assicurati di mettere solo il successivo in sequenza ogni volta.

Ecco un esempio:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

Potrebbero esserci casi specifici in cui hai un singolo H6 sopra un H4, ma per la maggior parte, Google e altri motori di ricerca determinano la priorità dell'argomento e valutano l'efficacia del contenuto per l'intento di ricerca utilizzando i titoli per navigare nei tuoi contenuti.

Tag H1

Il tag H1 può essere il più semplice dei tag di intestazione HTML, pur essendo anche uno dei più fraintesi. Nella maggior parte dei casi, vedrai l'intestazione H1 come titolo di una particolare pagina o post. È ciò che i motori di ricerca (probabilmente) visualizzeranno nei risultati. Probabilmente il tuo browser lo mostrerà anche nella sua barra del titolo, anche se molti plugin SEO e app simili ti consentono di cambiarlo per quelli. Per questo motivo, sebbene sia importante avere la frase chiave di destinazione nel tag H1, non è necessario al 100%. Scrivi i titoli e i titoli in modo semantico per coprire l'intento di ricerca dei visitatori invece di riempire con parole chiave i tag di intestazione HTML.

L'immagine sopra mostra un tag H1 utilizzato come titolo della voce per un articolo sul blog Elegant Themes. È anche l'unico tag H1 sulla pagina. Questo indica che è l'argomento del contenuto della pagina.

Per anni, la pratica standard è stata quella di avere un (e solo uno) tag H1 per pagina. Per la maggior parte, 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 affermato esplicitamente che avere più tag di intestazione HTML H1 sul tuo sito non comporta alcuna penalità SEO. Ciò non significa impazzire a usarli ovunque sul tuo sito, ma significa che puoi usarne più di uno per pagina quando è necessario.

Quando utilizzare più intestazioni H1

L'unico scopo di un 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, dovresti usare un H1 per ogni nuovo argomento su quella pagina. In questo modo diresti a Google che la tua pagina non riguarda solo l'argomento nel titolo. Ma potrebbe anche esserci una sezione su un argomento completamente diverso (ma correlato) più in basso.

Sui siti Web a pagina singola, questo è importante anche perché potresti avere una sezione Informazioni, Prezzi, Contatti e Portafoglio in quella pagina. Quindi, come fai a far sapere a Google che il contenuto contenuto all'interno di ciascuna sezione è una sua unità autonoma?

Tag H1, ecco come. Tratta ogni sezione come se fosse la sua mini-pagina web, usando la gerarchia che abbiamo discusso sopra in ciascuna. In questo modo, Google vede le intestazioni mentre naviga nella pagina e può quindi determinare da quale di queste sezioni estrarre gli snippet in primo piano (e così via) per rispondere alle domande degli utenti.

Puoi anche scegliere di utilizzare un tag H1 ogni volta che utilizzi 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.

Tag H2

I tag H2, ora, molto probabilmente saranno i tag di intestazione HTML più utilizzati nelle tue pagine. E per una buona ragione. La maggior parte dei post e delle pagine su Internet consiste in un singolo argomento con solo pochi sottotitoli. Consigliamo che ogni contenuto che crei contenga almeno un tag H2. Yoast e altri plugin SEO suggeriscono un titolo ogni 300 parole circa. A seconda dei tuoi contenuti, ecco a cosa servono i tag H2.

Separano gli argomenti secondari (o passaggi) per facilitare la lettura. Ad esempio, la maggior parte dei nostri post consiste principalmente di intestazioni H2 (con H3 quando applicabile). Questo perché i nostri articoli trattano un unico argomento, in cui stiamo cercando di risolvere un singolo problema. Avremo il titolo come Come utilizzare OBS Studio per livestream come H1, ma i sottotitoli come "Come iniziare con OBS Studio" saranno in H2.

Il tag H2 rappresenta i singoli passaggi che riguardano direttamente l'argomento H1. In quel particolare post abbiamo usato la seguente struttura:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

I tag di intestazione H2 in questo post illustrano le idee principali, come iniziare e scaricarlo, configurare il software effettivo e quindi regolare l'aspetto dello schermo per gli spettatori. Mentre ci sono passaggi coinvolti anche sotto quelli in H3, i titoli H2 indicano l'immagine su larga scala dell'articolo. Sono una visualizzazione di alto livello che crawler e lettori potranno esaminare per vedere se l'articolo contiene le informazioni che stanno cercando.

In generale, avrai più tag H2 per articolo, mentre potresti non avere sottotitoli nidificati sotto di essi. Se la tua pagina o il tuo post riguarda un singolo argomento che non è suddiviso in sezioni con sottosezioni come nell'esempio sopra, sarebbe meglio avere più tag H2 rispetto a H2 -> H3 -> H4 nidificati perché indicano ai crawler che ' immergersi più a fondo su un supposto piuttosto che espandersi sull'argomento principale del post.

Tag H3

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

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

È solo di dimensioni più ridotte per indicare che è un punto subordinato all'H2, piuttosto che un collegamento diretto all'argomento generale, che è molto importante da un punto di vista strutturale per quanto riguarda il SEO per il tuo articolo. Per i lettori umani, piuttosto che per i robot, la distinzione visiva aiuta semplicemente a spostarli lungo la pagina e a suddividere le informazioni per analizzarle più facilmente.

Tag H4, H5, H6

Li abbiamo messi insieme per un motivo. In generale, sarà difficile trovare siti che fanno pieno uso della gamma da H1 a H6 di tag di intestazione HTML. Di gran lunga, la struttura più popolare è da H1 a H3. Proprio come raramente vedi un contorno di contenuto oltre il secondo livello nidificato.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

Per la maggior parte, il tag H4 avrà lo stesso scopo di H3. Li utilizzerai per entrare nei dettagli per passaggi ed esempi, ma sempre annidati sotto i titoli principali. I designer generalmente li modellano con CSS più piccoli di H3. Tendono a vedere un uso limitato nella creazione di contenuti ordinari. Un argomento tende ad essere molto approfondito se le idee devono essere scomposte in modo da richiedere un tag di intestazione H4.

H5 e H6

Puoi usare le intestazioni H5 e H6, in un paio di modi diversi.

Il primo modo

(Solo per un esempio, abbiamo suddiviso questa particolare sezione in varie parti tramite intestazione, e ora siamo sotto H4 perché è un sottoargomento 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 titoli fino a H6.

La seconda via

Alcune persone usano i tag H5 e H6 come intestazioni di formattazione "speciali". Applicheranno CSS speciali a questi due tag di intestazione HTML completamente diversi da H1 a H4. Puoi quindi usarli per richiamare l'attenzione su argomenti e idee che altrimenti potrebbero essere trascurati.

Questa non è tecnicamente la migliore pratica, poiché le intestazioni sono gerarchiche. Tuttavia, se il tuo sito è strutturato bene nel complesso e usi H5 e H6 con parsimonia come stili speciali su alcune singole pagine o post, quasi sicuramente non subirai alcun colpo SEO.

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

Cosa non fare con i tag di intestazione HTML

Non strutturare una singola pagina con l'intera gerarchia di intestazioni fino in fondo. Stai meglio con un H1 per un titolo e tutti gli H2, piuttosto che ogni intestazione successiva che viene annidata.

Sì:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

No:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

Inoltre, non vuoi usare le intestazioni a casaccio. Usali solo in ordine. Altrimenti i crawler non avranno idea di come navigare nella tua pagina, né il software di accessibilità.

No:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

In generale, puoi presumere che un crawler saprà che sei uscito da una sottosezione quando troverà il prossimo H1 o H2. Nel frammento di codice sopra, i crawler e i bot avrebbero difficoltà ad analizzare la struttura delle informazioni.

Conclusione con tag di intestazione HTML

E vedi? Siamo tornati a un'intestazione H2 per concludere le cose. I tag di intestazione sono un elemento importante di ogni singolo sito web. Usarli correttamente può aumentare il tuo posizionamento nei motori di ricerca, così come la UX del tuo sito poiché i visitatori saranno in grado di trovare più facilmente le informazioni che stanno cercando nei tuoi contenuti. Ricordati di essere sicuro di non inserire troppe parole chiave nelle tue intestazioni. Sebbene sia una buona idea includere le parole chiave o le frasi di cui stai discutendo per assicurarti che le tue idee siano chiare, Googlebots e altri sono piuttosto intelligenti e possono dire quando hai scambiato argomenti o sei sullo stesso argomento. Nel complesso, l'utilizzo dei tag di intestazione HTML è incredibilmente importante, ma se tieni a mente solo alcune cose, i tuoi siti brilleranno in pochissimo tempo.

Hai utilizzato correttamente i tag di intestazione HTML?

Immagine in primo piano dell'articolo di VectorV / shutterstock.com