The tags that control what Google shows about your site

Meta tags sit in your HTML <head> where no visitor sees them. But they control your search snippet, your social media previews, and whether Google indexes your page at all. Getting them right is one of the highest-leverage SEO tasks you can do.

Here's every meta tag that matters for SEO, with the exact HTML and Next.js code to implement each one.

Title tag

The title tag is your most important on-page SEO element. It's the blue link in search results and the text in browser tabs.

<title>Free Website Audit Tool — Check SEO, Performance & Security | LintPage</title>

Rules:

50-60 characters (Google truncates longer titles)
Primary keyword near the beginning
Unique on every page (duplicates signal redundant content)
Descriptive, not generic ("Pricing Plans | App" not "Home")

In Next.js, set it via the metadata export:

export const metadata: Metadata = {
  title: 'Free Website Audit Tool — Check SEO & Performance | LintPage',
};

Meta description

Descriptions aren't a direct ranking factor, but they control the snippet text below your title in search results. A compelling description improves click-through rates, which indirectly helps rankings.

<meta
  name="description"
  content="Run 45+ SEO checks in 30 seconds. Catch noindex tags,
  broken robots.txt, missing meta tags, and more before launch."
/>

Rules:

150-160 characters (shorter wastes space, longer gets truncated)
Action-oriented: tell the searcher what they'll get by clicking
Include your primary keyword naturally (Google bolds matching terms)
Unique per page

export const metadata: Metadata = {
  description: 'Run 45+ SEO checks in 30 seconds. Catch noindex tags, broken robots.txt, and missing meta tags before launch.',
};

Canonical URL

Canonical tags tell search engines which URL is the "real" version of a page. Without them, Google might index /pricing, /pricing/, and /pricing?ref=nav as three separate pages competing with each other.

<link rel="canonical" href="https://example.com/pricing" />

Set a canonical on every page. In Next.js:

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/pricing',
  },
};

Robots meta tag

The robots meta tag controls whether Google indexes a page and follows its links. The default (no tag) means "index and follow everything," which is usually what you want.

<!-- Removes the page from search results -->
<meta name="robots" content="noindex, nofollow" />

<!-- Indexes but doesn't follow links -->
<meta name="robots" content="index, nofollow" />

<!-- Default behavior (same as no tag at all) -->
<meta name="robots" content="index, follow" />

Only use noindex intentionally - on admin pages, staging environments, or pages you genuinely don't want in search results. The most expensive SEO mistake we've seen is a noindex tag shipping to production by accident. Check for it before every deploy.

Meta Tag Checker

Check your page title, meta description, viewport, charset, and robots tags.

Try it free →

Viewport

The viewport tag controls how your page renders on mobile devices. Every page needs exactly this:

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

Don't add maximum-scale=1 or user-scalable=no. These disable pinch-to-zoom, which is a WCAG accessibility violation and gets flagged by Google's mobile-friendliness checks.

Open Graph tags

Open Graph tags control how your page looks when shared on Facebook, LinkedIn, Slack, and other platforms. Without them, shared links show a blank preview or auto-generated text that rarely looks good.

<meta property="og:title" content="Free Website Audit Tool | LintPage" />
<meta property="og:description" content="Run 45+ SEO checks in 30 seconds." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/website-audit-tool" />
<meta property="og:type" content="website" />

Image requirements:

Minimum 1200x630 pixels for summary_large_image cards
Use absolute URLs (relative paths don't work)
Keep text minimal - it gets cropped differently on each platform

In Next.js, set these via the metadata export:

export const metadata: Metadata = {
  openGraph: {
    title: 'Free Website Audit Tool | LintPage',
    description: 'Run 45+ SEO checks in 30 seconds.',
    url: 'https://example.com/website-audit-tool',
    images: [{ url: 'https://example.com/og-image.png', width: 1200, height: 630 }],
  },
};

Open Graph Tag Preview

Check your Open Graph and Twitter Card tags for social media sharing.

Try it free →

Twitter Card tags

Twitter/X uses its own meta tags. If you've already set Open Graph tags, you only need the card type - Twitter falls back to OG tags for the rest:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Free Website Audit Tool | LintPage" />
<meta name="twitter:description" content="Run 45+ SEO checks in 30 seconds." />
<meta name="twitter:image" content="https://example.com/og-image.png" />

In Next.js:

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
  },
};

The complete template

Here's every essential meta tag in one block. Copy this as your starting point and fill in the values for each page:

<head>
  <title>Page Title — 50-60 chars | Brand</title>
  <meta name="description" content="150-160 char description." />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="canonical" href="https://example.com/page" />

  <!-- Open Graph -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Description for social." />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

Don't guess - check

