What important meta tags go in the document head?

Question

Accepted Answer

`` tags in `` 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 ```html ``` - **`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. ## SEO meta ```html Page Title — 50–60 chars ``` The `` and `description` are what appear in Google results, so they drive click-through. `canonical` tells search engines the authoritative URL. ## Open Graph — social sharing previews ```html <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. ## Why it matters `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.