A <head> részben lévő <meta> tagek az oldal metaadatait biztosítják — karakterkódolás, viewport viselkedés, SEO leírások és közösségi megosztási előnézetek. Nincsenek renderelve, de a böngészők, keresőmotorok és közösségi platformok által olvashatók.
charset biztosítja, hogy a szöveg (különösen non-ASCII) helyesen dekódolódjon. Helyezze az első helyre.viewport az, ami az oldalt mobil responsive teszi — nélküle a telefonok hamis 980px szélességnél jelenítik meg és nagyítanak ki, megtörve az ön responsive CSS-jét.<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 -->
A <title> és description az, amit a Google eredményekben megjelenik, így meghajtják a kattintást. A canonical a keresőmotoroknak az autoritatív URL-t közli.
<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" />
Ezek vezérlik azt a kártyát, amely akkor jelenik meg, amikor a link a Facebook, LinkedIn, Slack, X stb. oldalakon meg van osztva. — nélkülük csúnya vagy üres előnézetet kap.
A charset és viewport nélkülözhetetlen a helyes rendereléshez és mobil válaszkészséghez; a title/description/canonical az SEO-t hajtja; az Open Graph tagek vezérlik, hogyan néznek ki linkjei megosztáskor.
Együttesen a metaadat réteg, amely helyesen jeleníti meg az oldalt, rangsorolja és jól megosztja.