You can review meta tags manually by viewing page source, but it's tedious and error-prone across a full site. The faster approach: paste your URL into the LintPage Meta Tag Checker. It validates every tag on this list in seconds - title length, description length, canonicals, robots directives, OG tags, and viewport configuration.

Meta Tag Checker

Check your page title, meta description, viewport, charset, and robots tags.

Try it free →

The tags that control what Google shows about your site

Here's every meta tag that matters for SEO, with the exact HTML and Next.js code to implement each one.

Title tag

The title tag is your most important on-page SEO element. It's the blue link in search results and the text in browser tabs.

<title>Free Website Audit Tool — Check SEO, Performance & Security | LintPage</title>

Rules:

50-60 characters (Google truncates longer titles)
Primary keyword near the beginning
Unique on every page (duplicates signal redundant content)
Descriptive, not generic ("Pricing Plans | App" not "Home")

In Next.js, set it via the metadata export:

export const metadata: Metadata = {
  title: 'Free Website Audit Tool — Check SEO & Performance | LintPage',
};

Meta description

<meta
  name="description"
  content="Run 45+ SEO checks in 30 seconds. Catch noindex tags,
  broken robots.txt, missing meta tags, and more before launch."
/>

Rules:

150-160 characters (shorter wastes space, longer gets truncated)
Action-oriented: tell the searcher what they'll get by clicking
Include your primary keyword naturally (Google bolds matching terms)
Unique per page

export const metadata: Metadata = {
  description: 'Run 45+ SEO checks in 30 seconds. Catch noindex tags, broken robots.txt, and missing meta tags before launch.',
};

Canonical URL

<link rel="canonical" href="https://example.com/pricing" />

Set a canonical on every page. In Next.js:

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/pricing',
  },
};

Robots meta tag

The robots meta tag controls whether Google indexes a page and follows its links. The default (no tag) means "index and follow everything," which is usually what you want.

<!-- Removes the page from search results -->
<meta name="robots" content="noindex, nofollow" />

<!-- Indexes but doesn't follow links -->
<meta name="robots" content="index, nofollow" />

<!-- Default behavior (same as no tag at all) -->
<meta name="robots" content="index, follow" />

Meta Tag Checker

Check your page title, meta description, viewport, charset, and robots tags.

Try it free →

Viewport

The viewport tag controls how your page renders on mobile devices. Every page needs exactly this:

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

Don't add maximum-scale=1 or user-scalable=no. These disable pinch-to-zoom, which is a WCAG accessibility violation and gets flagged by Google's mobile-friendliness checks.

Open Graph tags

<meta property="og:title" content="Free Website Audit Tool | LintPage" />
<meta property="og:description" content="Run 45+ SEO checks in 30 seconds." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/website-audit-tool" />
<meta property="og:type" content="website" />

Image requirements:

Minimum 1200x630 pixels for summary_large_image cards
Use absolute URLs (relative paths don't work)
Keep text minimal - it gets cropped differently on each platform

In Next.js, set these via the metadata export:

export const metadata: Metadata = {
  openGraph: {
    title: 'Free Website Audit Tool | LintPage',
    description: 'Run 45+ SEO checks in 30 seconds.',
    url: 'https://example.com/website-audit-tool',
    images: [{ url: 'https://example.com/og-image.png', width: 1200, height: 630 }],
  },
};

Open Graph Tag Preview

Check your Open Graph and Twitter Card tags for social media sharing.

Try it free →

Twitter Card tags

Twitter/X uses its own meta tags. If you've already set Open Graph tags, you only need the card type - Twitter falls back to OG tags for the rest:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Free Website Audit Tool | LintPage" />
<meta name="twitter:description" content="Run 45+ SEO checks in 30 seconds." />
<meta name="twitter:image" content="https://example.com/og-image.png" />

In Next.js:

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
  },
};

The complete template

Here's every essential meta tag in one block. Copy this as your starting point and fill in the values for each page:

<head>
  <title>Page Title — 50-60 chars | Brand</title>
  <meta name="description" content="150-160 char description." />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="canonical" href="https://example.com/page" />

  <!-- Open Graph -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Description for social." />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

Don't guess - check

Meta Tag Checker

Check your page title, meta description, viewport, charset, and robots tags.

Try it free →

How to Write Meta Tags That Actually Improve Your SEO

The tags that control what Google shows about your site

Title tag

Meta description

Canonical URL

Robots meta tag

Viewport

Open Graph tags

Twitter Card tags

The complete template

Don't guess - check

Want the full picture? Run all 45+ checks at once.

How to Write Meta Tags That Actually Improve Your SEO

The tags that control what Google shows about your site

Title tag

Meta description

Canonical URL

Robots meta tag

Viewport

Open Graph tags

Twitter Card tags

The complete template

Don't guess - check

Want the full picture? Run all 45+ checks at once.