March 21, 2026

Every meta tag your site actually needs (and nothing it doesn't)

Most meta tag guides are either incomplete or overwhelming. They either tell you to add a title and description and call it done, or they list every obscure tag that's existed since 1997 and let you figure out which ones matter.

Here's the actual set you need in 2026 — the tags that affect your search ranking, your social previews, and your browser behavior. Nothing deprecated. Nothing redundant. Each one with an explanation of what it does and why you'd include it.

The essential set: 12 tags

These are the tags that every public-facing page should have. Copy this structure, fill in your values, and you're done.

```html  <title>Your Page Title — Site Name</title> <meta name="description" content="A compelling 120-160 character description." /> <link rel="canonical" href="https://yoursite.com/this-page" />

<meta property="og:type" content="website" /> <meta property="og:url" content="https://yoursite.com/this-page" /> <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="A compelling description for social." /> <meta property="og:image" content="https://yoursite.com/og-image.png" />

<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Your Page Title" /> <meta property="twitter:description" content="A compelling description." /> <meta property="twitter:image" content="https://yoursite.com/og-image.png" /> ```

That's it. Let me explain each group.

Primary meta tags

**`<title>`** — The single most important tag for SEO. This is what Google shows as the clickable headline in search results. Keep it under 60 characters or Google will truncate it. Format: "Page Topic — Brand Name" or "Page Topic | Brand Name."

**`<meta name="description">`** — The snippet below your title in search results. Google doesn't use it for ranking directly, but a good description increases click-through rate, which does affect ranking indirectly. Aim for 120-160 characters. Be specific. "We offer great services" is useless. "Free meta tag generator with live previews for Google, X, LinkedIn, and Facebook" tells people exactly what they'll get.

**`<link rel="canonical">`** — Tells search engines which URL is the "real" version of this page. Essential if your page is accessible at multiple URLs (with/without www, with/without trailing slash, with query parameters). Without this, Google might split your ranking across duplicate URLs.

Open Graph tags

Open Graph is the protocol Facebook created that most platforms now use for link previews. When someone shares your URL on LinkedIn, Discord, Slack, iMessage, or Facebook, these tags control what shows up.

**`og:type`** — Usually "website" for a homepage or "article" for blog posts. This affects how some platforms render the preview.

**`og:url`** — The canonical URL of the page. Should match your canonical link tag.

**`og:title`** and **`og:description`** — Can be the same as your primary title and description, but you have more room. OG titles can be up to 90 characters. OG descriptions can be up to 200. Use this extra space if your search-optimized versions feel cramped.

**`og:image`** — The preview image. This is the single biggest factor in whether people click shared links. The recommended size is 1200x630 pixels. Use a full absolute URL (not a relative path). If you don't set this, platforms will either show nothing or auto-select a random image from your page.

Twitter/X tags

Twitter has its own meta tags that override Open Graph when present. If you only set OG tags, Twitter will fall back to those — but setting Twitter-specific tags gives you more control.

**`twitter:card`** — The layout. "summary_large_image" shows a big image preview (this is what you usually want). "summary" shows a small square thumbnail. Use large image for anything visual; use summary for pages where the text matters more than the image.

**`twitter:title`**, **`twitter:description`**, **`twitter:image`** — Same purpose as the OG equivalents. You can use the same values or customize them for Twitter's audience.

Tags you can add if relevant

These aren't essential for every page but are useful in specific situations:

**`<meta name="robots" content="noindex, follow">`** — Tells search engines not to index this page but to follow its links. Useful for thank-you pages, internal tools, or staging URLs you don't want in search results.

**`<meta name="theme-color" content="#000000">`** — Sets the browser toolbar color on mobile. Small detail that makes your site feel more polished on Android Chrome and iOS Safari.

**`<meta property="og:site_name" content="Your Brand">`** — Shown on some platforms as context above the title. Worth adding if your brand name isn't in the page title.

**`<meta property="og:locale" content="en_US">`** — Specifies the language. Only matters if you serve content in multiple languages.

**`<meta property="twitter:creator" content="@yourhandle">`** — Attributes the content to a specific Twitter account. Useful if you want clicks back to your profile.

Tags you don't need anymore

**`<meta name="keywords">`** — Google has ignored this since 2009. Don't bother.

**`<meta name="author">`** — No SEO value. If you want author attribution, use structured data (JSON-LD) instead.

**`<meta http-equiv="X-UA-Compatible" content="IE=edge">`** — Only mattered for Internet Explorer. IE is dead.

**`<meta name="generator">`** — Tells the world what CMS you use. No benefit, minor security risk.

Common mistakes

**Duplicate titles across pages.** Every page needs a unique title. If your homepage and about page both say "My Company," Google has to guess which one to show.

**Missing OG image.** A shared link without an image gets dramatically fewer clicks. Even a simple branded card is better than nothing. (If you need one, we built a free OG image generator at [aeonbuilds.dev/tools/og](/tools/og).)

**Relative image URLs.** OG images must be absolute URLs starting with https://. A relative path like "/images/og.png" won't work — platforms can't resolve it.

**Description that's too generic.** "Welcome to our website" tells no one anything. Describe what's specifically on this page.

**Not testing.** You can't see your meta tags in action by looking at your source code. Use a tool to preview how your page appears on each platform before you share it. (We built one for that too: [aeonbuilds.dev/tools/meta](/tools/meta).)

The 2-minute implementation

If you're starting from scratch: copy the 12-tag template above, fill in your values, paste it into your `<head>`, and create an OG image at 1200x630. That covers search engines, every major social platform, and messaging apps.

If you want to generate the tags automatically with live previews, we built a free tool for exactly that: [Meta Tag Generator](/tools/meta). No signup. No ads. Just paste your details and copy the HTML.