HTML meta tags in <head> tell browsers and crawlers how to render and summarize the page. The tags you actually need on every public URL are charset, viewport, a unique title, a unique meta description, and a canonical URL. Open Graph tags control social previews.
This HTML cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.
Quick reference
- Charset:
<meta charset="UTF-8">as the first head child so characters parse correctly. - Viewport:
width=device-width, initial-scale=1— required or mobile CSS will look zoomed-out. - Title: Unique, ~50–60 characters. Matches the H1 intent, not a keyword list.
- Description:
name="description"~150–160 characters. Google may rewrite it; still write a real sentence. - Canonical:
<link rel="canonical" href="https://example.com/page">to pick the preferred URL. - Robots:
index,followis default. Usenoindexon thank-you, admin, and thin filter pages. - Open Graph:
og:title,og:description,og:image,og:url,og:typefor Facebook/LinkedIn/iMessage. - Social image: OG image at least 1200×630. Absolute HTTPS URL, not a relative path.
Copy-paste examples
Production <head> for a blog post
Keep title and description unique per URL. Canonical should be the live HTTPS permalink.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Meta Tags SEO Cheat Sheet</title>
<meta name="description" content="Title, description, canonical, and Open Graph tags for crawlable pages.">
<link rel="canonical" href="https://example.com/blog/html-meta-tags-seo-cheat-sheet">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML Meta Tags SEO Cheat Sheet">
<meta property="og:url" content="https://example.com/blog/html-meta-tags-seo-cheat-sheet">
</head>Common mistakes
- Duplicating the same title and description on every page of the site.
- Forgetting viewport so the desktop layout is pinch-zoomed on phones.
- Relative
og:imagepaths — crawlers often fail to fetch them. - Blocking the page with
noindexafter launch and wondering why it never appears.
FAQ
- Does Google still use meta keywords? No. Ignore
meta name="keywords". Spend the effort on title, description, and on-page headings.
- Is a meta description a ranking factor? It is not a direct ranking factor, but it affects click-through from the results page, which you do care about.
- Do I need Twitter Card tags too?
twitter:cardplustwitter:imagehelp X previews. If omitted, X often falls back to Open Graph.
Related HTML cheat sheets
Build with this stack
When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.
Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.