Meta Tags Guide
A practical meta tags guide for title, description, canonical, Open Graph, and Twitter cards with clear examples.
If a page has weak meta tags, search engines and social platforms often show unclear snippets. That usually means lower click-through, weaker relevance signals, and less predictable previews.
This guide gives a practical setup you can use for product pages, blog posts, docs pages, and landing pages.
Why pages need custom metadata
Most pages are intent-heavy. Users are usually searching for a direct answer, task, or comparison. If your title and description read like generic marketing text, users skip your result.
Good metadata should do three things:
- Confirm task match immediately.
- Show one clear outcome.
- Avoid keyword stuffing or vague claims.
Google may choose different snippets at times, but high-quality page-level metadata still improves your baseline quality and consistency.12
Use this metadata stack
For every production page, set:
- Unique
<title> - One descriptive
<meta name="description"> - Canonical URL
- Open Graph fields (
og:title,og:description,og:url,og:image,og:type) - Twitter card fields (
twitter:card,twitter:title,twitter:description,twitter:image)
That stack covers search snippets, social preview cards, and URL consolidation basics.
Interactive generator
Use this helper to generate and copy a valid starter block.
Meta Tag Playground
Edit fields and copy production-ready SEO + social tags.
<title>All SVG Icons</title>
<meta name="description" content="Find and use free SVG icons across 220+ icon packs.">
<link rel="canonical" href="https://allsvgicons.com/">
<meta property="og:title" content="All SVG Icons">
<meta property="og:description" content="Find and use free SVG icons across 220+ icon packs.">
<meta property="og:url" content="https://allsvgicons.com/">
<meta property="og:image" content="https://allsvgicons.com/og.png">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="All SVG Icons">
<meta name="twitter:description" content="Find and use free SVG icons across 220+ icon packs.">
<meta name="twitter:image" content="https://allsvgicons.com/og.png">Example: metadata by page intent
Product feature page
- Title direction: “Feature Name: Primary Benefit”
- Description direction: “Explain the outcome clearly in one sentence with specific value”
- OG image direction: clean feature screenshot
Blog article page
- Title direction: “Topic: Clear Promise”
- Description direction: “Summarize what readers will learn and why it matters”
- OG image direction: branded article visual
Landing page
- Title direction: “Main Offer for Target Audience”
- Description direction: “State offer, audience, and key outcome in one natural sentence”
- OG image direction: hero section visual
This keeps each page semantically distinct, which helps avoid competing with yourself in search.
Common mistakes
- Same title and description for every tool page.
- Canonical URLs pointing to the homepage.
- Missing absolute URLs in social image fields.
- Long, vague descriptions with no real user value.
- Updating page content but leaving old metadata in place.
Programmatic metadata is fine, but each page still needs page-specific title, description, and social image context.
Quality checklist before publish
- Is the title specific to this page and intent?
- Does description read naturally for humans?
- Does canonical point to the preferred clean URL?
- Do OG and Twitter images exist and return 200?
- Does page heading match metadata intent?
If all five are true, metadata is usually strong enough for indexable pages.
Related guides
Additional source references: 3 4 5.