<meta> tags in <head> provide metadata about the page — character encoding, viewport behavior, SEO descriptions, and social-sharing previews. They aren't rendered but are read by browsers, search engines, and social platforms.
The essential two
<meta> tags in <head> provide metadata about the page — character encoding, viewport behavior, SEO descriptions, and social-sharing previews. They aren't rendered but are read by browsers, search engines, and social platforms.
charset ensures text (especially non-ASCII) decodes correctly. Put it first.viewport is what makes a site responsive on mobile — without it, phones render at a fake 980px width and zoom out, breaking your responsive 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 -->
The <title> and description are what appear in Google results, so they drive click-through. canonical tells search engines the authoritative 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" />
These control the card that appears when your link is shared on Facebook, LinkedIn, Slack, X, etc. — without them you get an ugly or empty preview.
charset and viewport are non-negotiable for correct rendering and mobile responsiveness; title/description/canonical drive SEO; Open Graph tags control how your links look when shared.
Together they're the metadata layer that makes a page render correctly, rank, and share well.