Open Graph Generator
Kontakt
Back to Blog
SEOMeta Tags

The Ultimate Meta Tags SEO Checklist for 2026

A comprehensive, copy-paste checklist of every HTML meta tag that affects SEO, social sharing, and browser behavior.

SS
Sanjay Samanta•March 15, 2026
9 min read

Meta tags are the foundation of how search engines and social platforms understand your pages. This checklist covers every tag that matters — from basic SEO to advanced social and browser configuration.

Copy the relevant sections into your <head> and customize for your site.

Essential SEO Tags

Every page on your site should include these:

<!-- Primary SEO -->
<title>Page Title — Site Name</title>
<meta name="description" content="Concise summary in 120-160 characters." />
<link rel="canonical" href="https://example.com/current-page" />
<meta name="robots" content="index, follow" />

<!-- Language & Encoding -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<html lang="en">

Checklist

  • Title tag is 30–60 characters and unique per page
  • Meta description is 120–160 characters with a value proposition
  • Canonical URL is absolute and self-referencing
  • Viewport meta is set for mobile responsiveness
  • Language attribute is set on <html>
  • Character encoding is UTF-8

Open Graph Tags

Control how your pages appear when shared on Facebook, LinkedIn, WhatsApp, Discord, and Slack:

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Brief summary for social cards." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/current-page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />

Checklist

  • og:title matches or refines the <title> tag
  • og:description is compelling but under 200 characters
  • og:image uses an absolute HTTPS URL
  • og:image is at least 1200×630 pixels
  • og:url matches the canonical URL
  • og:type is set (website, article, product, etc.)

Twitter Card Tags

Most Twitter card data falls back to OG tags, but you need at minimum:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourbrand" />

Optional Overrides

<meta name="twitter:title" content="Shorter title for X" />
<meta name="twitter:description" content="Shorter description" />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />

Checklist

  • twitter:card is set to summary_large_image for link posts
  • twitter:site mentions your brand’s X handle

Favicon & App Icons

<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<!-- Web app manifest -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#171717" />

Checklist

  • favicon.ico exists at the root
  • Apple Touch Icon is 180×180 pixels
  • Web app manifest includes icon definitions
  • Theme color is set for mobile browsers

Performance & Preloading

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />

<!-- DNS prefetch for analytics -->
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />

International & Multi-Language

<!-- Alternate language versions -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page" />
<link rel="alternate" hreflang="es" href="https://example.com/es/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

Security Tags

<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />

<!-- Prevent MIME sniffing -->
<meta http-equiv="X-Content-Type-Options" content="nosniff" />

<!-- Referrer policy -->
<meta name="referrer" content="strict-origin-when-cross-origin" />

Tags You Should NOT Use

These tags are outdated or ignored by modern search engines:

Tag Why to Skip
<meta name="keywords"> Ignored by Google since 2009
<meta name="author"> No SEO impact; use JSON-LD instead
<meta name="revisit-after"> Crawlers set their own schedule
<meta http-equiv="refresh"> Use server-side redirects (301/302)
<meta name="generator"> Reveals your CMS; minor security risk

Quick Validation

Run these checks before every deployment:

  1. Google Rich Results Test — validates structured data
  2. Facebook Sharing Debugger — validates OG tags
  3. Lighthouse SEO Audit — checks technical SEO
  4. Our Open Graph Generator — previews social cards across 8+ platforms

Use our Open Graph Generator and Meta Tag Auditor to preview, generate, and validate all the social meta tags from this checklist instantly.

Deep Technical Framework Implementations

Integrating optimized social preview tags into production web frameworks requires understanding how each runtime handles head metadata and server-side rendering:

1. Next.js App Router (layout.tsx / page.tsx)

In Next.js 14 and 15, use the centralized Metadata API to construct unified Open Graph and Twitter Card tags. This ensures that edge crawlers receive complete, pre-rendered meta tags in the initial HTML stream before client hydration:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Next-Generation Web Metadata & Social Graph Suite',
  description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
  openGraph: {
    title: 'Next-Generation Web Metadata & Social Graph Suite',
    description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
    url: 'https://opengraphgenerator.com/',
    siteName: 'Open Graph Generator',
    images: [
      {
        url: 'https://opengraphgenerator.com/images/hero-1200x630.png',
        width: 1200,
        height: 630,
        alt: 'Open Graph Generator Dashboard Interface',
        type: 'image/png',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    site: '@OpenGraphGen',
    creator: '@sanjaysamanta',
    title: 'Next-Generation Web Metadata & Social Graph Suite',
    description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
    images: ['https://opengraphgenerator.com/images/hero-1200x630.png'],
  },
};

For dynamic route handling in Next.js, read our comprehensive Next.js Open Graph Guide.

2. Astro Component Head Architecture

Astro’s component-first model allows you to encapsulate social sharing tags into reusable SEO layouts:

---
interface Props {
  title: string;
  description: string;
  image?: string;
  canonicalUrl?: string;
  type?: 'website' | 'article';
}

const {
  title,
  description,
  image = 'https://opengraphgenerator.com/images/default-og.png',
  canonicalUrl = Astro.url.href,
  type = 'website'
} = Astro.props;
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalUrl} />

  <!-- Open Graph -->
  <meta property="og:type" content={type} />
  <meta property="og:site_name" content="Open Graph Generator" />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:url" content={canonicalUrl} />
  <meta property="og:image" content={image} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@OpenGraphGen" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={image} />
