You built a beautiful website. You deployed it. Ideally, you pasted the link into Slack or WhatsApp to share it with the world... and it looked like this:
localhost:3000 No description available.
Or maybe it showed a random image from your footer instead of your hero banner. This is the nightmare of broken Link Previews, and it kills your click-through rate (CTR) before users even see your site.
The solution is the Open Graph Protocol, a standard created by Facebook in 2010 that has become the universal language of link previews. In this guide, we'll cover exactly which tags you need to make your links look premium on every platform.
What is Open Graph?
The Open Graph protocol enables any web page to become a rich object in a social graph. Basically, it tells social media platforms exactly what title, description, and image to display when your link is shared.
Without these tags, crawlers guess. And they are terrible guessers.
The 4 Essential Tags (The "Must-Haves")
If you only add four lines of code to your <head>, make it these four.
1. og:title
The headline of your object. It should be catchy and concise.
<meta property="og:title" content="The Ultimate Guide to Open Graph Tags" />
Pro Tip: Keep it under 60 characters to avoid truncation.
2. og:description
A one-to-two sentence description of your object. This is your elevator pitch.
<meta property="og:description" content="Master link previews on Twitter, LinkedIn, and WhatsApp." />
3. og:image (The Most Critical Tag)
This is the single most important factor for CTR. A large, high-quality image makes your link pop in a feed.
<meta property="og:image" content="https://katsau.com/images/og-guide.png" />
Common Pitfall: Many platforms (especially WhatsApp) are picky about image size and dimensions.
- Recommended Size: 1200 x 630 pixels (1.91:1 aspect ratio).
- File Size: Keep it under 5MB for Twitter/Facebook, but under 300KB for WhatsApp to be safe.
Tool Tip: Not sure if your image will work? Test it with our free Facebook Link Preview or WhatsApp Link Preview tools.
4. og:url
The canonical URL of your object. This helps consolidate likes/shares if you have multiple URLs pointing to the same content.
<meta property="og:url" content="https://katsau.com/blog/ultimate-guide-open-graph" />
Platform-Specific Quirks (The "Gotchas")
While Open Graph is the standard, every platform implements it slightly differently.
Twitter (X) Cards
Twitter uses its own twitter:card property but falls back to Open Graph if not present. For the best look, explicitly define a "Large Summary Card".
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@katsauapi" />
Debug It: Use our Twitter Card Validator to see exactly how your card renders on X.
LinkedIn Caching
LinkedIn caches your link preview data aggressively (up to 7 days). If you update your image, LinkedIn won't show the new one. Fix: You need to force a re-scrape. You can use our LinkedIn Post Inspector to verify the fresh data is being picked up.
WhatsApp & iMessage
These platforms are unique because they often don't render the preview if the image file size is too large or if the server response is too slow.
- WhatsApp: Requires a square or landscape image, ideally < 300KB.
- iMessage: Often looks for a high-res
og:imagebut falls back to theapple-touch-icon.
Check It: Preview your links specifically for chat apps using our new WhatsApp Link Preview and Telegram Link Preview tools.
Testing & Debugging Workflow
Manual testing is slow. You don't want to post a link to your real Twitter profile just to see if it works.
The Pro Workflow:
- Develop Local: Use standard meta tags in your
layout.tsxor HTML head. - Verify: Use the Katsau Debugger to check all platforms at once.
- Monitor: Use the Katsau API to programmatically check your user-generated content for valid meta tags.
Conclusion (+ Cheat Sheet)
Don't let broken link previews ruin your launch. A few minutes of setting up proper og tags pays dividends forever in CTR and brand perfection.
Copy-Paste Cheat Sheet:
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:title" content="Your Headline" />
<meta property="og:description" content="Your Description" />
<meta property="og:image" content="https://example.com/image.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/" />
<meta property="twitter:title" content="Your Headline" />
<meta property="twitter:description" content="Your Description" />
<meta property="twitter:image" content="https://example.com/image.png" />
Ready to automate this? Try the Katsau API to extract and verify metadata for any URL in milliseconds.
Try Katsau API
Extract metadata, generate link previews, and monitor URLs with our powerful API. Start free with 1,000 requests per month.