π Open Graph Preview Tool
See your link preview on every platform before you publish.
Previews
How to Use This Tool
Enter your page title, description, URL, and image to see exactly how the link preview renders on Facebook, LinkedIn, X, and Slack. Then copy the generated meta tags into your page's head section. Everything runs locally; no page is fetched.
Fill in the title (aim for under 60 characters), description (under 155), URL, and image URL.
Compare the Facebook and X previews side by side.
Copy the meta tags into your HTML head, then validate with each platform's debugger.
Essential Meta Tags
Open Graph tags (og:) are the universal standard that Facebook, LinkedIn, Slack, Discord, and most messengers read. Twitter Cards (twitter:) control X specifically; if absent, X falls back to OG tags. Always include both sets for consistent rendering.
Image Best Practices
Use 1200 Γ 630 px images: they render crisply on retina displays and meet every platform's minimum. Keep the file under 5 MB (under 1 MB is safer for messaging apps). Put key text and logos in the center safe zone, because platforms crop edges differently. Use absolute URLs (https://...) for images, since relative paths break when scrapers fetch the page.
Avoid text-heavy images: Facebook used to penalize images with more than 20 percent text in ads, and the habit stuck. A clean branded graphic with a short headline outperforms a screenshot of your homepage almost every time.
Worked Example
A blog post titled "10 Free SEO Tools" with a 1200 Γ 630 branded image: the Facebook preview shows the image, domain, bold title, and two-line description. On X with summary_large_image, the layout is nearly identical but with X's rounded corners and typography. After publishing, paste the URL into Facebook's Sharing Debugger and X's Card Validator to force a fresh scrape, since both cache previews aggressively.
Troubleshooting
Wrong image showing? Clear the platform cache with its debugger tool; old scrapes persist for days otherwise. No image at all? Check that the image URL is absolute, publicly accessible (not behind login), and returns the right content type. Description truncated? Keep it under 155 characters for Facebook and under 200 for X.
Frequently Asked Questions
What are Open Graph tags?
Meta tags (og:title, og:description, og:image, og:url) that tell Facebook, LinkedIn, Slack, and other platforms how to display your link preview. Without them, platforms guess, often badly.
What image size should I use for link previews?
1200 Γ 630 pixels minimum. This renders sharply on all platforms including retina displays. Keep it under 5 MB and use an absolute https:// URL.
What is the difference between Open Graph and Twitter Cards?
Open Graph is the universal standard most platforms read. Twitter Cards are X-specific tags; X falls back to OG tags if Twitter tags are missing. Include both for best results.
Why is my link preview showing the wrong image?
Platforms cache previews aggressively. Use Facebook's Sharing Debugger or X's Card Validator to force a re-scrape after fixing your tags. Also verify the image URL is absolute and publicly accessible.
How long should the og:description be?
Under 155 characters for Facebook/LinkedIn, under 200 for X. Longer text gets truncated with an ellipsis, so front-load the key message.