<meta>-tunnisteet <head> osiossa tarjoavat metatiietoja sivusta — merkistökoodaus, viewport-käyttäytyminen, SEO-kuvaukset ja sosiaalisen jakamisen esikatselut. Niitä ei renderöidä, mutta selaimen, hakukoneet ja sosiaaliset alustat lukevat niitä.
charset varmistaa, että teksti (erityisesti non-ASCII) dekoodataan oikein. Aseta se ensin.viewport tekee sivustosta responsive mobiililaitteissa — ilman sitä puhelimet renderöidään väärällä leveydellä 980px ja loitontavat, rikkoen responsive CSS:ääsi.<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> ja description ovat mitä näkyy Google-tuloksissa, joten ne ohjaavat napsautuksia. canonical kertoo hakukoneiden auktoritatiivisen URL-osoitteen.
<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" />
Nämä ohjaavat korttia, joka ilmestyy, kun linkkiäsi jaetaan Facebookissa, LinkedInissä, Slackissa, X:ssä jne. — ilman niitä saat rumaa tai tyhjää esikatselu.
charset ja viewport ovat välttämättömiä oikealle renderöinnille ja mobiilivastaukselle; title/description/canonical ohjaavat hakukoneoptimoinnin; Open Graph-tunnisteet ohjaavat kuinka linkkisi näyttävät jaettaessa.
Yhdessä ne muodostavat metatieto-kerroksen, joka saa sivun renderöitymään oikein, sijoittumaan hyvin ja jakaantumaan hyvin.