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 60 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 60 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.
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 60 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_imagecards - 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 60 SEO checks in 30 seconds.',
url: 'https://example.com/website-audit-tool',
images: [{ url: 'https://example.com/og-image.png', width: 1200, height: 630 }],
},
};
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 60 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.