<meta> tag in <head> forniscono metadati sulla pagina — codifica dei caratteri, comportamento del viewport, descrizioni SEO e anteprime per la condivisione sociale. Non vengono renderizzati ma vengono letti da browser, motori di ricerca e piattaforme social.
charset garantisce che il testo (soprattutto non-ASCII) venga decodificato correttamente. Mettilo per primo.viewport è quello che rende un sito responsive su mobile — senza di esso, i telefoni eseguono il rendering a una larghezza falsa di 980px e zoomano, rompendo il tuo CSS responsive.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
Il <title> e la description sono quello che appare nei risultati di Google, quindi guidano il click-through. canonical dice ai motori di ricerca l'URL autorevole.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Questi controllano la card che appare quando il tuo link viene condiviso su Facebook, LinkedIn, Slack, X, ecc. — senza di essi ottieni un'anteprima brutta o vuota.
charset e viewport sono non negoziabili per il rendering corretto e la responsività mobile; title/description/canonical guidano la SEO; i tag Open Graph controllano come i tuoi link appaiono quando condivisi.
Insieme formano il livello di metadati che fa sì che una pagina si renderizzi correttamente, si posizioni bene e si condivida facilmente.