When someone shares your URL on Twitter, LinkedIn, Slack, or iMessage, the preview card that appears is controlled by Open Graph meta tags. Without them, platforms guess — often badly. This guide covers everything you need to know.
The Minimum Viable Set
Add these to every page's
``html
`
Plus Twitter Cards (needed separately):
<code>html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="One sentence description." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
</code>
The og:image Rules
This is the tag that matters most for click-through rate. Get it wrong and you get a broken preview.
- Size: 1200×630 pixels (the safe size that works across all platforms)
- Format: JPG or PNG — avoid WebP (inconsistent support)
- URL: must be absolute — https://example.com/img.jpg
, not /img.jpg - File size: under 1 MB
If you leave it out, platforms either show nothing or grab a random image from the page (usually something small and irrelevant).
og:type and Article Tags
For blog posts, use article type and add the article metadata:
<code>html
<meta property="og:type" content="article" />
<meta property="article:author" content="https://yoursite.com/about" />
<meta property="article:published_time" content="2024-05-31T10:00:00Z" />
<meta property="article:section" content="Technology" />
</code>
For everything else (tools, homepages, landing pages): use website.
Common Mistakes
1. Forgetting og:image — the biggest missed opportunity. Links without images get far fewer clicks.
2. Relative URLs for images — background: /images/og.jpg doesn't work. Must be absolute.
3. Titles over 70 characters — platforms truncate longer titles, sometimes mid-word.
4. Same image on every page — fine for the homepage, but article pages should have unique images.
5. Not refreshing the cache — social platforms cache metadata for hours or days. After changing OG tags, use Twitter's Card Validator or Facebook's Sharing Debugger to force a refresh.
Platform Compatibility
| Platform | Reads | Card Type |
|----------|-------|-----------|
| Facebook | og: | Large image |
| Twitter/X | twitter: (falls back to og:) | summary_large_image |
| LinkedIn | og: | Large image |
| Slack | og: | Inline preview |
| Discord | og: | Embeds og:video too |
| iMessage | og: | Small preview |
| WhatsApp | og: | Small preview |
Validate Before You Ship
Never deploy OG tag changes without validating:
- Twitter Card Validator: cards-dev.twitter.com/validator
- Facebook Sharing Debugger: developers.facebook.com/tools/debug/
- LinkedIn Post Inspector: www.linkedin.com/post-inspector/`
These tools show you exactly how your link will look and let you force a cache refresh.
For generating and previewing your meta tags without any coding, SnappyTools has free developer tools for HTML encoding, minification, and more — useful for cleaning up any special characters in your OG tag content with the HTML Entity Encoder.