Introduzione
Il tag <head> è una delle aree più importanti di una pagina HTML, anche se non viene mostrato direttamente nel contenuto visibile. Qui si definiscono informazioni fondamentali per il browser, i motori di ricerca e i servizi esterni: il titolo della pagina, i metadati, i riferimenti ai fogli di stile, le icone, gli script e molto altro.
Capire come usare in modo corretto title, meta, link e script significa costruire pagine più professionali, veloci da caricare, più facili da indicizzare e più semplici da mantenere. In questo tutorial vedremo un approccio pratico e moderno, con un esempio reale di pagina prodotto per un sito e-commerce.
Il sotto-argomento che approfondiamo qui è utile in particolare per chi vuole strutturare il <head> in modo ordinato e strategico, evitando elementi messi “a caso” e riducendo errori comuni come titoli duplicati, meta tag inutili o script caricati nel momento sbagliato.
Codice completo
<head>
<!-- Titolo della pagina: compare nella scheda del browser e nei risultati di ricerca -->
<title>Scarpe da Running UltraLight | SportLab</title>
<!-- Codifica dei caratteri: deve essere tra i primi elementi del head -->
<meta charset="UTF-8">
<!-- Responsive design: fondamentale per dispositivi mobili -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Descrizione sintetica della pagina -->
<meta name="description" content="Scopri le Scarpe da Running UltraLight: leggere, traspiranti e pensate per allenamenti quotidiani e lunghe distanze.">
<!-- Indicazioni ai motori di ricerca -->
<meta name="robots" content="index, follow">
<!-- Canonical per evitare contenuti duplicati -->
<link rel="canonical" href="https://www.sportlab.it/prodotti/scarpe-running-ultralight">
<!-- Icona del sito -->
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
<!-- Foglio di stile principale -->
<link rel="stylesheet" href="/css/main.css">
<!-- Preconnect verso un dominio esterno usato per font o API -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Caricamento del font esterno -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
<!-- Script principale, caricato senza bloccare il parsing HTML -->
<script src="/js/product-page.js" defer></script>
<!-- Script analitico, caricato in modo non invasivo -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" async></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(´js´, new Date());
gtag(´config´, ´G-XXXXXXX´);
</script>
</head>Spiegazione
Vediamo ora, elemento per elemento, cosa fa il codice e perché è stato organizzato così.
<title>
Il tag title definisce il titolo della pagina. È uno degli elementi più importanti del documento HTML perché appare:
- nella scheda del browser;
- nei preferiti e nei segnalibri;
- nei risultati dei motori di ricerca, spesso come titolo cliccabile.
Nel nostro esempio, il titolo è chiaro e descrittivo: Scarpe da Running UltraLight | SportLab. Include il nome del prodotto e il brand, una combinazione utile sia per l’utente sia per la SEO.
<meta charset="UTF-8">
Questo meta tag indica la codifica dei caratteri. UTF-8 è lo standard più usato sul web perché supporta praticamente tutti i caratteri e simboli. Inserirlo all’inizio del <head> aiuta il browser a interpretare correttamente il contenuto della pagina fin da subito.
<meta name="viewport">
Il meta viewport è essenziale per il design responsive. Senza questo tag, su smartphone e tablet la pagina può apparire ingrandita o non adattarsi bene alla larghezza dello schermo.
La configurazione width=device-width, initial-scale=1.0 dice al browser di usare la larghezza reale del dispositivo come riferimento e di non applicare zoom iniziale.
<meta name="description">
La description è una breve sintesi del contenuto della pagina. Non garantisce sempre la visualizzazione nei risultati di ricerca, ma resta un elemento importante per comunicare in modo efficace il tema della pagina.
Una buona description deve essere:
- chiara;
- specifica;
- orientata al contenuto reale della pagina;
- scritta in linguaggio naturale, senza accumulare parole chiave in modo artificiale.
<meta name="robots">
Questo meta tag indica ai motori di ricerca come trattare la pagina. Nel nostro esempio, index, follow significa: indicizza la pagina e segui i link presenti al suo interno.
È utile soprattutto in siti grandi, dove alcune pagine vanno indicizzate e altre no. Per esempio, una pagina di checkout potrebbe usare un valore diverso, come noindex, nofollow.
<link rel="canonical">
Il canonical serve a indicare la versione principale di una pagina quando esistono URL simili o duplicati. È molto utile negli e-commerce, dove un prodotto può essere raggiunto tramite filtri, parametri o categorie diverse.
In questo modo si evita che i motori di ricerca considerino più versioni della stessa risorsa come contenuti separati.
<link rel="icon">
Il favicon è la piccola icona che rappresenta il sito nel browser. Anche se sembra un dettaglio, contribuisce all’identità visiva del progetto e alla riconoscibilità del brand.
<link rel="stylesheet">
Serve a collegare un file CSS esterno. Separare stile e struttura è una buona pratica fondamentale: il markup HTML resta pulito, mentre il design è gestito nei fogli di stile.
<link rel="preconnect">
Questo tag anticipa la connessione verso un dominio esterno che verrà usato a breve, ad esempio per i font. È una tecnica utile per migliorare le prestazioni, perché riduce alcuni tempi iniziali di attesa.
Nel nostro esempio, preconnect viene usato per fonts.googleapis.com e fonts.gstatic.com, cioè i domini necessari al caricamento del font esterno.
<script> con defer e async
Gli script possono influenzare molto il caricamento della pagina. Per questo è importante scegliere il momento giusto in cui eseguirli.
- defer: scarica lo script senza bloccare il parsing HTML ed esegue il file dopo che il documento è stato analizzato.
- async: scarica lo script in parallelo e lo esegue appena disponibile, senza attendere l’ordine degli altri script.
Nel caso del file product-page.js, defer è una scelta molto pratica perché il codice può lavorare sul DOM quando è già pronto. Per lo script analitico esterno, async è spesso appropriato perché non deve bloccare l’interazione dell’utente.
Best practice
Un <head> efficace non è solo completo: è anche ordinato. Ecco alcune regole pratiche da seguire.
- Metti prima i meta essenziali: charset e viewport dovrebbero comparire all’inizio.
- Scrivi title e description in modo unico: ogni pagina importante dovrebbe avere un titolo diverso e coerente con il contenuto.
- Non abusare dei meta tag: inserisci solo quelli davvero utili al progetto.
- Usa canonical quando serve: soprattutto in presenza di URL duplicati o quasi duplicati.
- Carica gli script con attenzione: evita di bloccare il rendering se lo script non è necessario subito.
- Preferisci file esterni per CSS e JS quando il progetto cresce: il codice sarà più facile da mantenere.
- Controlla la coerenza semantica: il contenuto del title, della description e della pagina devono raccontare la stessa cosa.
Un errore molto comune è trattare il <head> come un contenitore casuale. In realtà è una parte strategica del documento: qui si definiscono scelte che impattano su performance, usabilità e visibilità del sito.
Riepilogo
Il tag <head> è il punto in cui si impostano le informazioni fondamentali della pagina HTML. Con title comunichi il tema della pagina, con meta fornisci dati utili a browser e motori di ricerca, con link colleghi risorse esterne e con script aggiungi comportamento dinamico.
Usare questi elementi in modo strategico significa ottenere pagine più ordinate, più veloci e più professionali. In particolare:
- title per identificare chiaramente la pagina;
- meta per descrivere, configurare e ottimizzare;
- link per collegare stili, icone e risorse esterne;
- script per aggiungere funzionalità senza rallentare inutilmente il caricamento.
Se impari a progettare bene il <head>, migliori non solo il codice, ma anche l’esperienza dell’utente e la qualità tecnica del tuo sito.
Approfondisci con risorse ufficiali
- MDN Web Docs - <head>: documentazione completa sugli elementi del tag head.
- MDN Web Docs - <title>: dettagli su utilizzo e comportamento del titolo della pagina.
- MDN Web Docs - meta: riferimento per i principali meta tag HTML.
- MDN Web Docs - link: guida ai collegamenti con risorse esterne e relazioni.
- MDN Web Docs - script: spiegazione delle modalità di caricamento e degli attributi principali.
- WHATWG HTML Living Standard: specifica ufficiale del linguaggio HTML.