Sappiamo bene che l’ottimizzazione SEO dell’HTML può portare benefici concreti al tuo progetto web. Questo vale anche quando stai considerando le basi per impostare una pagina internet realmente efficace, funzionante e visibile su tutti i dispositivi come gli smartphone. Ma anche capace di farsi leggere al meglio dai motori di ricerca. Questo vale anche per la sezione o il tag head dell’HTML. Di cosa stiamo parlando esattamente?
Quando si affronta questo argomento – che spesso viene messo da parte a favore di temi come GEO o SEO per AI – mi viene in mente un passaggio de Il Piccolo Principe: “L’essenziale è invisibile agli occhi”.
In questa frase si concentrano tanti aspetti del lavoro di un sito web – anche perché c’è una netta differenza tra frontend e backend – ma rappresenta soprattutto il motivo per cui oggi ci dedichiamo all’area inclusa nell’head definito dal tag HTML. Ovvero, il contenuto di questa sezione non lo vedrai mai in una pagina web ma se manca o è utilizzato male i risultati si percepiscono. E pagherai anche il conto se il sito web è il tuo.
Il tag head è la sezione del documento HTML che contiene le informazioni strutturali e descrittive della pagina che non vengono mostrate direttamente all’utente.
Queste, in realtà, servono a browser, motori di ricerca e applicazioni basate sull’intelligenza artificiale per capire come interpretare, caricare e posizionare il contenuto.
Dal punto di vista SEO, il tag head (che vedremo con un’apertura e una chiusura nel codice, tipo <head>...</head>) è cruciale perché fornisce segnali chiari su topic principale, intento di ricerca, lingua, autorevolezza tecnica e qualità dell’esperienza utente.
Una sezione head scritta male o incompleta rende la pagina più difficile da interpretare, navigare e utilizzare. Mentre un tag pulito, coerente e semanticamente corretto facilita l’estrazione delle informazioni.
Da leggere: come inserire tag alt nelle immagini WordPress
Per capire meglio di cosa stiamo parlando, possiamo mostrare un esempio semplificato e poco impegnativo di tag head all’interno di una struttura HTML. Ricordiamo sempre che questo tag – basato su un elemento che apre e uno che chiude – sarà sempre compreso tra <html> che apre tutte le pagine web e <body>.
<html lang="it-IT">
<head>
<meta charset="UTF-8">
<title>Tag head HTML: cos'è e a cosa serve</title>
<meta name="description" content="Cos'è il tag head in HTML, a cosa serve e quali elementi contiene per SEO e indicizzazione.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
Contenuto della pagina.
</body>
</html>
Come puoi notare da questo esempio, il tag head nell’HTML è una sorta di contenitore di metadati riguardanti il documento. Un contenitore può essere arricchito in modo da gestire le informazioni che vuoi comunicare ad applicazioni, software e client (tipo il browser di navigazione) rispetto al topic della pagina internet.
Molto semplice. Vai su una pagina web e clicca sul tasto destro del mouse, poi vai su visualizza sorgente pagina. In questo modo trovi l’intera pagina in formato HTML. Basta fare un comando cerca e inserire nel campo il tag <head>. In questo modo individui l’inizio della sezione che vuoi analizzare.
Poi, se cerchi la chiusura della sezione fai una ricerca per </head>. Puoi fare lo stesso anche con ispeziona elemento con gli strumenti degli sviluppatori o con applicazioni del browser, tipo SEO Pro Extension.
Dentro il tag head troviamo elementi fondamentali come title, meta tag (meta description, charset, viewport, robots), link ai fogli di stile CSS, favicon, dati strutturati, script di tracciamento e istruzioni per l’indicizzazione.
In pratica, è il punto in cui dichiari identità, contesto e comportamento della pagina: di cosa parla, come deve essere visualizzata, come deve essere letta dai crawler e come deve reagire sui diversi dispositivi. Ecco i tag:
<title> – Titolo della pagina.<meta> – Informazioni come:charset (codifica caratteri);description (descrizione per SEO);viewport (responsive design);robots (istruzioni ai crawler).<link> – Collegamenti a:<style> – CSS inline direttamente nel head.<script> – JavaScript da eseguire prima o dopo il caricamento.<base> – URL base per link relativi nella pagina.<noscript> – Contenuto alternativo se JavaScript è disabilitato.Grazie a questi elementi puoi definire il comportamento e la compatibilità della pagina con dispositivi e browser diversi, includere script e dati strutturati per funzionalità avanzate o tracciamento e comunicare informazioni ai motori di ricerca tramite meta tag. Come ad esempio il noindex per escludere la pagina da Google.
Da leggere: cos’è la dichiarazione DocType in una pagina HTML?
La differenza tra tag head e tag body è fondamentale, e se confondi queste sezioni stai facendo un errore strutturale. Non certo di stile o che può essere ignorato. Il tag head incorpora tutte le informazioni che non vengono mostrate all’utente nella pagina ma sono decisive per browser e i motori di ricerca. Il body è l’esatto contrario: qui abbiamo tutto ciò che il lettore vede. Quindi testi, titoli, immagini, link e pulsanti.
Hosting WordPress preinstallato e gestito con SiteBuilder AI incluso
Qual è il principio da ricordare? Non dovrai mai sbagliarti e confonderti. Ma tutto sommato non è un problema: se utilizzi un CMS come WordPress, che trovi già installato e ottimizzato sull’hosting Serverplan, non hai bisogno di occuparti di questa differenza: le pagine web sono già strutturate e pronte all’uso.
