Il tag HTML <title>
Il tag HTML <title> definisce il titolo di un documento HTML, visualizzato nella barra del browser e nei risultati di ricerca.
Il tag HTML <title> definisce il titolo di un documento. È un elemento dei metadati del documento: non appare in nessuna parte all'interno della pagina stessa, ma controlla come la pagina viene etichettata ovunque vi si faccia riferimento — nella scheda del browser, nei segnalibri, nei risultati di ricerca e nei link condivisi sui social media.
Questa pagina spiega perché ogni pagina ha bisogno esattamente di un <title>, dove deve trovarsi e come scriverne uno che funzioni bene sia per gli utenti che per i motori di ricerca.
Perché il <title> è importante
Il <title> è uno dei pochi elementi obbligatori in un documento HTML valido. Browser e motori di ricerca lo trattano come il nome canonico e leggibile della pagina, quindi appare in molti posti contemporaneamente:
- Scheda / finestra del browser — il testo sulla scheda è il titolo della pagina.
- Segnalibri — quando un utente aggiunge la pagina ai segnalibri, il titolo diventa il nome predefinito del segnalibro.
- Risultati di ricerca (SERP) — il titolo viene solitamente utilizzato come titolo blu e cliccabile del risultato, influenzando fortemente il tasso di clic.
- Condivisioni social — quando un link viene pubblicato in un'app di messaggistica o su un social network, il titolo viene incluso nell'anteprima del link (insieme ai meta tag come Open Graph).
- Accessibilità — gli screen reader annunciano il titolo quando una pagina viene caricata, aiutando gli utenti a confermare dove si trovano.
Poiché così tanti strumenti lo utilizzano, un titolo chiaro e accurato migliora sia la UX (le persone riconoscono la scheda o il risultato giusto) che la SEO (i motori di ricerca posizionano la pagina per le query pertinenti).
Il titolo dovrebbe contenere le parole chiave più importanti della pagina affinché i motori di ricerca la posizionino per le query pertinenti — ma scrivilo prima di tutto per gli esseri umani.
Dove si trova: esattamente uno, all'interno di <head>
Il <title> deve trovarsi all'interno della sezione <head>, che è il posto dedicato ai metadati del documento, e un documento deve contenere esattamente un <title>. Il <head> contiene informazioni sulla pagina (titolo, set di caratteri, viewport, dati meta) piuttosto che contenuto visibile, quindi il titolo si trova naturalmente lì insieme agli altri dati descrittivi della pagina.
Sintassi
L'elemento <title> viene in coppia. Il testo è scritto tra il tag di apertura <title> e il tag di chiusura </title>, e può contenere solo testo — nessun altro elemento HTML.
Esempio del tag HTML <title>:
Tag HTML <title>
<!DOCTYPE html>
<html>
<head>
<title>W3Docs - learn HTML, CSS, PHP, JavaScript online.</title>
</head>
<body>
<p>The main content of the page.</p>
</body>
</html>Scrivere un buon titolo: debole vs. ottimizzato
Un titolo vago o assente costringe i browser a ricorrere all'URL, e i motori di ricerca potrebbero riscriverlo o ignorarlo. Confronta le due pagine qui sotto.
Titolo debole — troppo corto e generico:
<head>
<title>Home</title>
</head>Titolo ottimizzato — descrittivo, con il pattern Nome Pagina | Nome Sito:
<head>
<title>HTML <title> Tag: Syntax, SEO and Examples | W3Docs</title>
</head>Il template Nome Pagina | Nome Sito è una convenzione comune e affidabile: la parte unica e ricca di parole chiave del titolo viene prima (dove è più visibile in un risultato di ricerca e su una scheda del browser stretta), e il nome del sito viene alla fine per il riconoscimento del brand. Una barra verticale (|) o un trattino (-) sono i separatori più comuni.
Linee guida pratiche
- Mantienilo intorno ai 55–60 caratteri. Questa è una linea guida, non un limite rigido — i motori di ricerca troncano i titoli lunghi, quindi metti le parole importanti all'inizio.
- Sii descrittivo. Evita titoli di una o due parole; usa una frase significativa che riassuma la pagina.
- Rendi ogni titolo unico su tutto il tuo sito, così ogni pagina è distinguibile nelle schede e nei risultati di ricerca.
- Evita il keyword stuffing. Un elenco di parole viene percepito come spam e non è utile a nessuno.
- Evita caratteri speciali insoliti, che browser diversi potrebbero visualizzare in modo inconsistente.
Attributi
Il tag <title> supporta gli Attributi globali. In pratica, solo lang è significativo — dichiara la lingua del testo del titolo, il che è utile quando il titolo differisce dalla lingua del documento. Attributi come id, class e style sono accettati dal parser ma non hanno alcun effetto, poiché il titolo non viene mai visualizzato all'interno della pagina dove potrebbe essere applicato lo stile o lo scripting.