Tag HTML <meta>

Il tag <meta> trasporta metadati — informazioni riguardanti la pagina, non contenuti visualizzati su di essa. Browser, motori di ricerca e social network leggono questi metadati per decidere come renderizzare la pagina, come indicizzarla e come visualizzarla quando viene condivisa. Nessun contenuto presente in un elemento <meta> appare sulla pagina stessa.

Un documento può contenere diversi tag <meta>, e quasi ogni pagina moderna ne necessita almeno un paio (codifica dei caratteri e viewport). Tutti i tag <meta> risiedono all'interno dell'elemento <head>, insieme ai tag <title> e <link>.

Questa pagina tratta i meta tag che utilizzerai effettivamente ogni giorno: codifica, il viewport, la description per la SEO, la simulazione di header con http-equiv e i tag Open Graph / Twitter che controllano l'aspetto dei link quando vengono condivisi.

Sintassi

Il tag <meta> è un elemento void — non ha contenuto né tag di chiusura. In XHTML deve essere auto-chiuso (<meta />).

Un tag <meta> usa uno di questi due pattern:

Una coppia name/content (o property/content per Open Graph) — name indica il tipo di metadato, content è il suo valore.
Un attributo charset autonomo, oppure una coppia http-equiv/content che simula un header di risposta HTTP.

È necessario fornire l'attributo content ogni volta che name o http-equiv è presente. L'attributo content non viene usato insieme a charset.

Codifica dei caratteri: `<meta charset>`

Questo tag indica al browser quale codifica dei caratteri usare per decodificare il documento. Dovrebbe essere la prima cosa all'interno del <head>, e dovrebbe essere sempre UTF-8:

<meta charset="UTF-8">

Perché UTF-8? Può rappresentare ogni carattere in ogni lingua — accenti, emoji, simboli di valuta, scritture CJK — usando una singola codifica universale. Senza una codifica dichiarata (o correttamente rilevata), caratteri come é, —, o " possono trasformarsi in incomprensibile "mojibake". UTF-8 è la codifica del web moderno; lo standard HTML la richiede per i nuovi documenti.

Inseriscila presto, in modo che il browser conosca la codifica prima di analizzare qualsiasi testo.

Il meta tag viewport

Il tag viewport è ciò che rende una pagina responsive su telefoni e tablet. Senza di esso, i browser mobile assumono che la pagina sia stata costruita per il desktop e la renderizzano a circa 980px di larghezza, poi riducono il risultato — lasciando testo minuscolo e rimpicciolito. Aggiungi questo e la pagina si adatta al dispositivo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cosa fa ciascuna parte:

width=device-width — imposta il viewport di layout alla larghezza del dispositivo (ad es. 390px su un telefono) invece di una falsa larghezza desktop di 980px.
initial-scale=1.0 — parte con un livello di zoom 1:1, in modo che un pixel CSS corrisponda a un pixel indipendente dal dispositivo al caricamento.

Questa singola riga è necessaria per qualsiasi sito che intende avere un buon aspetto su mobile. Evita di aggiungere user-scalable=no o un maximum-scale inferiore a 5 — blocca lo zoom con le dita e penalizza l'accessibilità per gli utenti ipovedenti.

SEO: il meta tag `description`

La description è il riepilogo che i motori di ricerca mostrano spesso sotto il titolo della pagina nei risultati, e a cui le piattaforme social ricorrono come alternativa. Punta a una frase concisa e convincente di circa 150–160 caratteri — il testo più lungo viene troncato con i puntini di sospensione.

<meta name="description" content="Learn how the HTML meta tag controls encoding, the viewport, SEO, and social sharing — with copy-paste examples.">

La description non influenza direttamente il posizionamento, ma un riepilogo chiaro e pertinente migliora i tassi di clic dalla pagina dei risultati.

Altri valori `name`/`content`

L'attributo name indica il tipo di metadato; content ne contiene il valore. Valori comuni:

<!-- Author of the page -->
<meta name="author" content="Jane Doe">

<!-- Software that generated the page -->
<meta name="generator" content="Next.js">

<!-- Control how search engines crawl and index this page -->
<meta name="robots" content="index, follow">
<!-- ...or keep a page out of search results -->
<meta name="robots" content="noindex, nofollow">