</head>

3. Nuxt 3 & Vue Composition API

<script setup lang="ts">
useSeoMeta({
  title: 'Enterprise Social Metadata Management',
  ogTitle: 'Enterprise Social Metadata Management',
  description: 'Scalable Open Graph and Twitter Card automation for multi-tenant applications.',
  ogDescription: 'Scalable Open Graph and Twitter Card automation for multi-tenant applications.',
  ogImage: 'https://example.com/og-banner.png',
  ogImageWidth: '1200',
  ogImageHeight: '630',
  ogUrl: 'https://example.com/enterprise/',
  ogType: 'website',
  twitterCard: 'summary_large_image',
  twitterSite: '@OpenGraphGen',
});
</script>

Edge Caching, CDN Invalidation & HTTP Headers

To ensure that social scrapers (facebookexternalhit, Twitterbot, LinkedInBot, Slackbot, WhatsApp/2.x) always receive fresh metadata while minimizing origin server CPU load, implement a multi-tiered caching strategy:

Asset Category Cache-Control Header Edge CDN TTL Browser Cache TTL
HTML Webpages public, max-age=0, s-maxage=600, must-revalidate 10 Minutes 0 Seconds (Always revalidate)
Static OG Images public, max-age=31536000, immutable 1 Year 1 Year (Content-hashed URLs)
Dynamic OG API Routes public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400 24 Hours 1 Hour 
# NGINX Edge Caching Configuration for Social Scraping
location ~* \.(html)$ {
    add_header Cache-Control "public, max-age=0, s-maxage=600, must-revalidate";
    add_header X-Robots-Tag "all";
}

location ~* \.(png|jpg|jpeg|webp)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    add_header Access-Control-Allow-Origin "*";
}

Comprehensive Troubleshooting & Error Code Resolution Matrix

When debugging failed link previews across development, staging, and production environments, refer to this error resolution matrix:

HTTP Status / Error Scraper Behavior Root Cause Actionable Developer Fix
401 Unauthorized Plain URL rendered, no image or text Staging environment protected by Basic Auth or IP whitelist Allowlist crawler User-Agent strings or test on public preview URLs.
403 Forbidden Scraper skips metadata extraction Web Application Firewall (WAF) or Cloudflare Bot Management blocking scrapers Add WAF custom rules to bypass verified social bots (Twitterbot, facebookexternalhit, LinkedInBot).
404 Not Found Error page metadata cached Scraped URL does not exist or has an unhandled redirect Ensure canonical trailing slashes match server routing. Inspect with Head Auditor.
SSL Handshake Failure Scraper aborts connection immediately Missing intermediate SSL certificate or expired TLS cert Install full certificate bundle. Audit security with Security Headers.
Timeout (3.0s+) Text-only link with no thumbnail Slow server response time or SSR cold starts Cache HTML responses at the edge or use static pre-rendering.
Stale Preview Cache Shows old headline/image after deploy Social platform CDN cache still active Invalidate via Facebook Debugger or LinkedIn Post Inspector.

For an in-depth walkthrough on cache purging, read How to Fix Cached Previews on LinkedIn & WhatsApp.

The Complete Technical SEO & Social Ecosystem

A world-class digital presence requires harmonizing social metadata, search engine rich results, crawl directives, and AI agent context:

  1. Live URL Inspection: Audit your production URLs with our Open Graph Inspector to detect missing properties before publishing.
  2. Twitter Card Generation: Ensure large banner rendering with our Twitter Card Generator.
  3. Structured Search Data: Unlock star ratings and FAQ rich snippets with our JSON-LD Schema Generator and validate with our Schema Inspector.
  4. Crawl Budget Management: Verify search engine bot permissions using our Robots Simulator and build compliant files with our Robots.txt Builder.
  5. AI Knowledge Architecture: Format repository knowledge for AI coding agents (Cursor, Claude Code, Windsurf) using the Open Knowledge Format (OKF) Generator and explore the OKF Developer Guide.

Generate and validate your full metadata stack with our free Open Graph Generator today!

More Articles
Advertisement

Related Articles

application/ld+json Explained: MIME Types, Syntax, and Search Engines

11 min read

Does Open Graph Help SEO?

6 min read

How to Create JSON-LD: Step-by-Step Developer Tutorial

11 min read