<meta> tags in <head> verstrekken metagegevens over de pagina — tekencodering, viewport gedrag, SEO-beschrijvingen en voorbeelden voor sociaal delen. Ze worden niet weergegeven maar gelezen door browsers, zoekmachines en sociale platforms.
charset zorgt ervoor dat tekst (vooral niet-ASCII) correct wordt gedecodeerd. Zet het eerst.viewport is wat een site responsief maakt op mobiel — zonder het renderen telefoons op een nep 980px breedte en zoomen uit, waardoor je responsive CSS breekt.<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 -->
De <title> en description zijn wat verschijnen in Google-resultaten, dus ze genereren doorklikken. canonical vertelt zoekmachines de gezaghebbende URL.
<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" />
Deze bepalen de kaart die verschijnt wanneer uw link wordt gedeeld op Facebook, LinkedIn, Slack, X, enz. — zonder deze krijgt u een lelijk of leeg voorbeeld.
charset en viewport zijn onmisbaar voor correcte weergave en mobiele responsiviteit; title/description/canonical genereren SEO; Open Graph tags bepalen hoe uw links eruit zien wanneer ze worden gedeeld.
Samen vormen ze de metagegevenslaag die ervoor zorgt dat een pagina correct wordt weergegeven, goed rankt en goed wordt gedeeld.