🌐

OpenGraph & Twitter Card Meta Tag Generator

Generate Complete Social Sharing Metadata for Facebook, Twitter/X, LinkedIn & Messaging Apps

OpenGraph & Schema.org

📝 Page Metadata Details

0 / 60 chars
0 / 155 chars

📱 Live Social Card Previews

1200 × 630px Preview Image
EXAMPLE.COM
Page Title Preview Displays Here
Meta description summary snippet will display cleanly under the headline on Facebook and LinkedIn desktop & mobile feeds.

📋 Generated HTML Meta Tags (Paste into your <head>)

100% compliant with OpenGraph Protocol, Twitter Card specifications, and Google Webmaster guidelines.

The Complete Guide to OpenGraph Protocol & Twitter Cards

An architectural breakdown of OpenGraph (og:*) metadata protocols, Facebook crawler scraping rules, Twitter Card schemas, and 1200×630 pixel canvas specifications.

Universal Social Metadata Ecosystem: OpenGraph, Twitter Cards & Schema
📊 Figure 1: Universal Social Metadata Ecosystem: OpenGraph, Twitter Cards & Schema.org Rich Previews.

Core OpenGraph Meta Tags Explained

  • og:title: The bold headline shown on social feeds. Recommended length: 55–65 characters to prevent truncating on mobile devices.
  • og:description: A 2-sentence summary hook (130–160 characters). Do not repeat the title; provide context that encourages clicks.
  • og:image: The URL of the image displayed in the card. The golden ratio is 1200 × 630 pixels (1.91:1 aspect ratio) with file size under 5 MB.
  • og:url: The canonical URL of the page. Crucial for consolidating social engagement signals and preventing duplicate content splits.
  • og:type: Specifies the content category (website for homepages, article for blog posts, product for e-commerce).

WhatsApp Link Preview Caching Caveats

WhatsApp generates preview thumbnails directly on the sender's device. To ensure your image renders cleanly on WhatsApp:

  1. Keep the image file size strictly below 300 KB (WhatsApp will silently reject larger preview images).
  2. Always use an absolute HTTPS URL (e.g. https://yourdomain.com/og-image.jpg).
  3. Ensure the server returns standard image headers (Content-Type: image/jpeg or image/png).

Frequently Asked Questions

Standard HTML tags (<title> and <meta name="description">) are primarily consumed by search engine crawlers like Google and Bing. OpenGraph tags (prefixed with og:) were designed by Facebook and adopted globally by Twitter/X, LinkedIn, WhatsApp, Discord, and Slack to render rich visual link cards.

The industry gold standard is 1200 × 630 pixels (1.91:1 ratio). At this resolution, your card displays crisply as a full-width hero banner on high-DPI retina screens. The minimum allowable dimensions for a large card are 600 × 315 pixels.

Social media networks aggressively cache OpenGraph data for up to 30 days. To force Facebook to re-scrape your page, use the free Facebook Sharing Debugger and click "Scrape Again". For Twitter, share the URL in a test tweet to refresh the card cache.

Copy all generated tags and paste them inside the <head>...</head> section of your HTML document, immediately before your stylesheet links.