Web & SEO 8 min read

HTML Meta Tags for SEO: What They Do and How to Set Them

Learn which HTML meta tags actually affect SEO, how to write effective titles and descriptions, and how to set up Open Graph tags for social sharing.

The Quick Answer

Meta tags are HTML elements in a page's <head> section that tell search engines and social platforms how to handle your page. The ones that matter most:

  • Title tag — the clickable headline in search results (direct ranking factor)
  • Meta description — the snippet text below the title (affects click-through rate)
  • Canonical URL — the preferred version of the page (prevents duplicate content)
  • Robots — whether the page should be indexed
  • Open Graph tags — how the page looks when shared on social media
  • Twitter Card tags — how the page looks specifically on X (Twitter)

The meta keywords tag? Google has ignored it since 2009. Skip it.

Why Meta Tags Matter

Search engines use meta tags to understand what a page is about and how to display it. Social platforms use them to generate link previews. Without proper meta tags:

  • Google may generate a poor snippet from random page text
  • Social shares show a blank or wrong image
  • Duplicate versions of your page compete against each other in search
  • Important pages may not get indexed at all

Meta tags are not a "nice to have." They are fundamental page hygiene.

The Essential Meta Tags (With Examples)

1. Title Tag

The title tag is the single most important on-page SEO element. It appears as the clickable blue headline in Google search results.

<title>How to Calculate Compound Interest — Free Guide</title>

Rules:

  • Keep it between 50-60 characters (Google truncates at ~60)
  • Put the primary keyword near the beginning
  • Make it unique for every page
  • Include your brand name at the end if space permits: … — My Site

What happens without it: Google generates a title from the page content, usually the <h1> or other headings. The result is often awkward.

2. Meta Description

The meta description appears as the gray snippet text below the title in search results. It does not directly affect rankings, but it strongly affects whether people click.

<meta name="description" content="Learn how compound interest works with clear formulas and worked examples. Calculate how your savings or debt grows over time.">

Rules:

  • Keep it between 120-160 characters (mobile truncates at ~120, desktop at ~160)
  • Include your primary keyword naturally (Google bolds matching terms)
  • Write it like ad copy: what will the reader get?
  • Don't use quotes — they can cause truncation

What happens without it: Google auto-generates a snippet from the page content. Sometimes this is fine, but often it grabs irrelevant text.

3. Canonical URL

The canonical tag tells search engines which URL is the "official" version of a page. This is critical when the same content is accessible at multiple URLs.

<link rel="canonical" href="https://example.com/compound-interest-guide">

Why it matters: Without a canonical tag, search engines may index:

  • http://example.com/page and https://example.com/page
  • example.com/page and www.example.com/page
  • example.com/page and example.com/page?ref=twitter

Each variant splits your ranking signals. A canonical tag consolidates them.

