Di Riccardo Esposito | Pubblicato il - Aggiornato il
Devi usare H1, H2 e H3 fino ad H4, H5 e H6 per creare una struttura interna delle pagine web utile per la SEO e per l’User Experience. I titoletti (o heading) servono a introdurre i vari argomenti per suggerirli sia a Google che al lettore.
Capire come inserire H1, H2, H3 e i tag heading fino all’H6 è uno dei punti per chi vuole il massimo dal lavoro di blogging e web writing. Perché questi elementi contano: sono i titoletti che ti consentono di definire gli argomenti di una pagina internet.
Questi titoli HTML hanno un’importanza fondamentale. Non tanto dal punto di vista dell’ottimizzazione SEO copywriting. O almeno non come viene inteso da chi si limita a inserire keyword. Ecco come usare H1, H2, H3 e anche il tag title dei tuoi articoli.
Indice dei contenuti
Cosa sono gli heading tag HTML: definizione
Sono i titoli blog divisi in sei intestazioni che permettono di organizzare i contenuti di una pagina web. Fanno parte del sistema di heading, in cui il tag <h1> rappresenta il titolo più importante e <h6> il meno incisivo. Un esempio di heading tag HTML:
In alcuni casi gli heading o sottotitoli WordPress vengono usati per creare menu interni e il font usato da questi elementi deve essere superiore rispetto a quello del body copy. Ecco un altro esempio di H1 didascalico, semplice, preso da una pagina WikiPedia.
La lunghezza del tag H1 non è un parametro chiaro, molto dipende dal tipo di pagina che vuoi creare. Proprio come avviene con altri elementi del testo. Non crederai mica che 300 parole è per forza il minimo ammesso per un articolo, vero?
Come funzionano i tag heading su una pagina web?
C’è un titolo principale, ci sono dei capitoli con il testo H2 e all’interno ci sono paragrafi, sottoparagrafi, appendici e altre sezioni minori. Ma altrettanto importanti per il testo.
Si definiscono all’interno del documento con un sistema decrescente di tag che si aprono e si chiudono (<h1></h1>) comprendendo il testo che vuoi trasformare in heading.
Attenzione, i tag heading non hanno alcun legame con l’header <head> che è la sezione dei metadati nella quale si inseriscono informazioni non mostrate al pubblico.
Da leggere: come creare la struttura di un blog
Esempi di tag heading nel codice HTML
Mi sembra giusto iniziare dalla base. Quando guardi il codice HTML cerchi di individuare questi titoli SEO ma non li trovi? Come detto prima, i tag heading si trovano in sezioni definite che si aprono e si chiudono. Ma come appare l’HTML di H1, H2 e H3?
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Come puoi vedere il percorso lato codice HTML è piuttosto semplice, c’è un tag che si apre e uno che si chiude contenendo il testo utile all’interno. In questo modo puoi organizzare i testi del sito. Ma ci sono delle regole da rispettare per ottenere il massimo.
I tag di intestazione che possono creare titoli e titoletti seguono le regole dell’HTML, quindi si presentano con un tag di apertura e uno di chiusura attraverso lo slash.
Inoltre grazie alle regole del CSS è possibile dare una carattere diverso, inserire un font di colore differente o più grande. Rispettando però sempre i criteri di gerarchia.
Tag H1: cos’è e come si usa, le regole
L’heading H1 è il titolo della pagina web, l’headline visibile all’occhio. Mentre il tag title è dedicato ai motori di ricerca (viene mostrato solo nella serp, sui social e nell’etichetta del browser), il tag H1 o heading principale prende spazio nella parte alta dell’articolo.
Il tag HTML H1 è l’intestazione, l’elemento graficamente e gerarchicamente più importante. Il testo dell’H1 è il titolo della pagina web. Si trova in alto e riassume al lettore il contenuto del documento. Viene seguito gerarchicamente da H2, H3, H4, H5 e H6.
Esempio e caratteristiche CSS dell’H1
Il font è più grande rispetto alle altre porzioni di testo, in qualche caso può essere differente rispetto al resto. L’H1 fa parte degli heading, dei tag HTML che hanno uno scopo ben preciso: definire delle intestazioni che racchiudono o introducono sezioni specifiche. Per capire come funziona il tag <h1> ti lascio un esempio chiaro:
<h1>Web marketing</h1>
<p>Spiegazione del web marketing</p>
<h2>SEO</h2>
<p> Spiegazione della SEO</p>
<h3>SEO on-page</h3>
<p>Spiegazione dell'argomento</p>
<h3>SEO off-page</h3>
<p>Spiegazione dell'argomento</p>
<h4>SEO off-page per ristoranti</h2>Nei vari heading (che vanno dall’H1 all’H6) c’è il titolo che è rappresentato dal tag H1, ci sono i capitoli racchiusi negli H2, poi trovi i sottoparagrafi definiti dagli H3 e via discorrendo fino all’H6. Questa è la linea da seguire per i titoli heading delle pagine.
Heading H1 e SEO: quale relazione?
Niente giochi, lascia da parte le idee sull’ottimizzazione estrema di questi campi. I portavoci di Google spiega come usare l’H1 per la SEO con parole semplici:
“Some SEO tools flag this as an issue and say like Oh you don’t have any H1 tag or you have two H1 tags… from our point of view that’s not a critical issue”.
John Mueller
L’H1 è un ottimo strumento per gestire la struttura della pagina web e indicare a Google e alle persone come hai organizzato la pagina. Ma non è un elemento SEO decisivo. Quindi, usalo per informare le persone scrivendo nel primo campo.
Cosa sapere oltre a questo? Se non ci sono motivi particolari conviene usare sempre e comunque l’H1, quello che si inserisce automaticamente compilando questo elemento.
Quanti H1 usare in una pagina?
Dovresti usare un solo heading H1. L’uso di più headline non è un errore grave, con l’HTML5 è perfettamente concesso. Ma l’uso di un unico H1 è considerata la strada migliore. Perché è l’intestazione più importante e indica lo scopo principale della pagina.
Pagina senza H1: è un problema SEO?
Una delle affermazioni di John Mueller riguarda sia la quantità che l’importanza del tag H1 per la SEO. Il portavoce di Google ha sottolineato che puoi utilizzare più heading H1 nella pagina. E ha anche detto che puoi omettere questa intestazione.
Il tuo sito si posizionerà perfettamente senza tag H1 o con cinque. Affermazione interessante che però io vorrei leggere da una prospettiva particolare.
Google probabilmente non ha bisogno dell’H1 per capire il topic, ma questo non vuol dire che puoi ignorare questo passaggio. John Mueller ha confermato, ad esempio, che i titoli H1 sono utili per delineare la struttura della pagina.
Per approfondire: la lunghezza ideale del tag title
Come si scrivono i tag H1, H2 e H3 sul web
Ok, se il tag H1 ha il ruolo di aprire il post e informare subito il lettore rispetto ai temi affrontati nel contenuto ora bisogna capire come usare tag H2 e H3, vale a dire gli heading che seguono l’headline principale. La regola è quella della gerarchia HTML.
- Un solo H1 apre l’articolo.
- C’è il testo che introduce.
- Arriva il primo H2.
- Al sui interno si aprono alcuni H3.
- C’è il secondo H2.
Puoi proseguire così all’infinito, come accade nei tutorial o con i case study. Vale a dire articoli complessi, ricchi di argomentazioni. Quanti H2 inserire in un post?
Dipende, quanti servono per organizzare il testo. Non è detto che debba essere per forza gestito dai titoli secondari, non c’è una regola che impone l’uso degli H2 e H3.
Il ruolo dei titoli interni è legato all’usabilità, ma comunicano a Google i temi affrontati nel documento. Come non inserire gli heading secondo Google. Evita di:
- Inserire nei tag heading testo non utile.
- Utilizzare tag heading dove invece andrebbero altri tag.
- Passare in modo errato da una dimensione di intestazione all’altra.
- Inserire troppi tag heading sulla stessa pagina.
- Scrivere intestazioni molto lunghe.
- Utilizzare tag heading solo per dare uno stile al testo.
Attenzione, allarme keyword stuffing: i titoli non devono essere un elenco di keyword. Lo stesso Google suggerisce, nella su Guida SEO ufficiale, di non usare i titoli HTML per elencare parole chiave senza senso. Ragiona su come mettere H2 e H3 nelle pagine.
Scrivi heading per aiutare il pubblico
Un titolo deve descrivere, senza giri di parole, il testo che introduce. Non farti prendere dalla smania di inserire keyword a go-go, non è così che si ottimizza un articolo in ottica SEO. H2 e H3 servono a guidare l’occhio del lettore in un testo ben organizzato.
Quanto deve essere lungo il tag H1?
La lunghezza ideale del tag H1 su una pagina web dovrebbe essere tra 10 e 70 caratteri, circa 60. Anche se non c’è uno standard definito. Questa headline dà al lettore le informazioni necessarie per comprendere il topic principale del contenuto.
Il buon senso suggerisce che i lettori tendono a leggere le primi e gli ultimi tre termini di un titolo. Quindi una headline dovrebbe essere composta da 6 parole.
Secondo Semrush, gli articoli con titoli molto lunghi (quelli con più di 14 parole) ottengono il doppio del traffico, il doppio delle condivisioni e il 5 volte più backlink.
Questo, ovviamente, rispetto agli articoli con titoli brevi (7-10 parole). Anche la ricerca di Backlinko conferma questi dati: i titoli di 14-17 parole generano il 76,7% di condivisioni sui social in più rispetto ai titoli del blog non troppo lunghi. La conclusione ovvia.
Un titolo H1 più lungo rispetto a quelli più brevi fornisce maggiori informazioni sul valore di un articolo e quindi spinge più persone a leggerlo e condividerlo.
Elimina tag heading inutili al lettore
Considera il valore di un articolo con titoli capaci di suggerire gli argomenti di un lavoro. Allo stesso modo, l’inserimento di head inutili in un testo può avere l’effetto opposto. Come suggerisce Google, evita di fare uso eccessivo di heading e titoletti sulla pagina.
Quanti H2 ci possono essere in una pagina? E di H3? A parte la regola sulla necessità di inserire un H1 per forza, rispetto agli altri heading non esiste un numero fisso, non c’è una dichiarazione che ti permette di capire qual è il numero ideale di tag H2 o H3.
Dipende dalla struttura dell’articolo che hai in mente. In ogni caso, di solito, gli articoli lunghi hanno un buon numero di H2 e anche di H3. Raramente arrivano ad H4, H5 o H6.
Scegli il font H1, H2 e H3 con cura
Quando scegli il tema WordPress cerca di mantenere la coerenza del font per gli heading: decrescente dall’H1 e all’H6 usando, se possibile, lo stesso carattere.
Ricorda che è sbagliato usare gli heading per motivi grafici, ovvero per mettere in evidenza parole o frasi al posto della formattazione. Come <em> o <strong>.
Definisci la formattazione dei titoli
È giusto piegare la formattazione degli heading ai caratteri estetici di un blog/sito, ma non dimenticare di differenziare i titoli. L’H1 è l’head più importante della pagina.
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”. Poi ci sono dei dettagli tipografici da curare per la leggibilità.
Questa grafica di cfpb.github.io sottolinea un punto chiaro: attenzione ai titoli sospesi nella pagina web. Devi valutare con cura l’interlinea tra heading e testo. In che modo?
Usa come riferimento questa regola: lo spazio tra il titolo e il testo successivo deve essere inferiore a quello che si trova con il paragrafo precedente. In questo modo si fa capire al lettore che quel titolo è collegato a un determinato blocco di testo.
Ottimizzazione SEO dei titoli H1, H2 e H3
Fin qui ho definito la base del lavoro da svolgere per ottimizzare e inserire H1, H2 e H3 fino all’H6. Ma poi? Quali sono le regole indispensabili per migliorare questi punti?
Scegli con cura i tag heading
Come scegliere H2, h3 e altri heading per ottimizzare una pagina web? Devi individuare il topic che dovrà essere inteso come keyword da inserire nel tag title e nell’H1, ma dovrà essere affrontato come argomento da esplorare per individuare i temi correlati.
Se voglio affrontare un tema in modo da affrontare le esigenze concrete del pubblico devo scoprire cosa vuole da Google. E lo posso fare con i SEO tool per copywriter.
Parlo di Ubersuggest, Answer The Public, Keyword Planner e strumenti a pagamento come SEOzoom, SEMrush e Majestic. Metti al centro delle ricerche la focus keyword e inizia a generare correlazioni, poi scegli quelle che potrebbero essere affrontate.
Crea due titoli per H1 e tag title
Il titolo SEO dovrebbe rientrare nelle 65 battute per evitare un troncamento nella serp. Puoi andare oltre, Google indicizza anche le altre keyword ma non le mostra nello snippet. Con l’H1 questo problema non sussiste quindi puoi anche superare questo limite.
Cura la relazione gerarchica
La regola vuole che non si dovrebbero mescolare gli head perché seguono un ordine decrescente e coerente con le 6 possibilità offerte. Ciò significa che non è consigliabile saltare un head intermedio e, ad esempio, passare dall’H1 all’H3.
Inutile sottolineare che in una pagina web l’H1 deve essere il primo head. Questo, ovviamente, per mantenere una buona linearità interna. Poi vengono gli altri titoli organizzati in modo da guidare l’occhio del lettore nel mare di paragrafi e parole.
Usa H2, H3 e H4 come indice interno
Un dettaglio che può fare la differenza: ricorda che gli heading possono diventare ancore per creare salti di pagina. Proprio come ho fatto io in questo articolo. Questo è possibile grazie alle ancore. Per crearle in automatico uso il plugin: Table Of Content Plus.
Questa soluzione permette di migliorare lo snippet e di affiancare alla meta description dei link che portano alle sezioni specifiche nel momento in cui la query corrisponde al titolo inserito nell’indice. Un bel vantaggio, non credi?
SEO tool per ottimizzare H1, H2 e H3
Sei terrorizzato dall’idea di dover spulciare ogni angolo del tuo codice HTML per verificare gli heading? Niente paura, ci sono diversi strumenti che ti possono aiutare: io preferisco Wave – Web Accessibility Evaluation Tool e Screaming Frog.
Quest’ultimo tool consente di individuare le pagine senza H1 o con altri problemi in termini di heading e tag title. Wave, invece, fornisce una mappa degli heading all’interno della pagina che ti consente di individuare la coerenza di quest’ordine.
Ottimizza H1, H2, H3, H4, H5 e H6
Molti considerano H1, H2 e H3 come elementi utili alla SEO. Sono sotto l’occhio di Google, ma non devi pensare solo a questo. Questi microcontenuti che sto prendendo in considerazione sono degli elementi indispensabili per guidare il pubblico.
In dispensabili per cosa? Per guidare le persone quando arrivano sulla pagina web. Come vedi dall’immagine sopra, presa dalle raffigurazioni di Steve Krug, le persone arrivano sulla tua pagina e non seguono i tuoi schemi. Anzi, spesso li ignorano.
Tutto quello che hai fatto non ha importanza: le persone si guardano intorno e cercano qualcosa di interessante o che in qualche modo ricordi interessi e desideri.
Ecco come usare gli heading: per dare indicazioni. Usa H1, H2 e H3 fino all’H6 per permettete alle persone di scoprire cosa possono trovare nel tuo post. Prima che abbandonino la pagina, cosa che vorresti evitare per il tuo blog personale.
Manca il tag <h1> nella tua pagina
Questo viene identificato come un problema secondo le linee guida del buon documento HTML. per evitare questo problema devi prima scoprirlo. Ti consiglio di scannerizzare il sito con Screaming Frog: questo SEO tool ti consente di individuare pagine con H1 mancante. A questo punto non devi fare altro che aggiungere il titolo.
Relazione tra heading H2, H3, H4 e SEO
Anche in questo caso si è parlato molto di quanto i vari H2, H3, H4, H5 e H6 possano influenzare il posizionamento e l’ottimizzazione di una pagina web per la SEO.
Mueller toglie l’attenzione dalle vecchie pratiche che prevedono solo un uso sconsiderato delle keyword per puntare l’attenzione verso l’user experience, l’usabilità del sito web che viene rinvigorita dal buon uso degli heading come sottotitoli WordPress.
It’s not so much like there are five keywords in these headings, therefore this page will rank for these keywords but more, here’s some more information about that piece of text or about that image on that page. And that helps us to better understand how to kind of frame that piece of text, how to frame the images that you have within those blocks.
Hai inserito 5 parole chiave nelle intestazioni? Non è detto che la pagina si posizionerà per quelle keyword, ma l’uso dei vari H2 e H3 aiuta Google (e le persone) a capire come inquadrare quel testo e le immagini che hai inserito all’interno di quei paragrafi:
- Non usare gli H2 e H3 per formattare il testo.
- Se hai bisogno di un sottotitolo usa una funzione adeguata.
- Non aggiungere heading a caso, senza senso.
- Non saltare livelli di heading (ad esempio da H2 a H4).
Il meccanismo è simile a quello di un libro. il Tag H1 è il titolo, gli H2 sono i paragrafi, gli H3 i sottoparagrafi e via così fino all’H6. Tutto molto semplice, non trovi?
Come inserire heading tag su WordPress
Vuoi aggiungere H1, H2 e H3 in un articolo o una pagina WordPress? Il tag H1 si inserisce scrivendo un testo nel campo dedicato al titolo. Ovviamente seguendo le regole delle headline efficaci. Mentre, come si aggiungono gli heading che vanno dall’H2 all’H6?
Per dare al testo le caratteristiche degli heading tag devi selezionare il testo e andare nella sezione dedicata ai paragrafi. Poi dipende dalla versione di WordPress che stai usando. Con l’editor classico apri un menu a tendina dove puoi scegliere il titoli e sottotitoli dall’H1 all’H6 passando per headline H2, H3, H4 e H5.
Se utilizzi Gutenberg devi scegliere il blocco Titolo ma non cambia molto, la logica è la stessa. Ora la domanda: come inserire il tag H1 in una pagina web? Molto semplice. I principali CMS hanno soluzioni specifiche, prendo come esempio WordPress.
In questo caso il campo dedicato al titolo dell’editor corrisponde al tag H1: scrivere il titolo vuol dire creare l’H1 nella pagina. In modo del tutto automatico. C’è un altro modo per aggiungere questo elemento nel testo: nei tasti dedicati alla formattazione c’è il menu a tendina per aggiungere gli heading. Dall’H1 all’H6.
Heading H1 e tag title: regole ed esempi
Il tag title è altra cosa, rappresenta ancora oggi l’elemento più importante per posizionare un sito web dal punto di vista dell’ottimizzazione per i motori di ricerca.
La sua centralità, nel tempo, ha perso peso (ti puoi posizionare anche se la keyword non è presente nel titolo SEO) ma insieme a meta description e permalink resta uno degli elementi principali della SEO on-page. Corrisponde all’H1 nel momento in cui scrivi l’headline ma puoi modificare il tag title grazie a WordPress SEO by Yoast.
Da leggere: come migliorare la navigabilità di un sito web
Come usare H1, H2 e H3 secondo te?
Dal mio punto di vista è la semplicità a farla da padrone. Non devi impostare grandi riflessioni intorno a come usare H1, H2 e H3: usali per organizzare gli argomenti.
Basta gestire la struttura dell’articolo con logica e buon senso. Cercando di capire con una buona keyword research cosa vogliono le persone e portando l’organizzazione del tema sull’editor grazie appunto alla combinazione di heading. Senza concentrarsi su quante parole chiave usare. Ma rispettando gerarchie e priorità. Sei d’accordo?
Fonti e link utili per approfondire
Uno, non è necessario aggiungerne altri ed è sconsigliato non averlo. Però non esiste una regola fissa, lo stesso Mueller ha detto che questo non è un passaggio cruciale.
Aiutano Google a capire la struttura della pagina ma non sono elementi fondamentali. Una pagina può posizionarsi bene anche senza heading secondo John Mueller.
Il tag title è importane per l’ottimizzazione SEO e si trova nella sezione <head> di una pagina web, mostrandosi solo nella serp. L’H1 domina la pagina web e ha una rilevanza minore per la search engine optimization. Ma non per questo puoi ignorarlo.
Categoria: Ottimizzazione siti
Ciao Riccardo, ottimo articolo come sempre. Chissà se puoi aiutarmi: guardando la SEO Analytics di Rank Math sul mio blog, risulta questo errore “No H1 tag was found. For the best SEO results there should be exactly one H1 tag on each page.”
Eppure ho controllato… e gli H1 sono ovunque nei miei articoli. Secondo te, da cosa potrebbe derivare questo problema?
Perdonami se non è molto correlato con il tuo articolo 😛 Ma mi da fastidio vedere questo errore!
Ciao, è capitato anche a me con altri tool. Ad esempio il plugin SEO di Seozoom non rileva gli H1 di un blog che curo per un cliente ma ci sono. Insomma, a volte i tool sbagliano. l’importante è che tu hai verificato la presenza.
Ho una semplice domanda a cui non riesco a dare risposta, ci sono molte opinioni contrastanti sull’argomento. Per formularla velocemente uso un esempio:
Può il tag H3 avere una dimensione di testo maggiore del tag H2?
C’è chi dice che gli spider di google non considerano la dimensione del carattare ma danno valore solamente al contenuto degli heading.
Cosa potete dirmi su questo.
Per un fatto di usabilità ed estetica grafica sul sito mi trova davanti a questo dilemma.