The Complete Meta Tags Checklist for 2026 (with Examples)

Meta tags are the unglamorous plumbing of SEO. Get them right and your pages look professional in search results, on social shares, and in messenger previews. Get them wrong and you're invisible — or worse, displayed with placeholder text that scares users off.

This is the complete 2026 checklist: every meta tag that earns its place, exact character limits, examples, and the ones you can ignore.

The mandatory five

Every web page needs these five at minimum. Skip any of them and you're leaving search and social impressions on the table.

1. Title tag

<title>Your Page Title — Site Name</title>

• Character limit: 50-60 characters. Google truncates around 60 on desktop and 50 on mobile.
• Format: Primary keyword first, brand at the end. "Free QR Code Generator — ToolifyApps".
• Avoid: ALL CAPS, repeated keywords, generic phrases like "Home Page".

2. Meta description

<meta name="description" content="One sentence that explains what the page is and why someone should click." />

• Character limit: 150-160 characters. Google cuts off around 160.
• Not a direct ranking factor, but it dramatically affects click-through rate from search results.
• Include a value proposition and a soft call-to-action ("Free, no sign-up", "Try it now").
• Match search intent: if people search for "how to compress images", your description should mention compression.

3. Viewport (mobile)

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

Required for proper mobile rendering. Without it, your page is displayed as a desktop site shrunk down — unreadable. Every modern framework sets this by default; double-check yours has it.

4. Canonical URL

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

• Tells search engines which URL is the "real" version when multiple URLs could reach the same content.
• Especially important for pages reachable with/without trailing slash, with/without www, or with tracking parameters.
• Without canonical, search engines may split ranking signals across variants — both versions rank worse than one would.

5. Open Graph image

<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

• Dimensions: 1200×630 pixels is the universal sweet spot — works for Facebook, LinkedIn, Slack, Discord, WhatsApp.
• Format: PNG or JPG (avoid WebP for OG — some platforms still don't support it).
• Content: includes your page title or logo. Plain photos perform worse than designed cards.
• Without an OG image, social shares of your URL show as ugly text-only links. Massive miss.

Open Graph — the social media set

OG tags power link previews on Facebook, LinkedIn, Discord, Slack, iMessage, and most messaging apps. The bare minimum:

<meta property="og:type" content="website" />
<meta property="og:title" content="Same as page title" />
<meta property="og:description" content="Same as meta description, can be slightly different" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:image" content="https://example.com/og-image.png" />

og:type options:

• website — homepage, landing pages, tool pages.
• article — blog posts, news articles. Enables additional tags like article:published_time.
• product — product pages. Enables price, availability fields.
• profile — user profile pages.

Twitter Card — the X / Twitter set

Twitter has its own meta tag system but falls back to OG tags for most fields. The one tag that matters most is the card type:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Same as page title" />
<meta name="twitter:description" content="Same as meta description" />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:site" content="@yourhandle" />

twitter:card options:

• summary_large_image — big rectangular image card. Default for blog posts and landing pages.
• summary — small square thumbnail. Better for documentation and reference content.
• player — video player card. Specialized, rarely needed.

Structured data (JSON-LD) — the SEO supercharger

Structured data isn't a meta tag per se — it's a JSON block in your <head> — but it's the single highest-leverage thing you can add for search appearance. It enables rich snippets: star ratings, FAQ accordions, recipe cards, breadcrumbs, etc.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your article title",
  "description": "Article description",
  "datePublished": "2026-05-20",
  "author": { "@type": "Organization", "name": "Your Site" }
}
</script>

Common schema types worth implementing:

• Article / BlogPosting — blog posts.
• WebApplication — tool pages, calculators.
• FAQPage — pages with a Q&A section. Eligible for the accordion rich result.
• HowTo — step-by-step guides. Eligible for numbered list rich result (note: increasingly competitive).
• BreadcrumbList — navigation breadcrumbs that appear in search results.

Robots meta — controlling indexation

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

The default is "index, follow" — every search engine indexes and follows the links. Override only when you need to:

• noindex, follow — don't index this page but still crawl its links. Used for thin content like login pages.
• noindex, nofollow — completely hide. For admin pages, drafts.
• index, nofollow — rare. Index the page but don't pass authority through its links.

Plus Google-specific flags inside googlebot:

<meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1" />

The "skip" list — tags you don't need in 2026

• Meta keywords: Google stopped using this in 2009. Bing and Yandex use it lightly. Set it if you want, but don't sweat it.
• Meta author / copyright / generator: harmless but useless for SEO. Skip.
• Meta revisit-after: not respected by any major engine. Skip.
• Meta http-equiv refresh: for redirects. Use a proper HTTP 301/302 instead.
• Twitter:creator vs twitter:site: only useful if you have a verified Twitter following. Otherwise skip.

Testing before you ship

The four tools every developer should bookmark:

1. Google Rich Results Test — paste a URL or HTML, see how Google parses your structured data.
2. Facebook Sharing Debugger — preview how your link appears on Facebook, LinkedIn, Slack. Also forces re-fetch when you update OG tags.
3. Twitter Card Validator — preview Twitter cards.
4. LinkedIn Post Inspector — preview LinkedIn shares. LinkedIn caches aggressively, so this is the only way to force a refresh.

The complete 2026 meta tag block

Copy-paste template for any page:

<title>Page Title — Site Name</title>
<meta name="description" content="One-line description, 150-160 chars." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href="https://example.com/page" />
<meta name="robots" content="index, follow" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

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