Frontend Beauty
ESC

Type to search the knowledge base.

meta Tags for SEO Basics

Essential meta tags — title, description, robots, canonical, viewport — and what actually moves SEO vs folklore.

beginner3 min read
  • html
  • meta-tags
  • seo

Meta tags don’t replace good content, but they control snippets, indexing, and viewport behavior. Get the basics right before chasing obscure meta folklore.

Docs: MDN <meta>, Google meta tags, canonical.

Title and description

<title>Flexbox fundamentals — Frontend Beauty</title>
<meta
  name="description"
  content="Flex container vs items, grow/shrink/basis, alignment, wrapping, and the bugs that show up in real layouts."
/>
  • Title — unique per URL; primary words first; keep readable in tabs (~50–60 chars as a soft guideline).
  • Description — honest summary (~120–160 chars often display well); Google may rewrite it.

robots and indexing

<meta name="robots" content="index, follow" />
<!-- or -->
<meta name="robots" content="noindex, nofollow" />

Common tokens: index/noindex, follow/nofollow, nosnippet, max-image-preview, noarchive.

<meta name="googlebot" content="noindex" />

Prefer HTTP headers or meta for noindex on thin/staging pages. Don’t noindex a page you want ranked.

Canonical

<link rel="canonical" href="https://example.com/learn/css/flexbox-fundamentals" />

Points to the preferred URL when duplicates exist (tracking params, trailing slash variants, mirrored paths). Self-referential canonicals are fine and common.

Viewport (not SEO, still mandatory)

<meta name="viewport" content="width=device-width, initial-scale=1" />

Mobile-friendly pages are a ranking/UX baseline. Avoid disabling user zoom.

Social previews live nearby

Open Graph / Twitter tags aren’t classic ranking factors but control share cards — see the Open Graph article. Keep og:title consistent with <title> unless you have a reason.

What doesn’t magically rank you

  • Keyword-stuffed meta keywords (ignored by Google)
  • Dozens of random meta tags from old generators
  • Fake author/revisit-after myths

SPA notes

Client-only titles that never appear in first HTML hurt crawlers that don’t execute JS well. Prefer SSR/prerender for public docs. Update document.title on route change for users regardless.

Interview out-loud

“Core SEO meta is a unique title, an honest description, robots when needed, and a canonical URL. Viewport is required for mobile. I don’t rely on meta keywords. Thin or private pages get noindex. Public content should expose titles in the initial HTML when possible.”

Footguns

  1. Same title on every route.
  2. Staging site indexed without auth or noindex.
  3. Canonical pointing at the wrong domain/http.
  4. Description that doesn’t match the page (high rewrite/ignore chance).
  5. Blocking crawling in robots.txt while expecting rich results.

Staging protection

<!-- staging layouts -->
<meta name="robots" content="noindex, nofollow" />

Also password-protect or restrict by network. noindex alone can fail if a page was already indexed or linked widely — combine defenses. Production must remove staging noindex; add a CI check that production builds do not contain noindex unless intentional (this site uses frontmatter noindex for a reason).

Canonical vs redirects

Canonical tags are hints; 301 redirects are stronger for true duplicates. Use redirects when a URL should never be served; use canonical when similar variants must remain available (print URLs, filtered views you cannot redirect). Never point canonicals at soft-404 pages. Keep sitemap URLs aligned with canonical choices.

Title templates

{Page topic} — {Site name}

Keep the unique topic first so tabs and SERP titles differentiate. Avoid keyword lists. For paginated series, include page numbers in title and description when content differs. For filtered commerce URLs that should not index, use noindex or canonical to a clean parent category URL based on SEO strategy.

Further reading

Related guides