Rules:

  • Always use the absolute URL (include https://)
  • Use the same canonical across all variants of the page
  • Self-referencing canonicals are fine and recommended (a page pointing to itself)

4. Robots Meta Tag

The robots tag controls how search engines handle the page.

<meta name="robots" content="index, follow">

Common values:

Value Meaning
index, follow Show in search, follow links (default)
noindex, follow Don't show in search, but follow links
index, nofollow Show in search, but don't follow links
noindex, nofollow Don't show, don't follow links
noarchive Don't show a cached copy
nosnippet Don't show a text snippet

When to use noindex: Login pages, internal dashboards, thank-you pages, staging environments — anything that should not appear in search results.

Warning: Accidentally setting noindex on a production page is one of the most common SEO mistakes. Always verify this tag after deployments.

Open Graph Tags

Open Graph (OG) tags were created by Facebook and are now used by most social platforms: Facebook, LinkedIn, WhatsApp, Slack, Pinterest, and (as a fallback) X.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/my-page">
<meta property="og:title" content="How to Calculate Compound Interest">
<meta property="og:description" content="Clear formulas and worked examples for compound interest.">
<meta property="og:image" content="https://example.com/images/og-image.jpg">

Required OG Tags

  • og:title — The title shown in the social preview card
  • og:description — The description below the title
  • og:image — The preview image (biggest impact on click-through)
  • og:url — The canonical URL of the page
  • og:type — Usually website or article

OG Image Best Practices

The image is the most impactful part of a social preview. A good image dramatically increases engagement.

  • Size: 1200 × 630 pixels (1.91:1 aspect ratio)
  • Format: JPEG or PNG
  • File size: Under 1 MB (for fast loading)
  • Content: Center important text and visuals (platforms crop edges differently)
  • Text on image: Keep it large enough to read on mobile

Optional But Useful

  • og:site_name — Your website name (shown on some platforms)
  • og:locale — Language and region, e.g., en_US

Twitter Card Tags

X (formerly Twitter) has its own meta tags that control link previews on the platform.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/my-page">
<meta name="twitter:title" content="How to Calculate Compound Interest">
<meta name="twitter:description" content="Clear formulas and worked examples.">
<meta name="twitter:image" content="https://example.com/images/og-image.jpg">

Card Types

  • summary — Small square image with title and description to the right
  • summary_large_image — Large landscape image above text (more eye-catching)

Fallback Behavior

If you set Open Graph tags but not Twitter Card tags, X falls back to using the OG tags. However, setting both gives you full control on each platform.

Optional

  • twitter:site — Your site's @username on X
  • twitter:creator — The author's @username

Where to Place Meta Tags

All meta tags go inside the <head> section of your HTML, before </head>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Primary Meta Tags -->
    <title>Your Page Title</title>
    <meta name="description" content="Your description">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://example.com/your-page">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://example.com/your-page">
    <meta property="og:title" content="Your Page Title">
    <meta property="og:description" content="Your description">
    <meta property="og:image" content="https://example.com/og.jpg">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Your Page Title">
    <meta name="twitter:description" content="Your description">
    <meta name="twitter:image" content="https://example.com/og.jpg">
</head>

In Common Frameworks

WordPress: Use an SEO plugin (Yoast, Rank Math, or All in One SEO) to set meta tags through a UI without editing code.

Next.js: Use the <Head> component from next/head or the Metadata API in App Router:

export const metadata = {
  title: 'Your Page Title',
  description: 'Your description',
  openGraph: {
    title: 'Your Page Title',
    description: 'Your description',
    images: ['/og.jpg'],
  },
};

Astro / Eleventy / static HTML: Add tags directly in your layout template's <head> section, using template variables for per-page values.

Common Mistakes

1. Duplicate Titles Across Pages

If every page has the same title ("My Website"), search engines cannot tell them apart. Each page needs a unique, descriptive title.

2. Missing or Empty Meta Description

Without a description, Google generates one from page content. The auto-generated version often grabs irrelevant text or mid-sentence fragments.

3. Accidentally Using noindex

This completely removes the page from search results. A single misplaced noindex tag on your homepage can be devastating. Always verify robots tags after deployments.

4. No Canonical Tag

Without a canonical, multiple URL variants (?ref=, www vs non-www, trailing slash differences) may all get indexed separately, splitting your ranking signals.

5. No OG Image

Social shares without images get dramatically less engagement. Posts with images on Facebook get 2-3x more interaction than those without.

6. Title Too Long

Titles over 60 characters get truncated in search results. Your carefully crafted title might end up as "How to Calculate Compound Interest for Your Savings and Invest…"

7. Description That Does Not Match the Page

If your meta description promises something the page does not deliver, users bounce immediately. Google may also stop using your description and auto-generate its own.

How to Verify Your Meta Tags

After setting meta tags, test them:

  1. View page source (Ctrl+U / Cmd+U in most browsers) — check that tags are in the <head> section
  2. Google Search Console — the URL Inspection tool shows exactly what Google sees
  3. Social debuggers:
  4. Browser DevTools — check the Elements panel to verify tags rendered correctly (important for JavaScript-rendered pages)
Generate Meta Tags

Meta Tag Generator

Enter your page details and generate ready-to-paste HTML meta tags with a live Google SERP and social media preview.

Open Generator

Related Tools

Related Tools

Meta Tag Generator

Generate common SEO meta tags for a page

SERP Preview Tool

Preview how your page appears in Google search results

Open Graph Preview

Preview how links appear on social media

Slug Generator

Turn text into a clean URL slug

Robots.txt Generator

Generate a robots.txt file with common rules