<meta>-taggar i <head> tillhandahåller metadata om sidan — teckenkodning, viewport-beteende, SEO-beskrivningar och förhandsgranskningar för delning i sociala medier. De återges inte men läses av webbläsare, sökmotorer och sociala plattformar.
charset säkerställer att text (särskilt icke-ASCII) avkodas korrekt. Placera det först.viewport är det som gör en webbplats responsiv på mobil — utan den återger telefoner med en falsk bredd på 980px och zoomar ut, vilket förstör din responsiva CSS.<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 -->
<title> och description är det som visas i Google-resultat, så de driver genomklickning. canonical talar om för sökmotorer vilken URL som är auktoritativ.
<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" />
Dessa styr kortet som visas när din länk delas på Facebook, LinkedIn, Slack, X, osv. — utan dem får du en ful eller tom förhandsvisning.
charset och viewport är omöjliga att förhandla om för korrekt rendering och mobilresponsivitet; title/description/canonical driver SEO; Open Graph-taggar styr hur dina länkar ser ut när de delas.
Tillsammans utgör de metadatalagret som gör att en sida renderas korrekt, rankas väl och delas bra.