When you share a link on Facebook, LinkedIn, X, Slack, WhatsApp, Telegram, or Discord, the platform sends a crawler to read the Open Graph (OG) tags on your page. These tags determine whether your link appears as a rich card or a boring plain URL. According to MetaHead: "Without OG tags, platforms either ignore the preview or guess a title and pick a random image from the page." In 2026, this has become even more critical because AI systems like ChatGPT and Perplexity also read OG tags as a high-confidence source for understanding content.
What Are Open Graph (OG) Tags?
Open Graph is a protocol developed by Facebook in 2010 that allows any web page to become a rich "object" on social networks. By adding HTML tags in your page's <head>, you control the title, image, and description that appear when your link is shared.
Where do OG tags appear? - Facebook - LinkedIn - X (formerly Twitter) - Slack - WhatsApp - Telegram - Discord - iMessage - ChatGPT / Perplexity (for citation)
The Four Essential Tags
og:title — Share Title The most important element in the preview card. It differs from the regular <title> for SEO. og:title can be more curiosity-driven and less keyword-dense. Keep it to 60 characters max.
og:description — Share Description 2-4 sentences below the title. Around 150-200 characters before truncation. Make it actionable: tell the reader what they'll find when they click.
og:image — Share Image The strongest attention-grabbing element. Recommended size: 1200x630 pixels (1.91:1 ratio). Format: JPG or PNG. Size: under 1MB if possible.
og:url — Canonical Link Tells the platform which URL is authoritative for aggregating interactions and shares. Always use the clean URL without UTM parameters.
Recommended Tags
og:type: Content type: website (most common), article (for articles), product (for products). When using article, additional tags like article:published_time and article:author become available.
og:site_name: Your brand name.
og:image:width / og:image:height: Prevents preview delays because the crawler needs to determine dimensions.
og:image:alt: Alternative text for the image (accessibility + better understanding for SEO).
Image Sizes for Different Platforms
| Platform | Recommended Size | Ratio |
|---|---|---|
| 1200x630 | 1.91:1 | |
| 1200x627 | 1.91:1 | |
| X (Twitter) | 1200x675 | 16:9 |
| 1200x630 | 1.91:1 | |
| Discord | 1200x630 | 1.91:1 |
Twitter Cards
X (formerly Twitter) uses its own meta tags (Twitter Cards) that partially overlap with OG. There are 3 types: summary (small image), summary_large_image (large image), and app (for app downloads). Best practice: implement both OG and Twitter Cards — they work together.
How to Implement in Next.js
Use the metadata API in Next.js 14+ to dynamically generate OG tags per page. Set a default OG image for pages without specific images. Use generateMetadata() for dynamic page-level OG data.
Common Open Graph Mistakes
- Missing og:image — the most common and costly mistake
- Wrong image dimensions (too small, wrong ratio)
- Missing og:title (platform falls back to <title>)
- Cached previews not updated after changes
- Different og:url than canonical URL
- No Twitter Cards alongside OG tags
Validation and Debugging Tools
- Facebook Sharing Debugger: Force refresh cached previews
- LinkedIn Post Inspector: Validate LinkedIn previews
- Twitter Card Validator: Check Twitter Cards
- Waxbix SEO Tool: Audit all OG tags across your site