<!-- Tint the mobile browser UI to match your brand -->
<meta name="theme-color" content="#10b981">

<!-- Limit the referrer information sent to other sites -->
<meta name="referrer" content="strict-origin-when-cross-origin">

Nota: Il meta tag keywords (<meta name="keywords" content="…">) viene ignorato da tutti i principali motori di ricerca oggi e può essere tranquillamente omesso. Il vecchio attributo scheme è stato rimosso in HTML5 e non dovrebbe essere utilizzato.

Simulare header HTTP: `http-equiv`

L'attributo http-equiv consente a un tag <meta> di sostituire un header di risposta HTTP. I valori più comuni:

<!-- Declare the content type and encoding (legacy alternative to charset) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Auto-refresh the page every 60 seconds -->
<meta http-equiv="refresh" content="60">

<!-- ...or redirect to another URL after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://www.w3docs.com">

Avvertenza sull'accessibilità: Evita http-equiv="refresh". Una pagina che si aggiorna o reindirizza automaticamente può disorientare gli utenti, interrompere i lettori di schermo e bloccare le persone che hanno bisogno di più tempo per leggere — non soddisfa i criteri di successo WCAG. Preferisci un vero reindirizzamento HTTP lato server, oppure un link visibile su cui l'utente clicca.

Quando qualcuno condivide il tuo link su Facebook, LinkedIn, Slack o X, quelle piattaforme leggono i tag Open Graph per costruire la card di anteprima (titolo, riepilogo, immagine). I tag Open Graph usano l'attributo property invece di name:

<meta property="og:title" content="HTML meta Tag — Full Guide">
<meta property="og:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">
<meta property="og:url" content="https://www.w3docs.com/learn-html/html-meta-tag.html">
<meta property="og:type" content="website">

X (Twitter) aggiunge i propri tag sopra, usando name:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML meta Tag — Full Guide">
<meta name="twitter:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta name="twitter:image" content="https://www.w3docs.com/images/meta-preview.png">

Fornisci un URL assoluto per og:image (circa 1200×630px) in modo che le anteprime mostrino un'immagine grande e nitida, anziché una miniatura o nulla.

Un esempio completo di `<head>`

Ecco come questi tag si combinano in un documento reale:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML meta Tag — Full Guide</title>
    <meta name="description" content="Encoding, viewport, SEO, and social meta tags explained with copy-paste examples.">
    <meta name="author" content="Jane Doe">
    <meta name="theme-color" content="#10b981">

    <!-- Open Graph -->
    <meta property="og:title" content="HTML meta Tag — Full Guide">
    <meta property="og:description" content="Everything the meta tag controls, with examples.">
    <meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Page content goes here</h1>
  </body>
</html>

Attributi

Attributo	Valore	Descrizione
`charset`	character_set	Definisce la codifica dei caratteri del documento (usa `UTF-8`).
`content`	text	Definisce il valore degli attributi `name`, `property` o `http-equiv`.
`http-equiv`	content-type, default-style, refresh	Simula un header di risposta HTTP e ne determina l'elaborazione.
`name`	application-name, author, description, generator, keywords, robots, theme-color, referrer, viewport	Denomina i metadati contenuti in `content`.
`property`	og:title, og:description, og:image, …	Denomina una proprietà Open Graph (usata dalle piattaforme social).

Il tag <meta> supporta anche gli Attributi Globali e gli Attributi Evento.

Tag correlati

<head> — il contenitore per tutti i metadati.
<title> — il titolo della pagina mostrato nelle schede e nei risultati di ricerca.
<link> — collega risorse esterne come fogli di stile e favicon.
<base> — imposta un URL di base per tutti i link relativi nella pagina.
<style> — incorpora CSS direttamente nell'head.

Esercitazione

Pratica

Qual è lo scopo di un meta tag in HTML?

Fornisce metadati sul documento HTML, come set di caratteri, descrizione e impostazioni del viewport.Visualizza il contenuto della pagina web all'utente.È il contenitore principale per gli elementi visibili della pagina.Viene utilizzato per visualizzare immagini sulla pagina web.

Sintassi

Codifica dei caratteri: <meta charset>

Il meta tag viewport

SEO: il meta tag description

Altri valori name/content

Simulare header HTTP: http-equiv

Condivisione social: Open Graph e Twitter card

Un esempio completo di <head>