<meta> tagi w <head> zawierają metadane dotyczące strony — kodowanie znaków, zachowanie viewport, opisy SEO i podglądy udostępniania społecznego. Nie są renderowane, ale są czytane przez przeglądarki, wyszukiwarki i platformy społeczne.
charset zapewnia prawidłowe dekodowanie tekstu (zwłaszcza spoza ASCII). Umieść go najpierw.viewport to co czyni stronę responsywną na urządzeniach mobilnych — bez niego telefony renderują z fałszywą szerokością 980px i zmniejszają, niszcząc Twój responsywny 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> i description to to, co pojawia się w wynikach Google, więc napędzają kliknięcia. canonical mówi wyszukiwarkom autorytatywny 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" />
Te kontrolują kartę, która pojawia się, gdy Twój link jest udostępniany na Facebook, LinkedIn, Slack, X itp. — bez nich otrzymasz brzydki lub pusty podgląd.
charset i viewport są obowiązkowe dla prawidłowego renderowania i responsywności mobilnej; title/description/canonical napędzają SEO; tagi Open Graph kontrolują wygląd Twoich linków podczas udostępniania.
Razem stanowią warstwę metadanych, która sprawia, że strona renderuje się prawidłowo, zajmuje wysokie pozycje i dobrze się udostępnia.