Complete Guide to Open Graph Tags
Everything you need to know about OG tags for perfect social media previews
Introduction
In the digital age, how your content appears when shared on social media can be the difference between a click and a scroll. Open Graph (OG) tags are the secret sauce behind attractive, clickable link previews. Originally created by Facebook in 2010, the Open Graph protocol has become the standard for controlling how URLs are displayed when shared online.
Why OG Tags Are Important
1. Increased Click-Through Rates
Studies show that links with rich previews receive up to 2x more engagement than plain text links.
2. Brand Control
Without OG tags, social platforms will guess what to display. With OG tags, you decide exactly what image, title, and description represent your content.
3. Professional Appearance
A well-formatted link preview signals quality and trustworthiness.
4. Cross-Platform Consistency
OG tags ensure your content looks the same whether shared on Facebook, LinkedIn, Twitter, or messaging apps.
Pro Tip
Links with optimized OG tags can increase social media traffic by up to 150%.
Platform-Specific Tags
Twitter Cards
Twitter (now X) has its own meta tags. While it falls back to OG tags, Twitter-specific tags give you more control.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.png" />LinkedIn uses OG tags but requires images at least 1200x627 pixels for best appearance.
WhatsApp & Telegram
WhatsApp and Telegram also use OG tags but cache previews aggressively.
Best Practices
| Platform | Size | Ratio |
|---|---|---|
| 1200 x 630px | 1.91:1 | |
| 1200 x 628px | 1.91:1 | |
| 1200 x 627px | 1.91:1 | |
| 1200 x 630px | 1.91:1 |
- Title: 60-90 characters (Facebook truncates at ~88)
- Description: 150-200 characters for full display
- URL: Use clean, readable URLs when possible
Common Mistakes to Avoid
1. Missing og:image
The image is the most eye-catching element. Without it, your link looks incomplete.
2. Using Relative URLs
Always use absolute URLs starting with https://.
3. Wrong Image Dimensions
Images too small or wrong aspect ratio may be cropped or not displayed.
4. Not Testing Across Platforms
Each platform renders previews differently. Always test.
5. Ignoring Cache
Platforms cache previews. Use debuggers to force refresh after changes.
Testing Tools
Before publishing, validate your OG tags using these official tools:
Frequently Asked Questions
What are Open Graph tags?
Meta tags that control how your URL appears when shared on social media, defining title, description, and image.
Why is my og:image not showing?
Common issues: image too small (min 200x200px), relative URL, file too large (max 8MB), or cached old version.
Can I use SVG for og:image?
No, Facebook and most platforms don't support SVG. Use PNG or JPEG.