Open Graph Tags for Link Previews: Control What People See
Whenever your link is shared on Slack, WhatsApp, LinkedIn, Discord, Twitter, or in iMessage, the platform fetches the page and reads its Open Graph (OG) tags to build the preview card. Set these tags well, and your link looks professional. Skip them, and you get a mess of stripped meta or no preview at all.
The minimum tags you need
<meta property="og:title" content="How to Make a Phone Number Clickable" />
<meta property="og:description" content="Wrap the number in a tel: link. Country codes, extensions, device behavior — full guide." />
<meta property="og:image" content="https://example.com/preview.jpg" />
<meta property="og:url" content="https://example.com/article/clickable-phone" />
<meta property="og:type" content="article" />Five tags. Drop them in your <head>. Every social platform reads them.
Image specs that work everywhere
| Spec | Recommended |
|---|---|
| Aspect ratio | 1.91:1 (landscape) |
| Recommended size | 1200 × 630 px |
| Minimum size | 600 × 315 px |
| Maximum file size | 8 MB (most platforms) |
| Format | JPG or PNG (WebP often supported, sometimes not) |
| Image URL | Absolute, HTTPS |
Use 1200 × 630 px JPG. That’s the sweet spot — Slack, Discord, WhatsApp, LinkedIn, Facebook, X all render it cleanly.
Twitter / X-specific tags
X uses Twitter Card tags as a fallback or override:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="..." />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="..." />If you skip the Twitter tags, X falls back to OG tags. So minimal setup:
<meta name="twitter:card" content="summary_large_image" />Plus the OG tags above. Done.
Type-specific tags
| og:type | Use for |
|---|---|
article | Blog posts, news |
website | Marketing pages |
video.movie / video.episode | Video content |
music.song / music.album | Audio content |
book | Books and ebooks |
profile | Personal profile pages |
For most sites, article for posts and website for everything else covers 99% of needs.
Article-specific tags
If you set og:type=article, you can add:
<meta property="article:published_time" content="2026-08-04T10:00:00Z" />
<meta property="article:author" content="Jane Doe" />
<meta property="article:section" content="Marketing" />
<meta property="article:tag" content="seo" />Some platforms use article:published_time to show “Published 2 hours ago” on the preview card.
How to test your preview
- Facebook Sharing Debugger (developers.facebook.com/tools/debug) — most reliable. Forces a re-fetch.
- LinkedIn Post Inspector — for LinkedIn-specific render issues.
- Twitter Card Validator (now Card validator inside developer.twitter.com) — for X.
- Slack: just paste the link in any channel. Slack fetches in real-time.
- WhatsApp: paste in a chat with yourself.
Always test in at least Facebook + Slack before announcing a launch.
The “stale cache” problem
Most platforms cache OG data for 7-30 days. If you change the OG tags after sharing, the platforms still show the old preview. Solutions:
- Facebook: Use the Sharing Debugger to scrape again — clears their cache.
- LinkedIn: Post Inspector → “Refresh.”
- Slack / Discord: Add a query parameter to the URL (e.g.,
?v=2) — they treat it as a new URL. - WhatsApp: No way to refresh. Add a parameter.
Common mistakes
- Relative image URLs.
og:imagemust be absolute (https://...). - HTTP image on HTTPS page. Mixed content. Some platforms reject.
- Image behind a login or paywall. Crawlers can’t fetch it. Preview breaks.
- Image too small. Under 600 × 315 and the preview falls back to a tiny thumbnail.
- Title and description too long. OG title is best at ~60 characters; description at ~110-160.
- Forgetting the
og:urltag. Some platforms use it as the canonical URL for the share.
Per-page or one-template approach?
Best practice: per-page OG data. Each blog post gets its own image, title, description. WordPress plugins (Yoast, Rank Math) auto-generate this. For static sites, use templating.
One-template approach (same OG image site-wide) is fine for marketing pages but loses you per-post differentiation in shares.
What about WhatsApp’s specific behavior?
WhatsApp ignores some OG tags and uses its own logic:
- Reads
og:title,og:description,og:image. - Caches aggressively — once shared, hard to refresh.
- Strips
og:imageURLs that take longer than 5 seconds to load. - Prefers PNG/JPG; sometimes refuses WebP.
If your WhatsApp previews break, suspect image load speed or format.
FAQ
Do OG tags affect SEO?
Indirectly. They affect click-through from social shares, which drives traffic, which is correlated with SEO. Google itself doesn’t use OG tags for rankings.
Can I have different images for different platforms?
Yes — use Twitter-specific tags to override OG for X, and the OG tags work for everywhere else.
Does it work on iMessage?
Yes — iMessage reads OG tags to build link previews. Apple’s caching is similar to WhatsApp’s.
How big should my image file be?
Aim for under 1MB to ensure fast loading. Compress aggressively — JPG quality 75-85 looks fine and saves bandwidth.
What if I don’t have an image?
Most platforms fall back to a generic preview without an image. The card looks worse but still functions. Always include an image when possible.
Track which previews convert
Add UTMs to the shareable URL so you can see which campaigns generate the most click-throughs from previews. The UTM link generator handles tagging.