You share a link in Slack and it shows a beautiful preview card with an image, a bold title, and a clear description. You share a different link and it shows nothing — just the raw URL. The difference is Open Graph tags.
Open Graph (OG) is a protocol created by Facebook in 2010 that's now the universal standard for controlling how URLs unfurl across social networks, messaging apps, and collaboration tools. Every major platform reads them: LinkedIn, Twitter/X, WhatsApp, Telegram, Discord, Slack, iMessage, and Facebook itself.
Preview Your Open Graph Tags
Open Graph Preview
Preview how URLs appear when shared on social media.
Generate the Meta Tags
Meta Tag Generator
Generate high-quality meta tags for better SEO rankings.
The Essential Open Graph Tags
These four are required for a basic preview to work on every platform:
<head>
<meta property="og:title" content="How to Compress a PDF Without Losing Quality">
<meta property="og:description" content="Large PDFs slowing you down? Compress them privately in your browser.">
<meta property="og:image" content="https://yourdomain.com/og-images/compress-pdf.jpg">
<meta property="og:url" content="https://yourdomain.com/blog/compress-pdf-guide">
</head>
og:title — The headline shown in the preview card. Aim for 60–70 characters. This can differ from your HTML <title> — it's often better to make the OG title more social-friendly.
og:description — The summary text under the title. 150–200 characters. Make it a hook, not just a repeat of the title.
og:image — The preview image. This has the biggest impact on click-through rate. No image = generic grey box = poor engagement.
og:url — The canonical URL of the page. Prevents tracking parameters from creating duplicate previews.
OG Image Specifications by Platform
Different platforms display OG images differently. Design for 1200×630px to satisfy all of them:
| Platform | Recommended Size | Aspect Ratio | Min Size |
|---|---|---|---|
| 1200×630 | 1.91:1 | 600×315 | |
| 1200×627 | 1.91:1 | 1200×627 | |
| Twitter/X | 1200×628 | 1.91:1 | 300×157 |
| 1200×630 | 1.91:1 | 400×209 | |
| Discord | 1200×630 | 1.91:1 | Any |
| Slack | 1200×630 | 1.91:1 | Any |
Important: The image URL must be an absolute URL (starting with https://) — not a relative path. Social crawlers don't have a base URL context.
Image format: JPEG or PNG. WebP is not universally supported by all social crawlers.
Twitter Card Tags
Twitter/X uses its own card system that extends Open Graph. Always add these alongside OG tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title Here">
<meta name="twitter:description" content="Your description here.">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">
twitter:card has four values:
summary— small thumbnail, text on the sidesummary_large_image— full-width image above the text (most impactful)app— for app download cardsplayer— for video/audio embeds
Always use summary_large_image for article and blog content.
The Complete Tag Set for Articles
<!-- Open Graph core -->
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Your description.">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article-url">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
<!-- Article-specific -->
<meta property="article:published_time" content="2026-05-17T00:00:00Z">
<meta property="article:author" content="https://yourdomain.com/about">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:creator" content="@authorhandle">
Why Your Preview Might Look Wrong
Cached preview. Social platforms cache OG data aggressively. If you update tags, old previews may appear for hours. Use the platform's debugging tools to force a refresh:
- Facebook: developers.facebook.com/tools/debug
- LinkedIn: linkedin.com/post-inspector
- Twitter: cards-dev.twitter.com/validator
Relative image URL. The most common mistake — og:image must be an absolute URL.
Image too small. Images below 200×200px are ignored by most platforms.
Missing tags. A page with no OG tags at all usually shows a preview with just the page title and URL — no image, no description.
GEO Considerations for Social Sharing
- India (WhatsApp-heavy market): WhatsApp is the primary sharing channel in India. WhatsApp's crawler reads standard OG tags. Ensure
og:imageis optimized for mobile display since most Indian social sharing happens on mobile. - EU markets (LinkedIn-heavy professional sharing): LinkedIn is the dominant professional sharing platform in Europe. LinkedIn's crawler respects OG tags but is stricter about image dimensions — always include
og:image:widthandog:image:height. - US/global (Twitter/X, Slack):
summary_large_imagecard type with a bold, high-contrast OG image drives significantly higher engagement than small thumbnails.
Frequently Asked Questions
Do Open Graph tags affect SEO?
Not directly — Google doesn't use OG tags as ranking factors. But they significantly affect click-through rate on social media, which drives traffic and indirectly signals content quality to search engines.
Can I use different titles for OG and HTML?
Yes — og:title and <title> are independent. Your HTML title might be optimized for search ("How to Compress a PDF | FluxToolkit") while your OG title is optimized for social engagement ("Compress PDFs Instantly — Free, Private, Browser-Based").
How often do social platforms re-crawl OG tags?
Rarely — usually only when a URL is shared again. Don't rely on automatic updates. Use the platform debugging tools to force a fresh crawl after updating OG tags.
What is og:type and what values should I use?
For articles: article. For homepages and generic pages: website. For products: product. The type signals to platforms what kind of content the URL represents.
Does FluxToolkit store the URLs or metadata I preview?
No. The Open Graph preview tool runs in your browser. Your URLs and metadata are never sent to our servers.
Related Articles
- Meta Tags Explained: Title Tags and Meta Descriptions — Optimize your core SEO meta tags alongside Open Graph tags.
- UTM Parameters Explained — Track traffic from social shares with UTM links.
- Robots.txt Explained — Ensure social crawlers can access your OG-tagged pages.