π Open Graph Preview
See your link card on Facebook, X, and LinkedIn before you publish.
X (Twitter)
Everything runs in your browser. Your content never leaves your device.
How to Use This Tool
Enter the title, URL, description, and image URL exactly as they appear in your page meta tags. The tool renders approximations of the Facebook link post, the X large-image card, and the LinkedIn article card, and warns you when your title or description is long enough to get truncated.
Enter your og:title, or the page title if you have not set a separate one. Keep it under 60 characters.
Enter the page URL. The cards show the domain the way each platform displays it.
Enter your og:description. One to two compelling sentences, under 160 characters, is the safe zone.
Paste your og:image URL (1200 by 630 pixels works best), or leave it empty to see the placeholder and check the text-only layout.
Compare all three cards, fix any truncation warnings, then publish with confidence.
The Tags Behind the Cards
These five tags control nearly everything you see in the previews. og:title and og:description are the copy; keep them tight because every platform truncates at a slightly different point, and the tool flags anything over the safe limits. og:image does most of the visual heavy lifting: posts with a large, relevant image earn far more engagement than text-only links, which is why the placeholder state is worth checking too. og:url prevents duplicate-content confusion when a page is reachable at multiple addresses. The twitter:card tag is the only X-specific tag most sites need, since X falls back to your Open Graph tags for everything else.
Worked Example
Sample post: title "10 Small Kitchen Storage Ideas That Actually Work" (49 characters), URL https://example.com/blog/small-kitchen-storage-ideas, description "Short on kitchen space? These 10 storage ideas, from magnetic spice racks to over-door organizers, can double your usable space without a remodel." (146 characters), no image URL. The title passes the 60-character check on all three platforms, so it renders in full. The description passes the 160-character check, so no truncation warning appears. With no image URL, all three cards show the branded placeholder, which is a useful reminder of how much visual weight the image carries: the same post with a 1200 by 630 photo of an organized kitchen would dominate the feed far more than the text-only version. Add the image URL and re-run the preview to see the difference before publishing.
Fixing Common Preview Problems
If your image does not show when you share, the platform almost certainly cached an old scrape: paste the URL into the Facebook Sharing Debugger or the X Card Validator and hit re-scrape. Use absolute https URLs for og:image, never relative paths, because scrapers resolve them unpredictably. Keep critical text away from the image edges, since feeds crop differently on mobile and desktop. If the wrong image appears, check that only one og:image tag exists and that it comes before any other image meta tags. And remember that messaging apps like WhatsApp, Slack, and Discord read the same Open Graph tags, so fixing your tags improves every share surface at once.
Frequently Asked Questions
What is Open Graph?
Open Graph is a protocol Facebook introduced in 2010 that lets any web page become a rich object in a social graph. In practice, it is a set of meta tags in your page HTML, like og:title, og:description, and og:image, that tell Facebook, X, LinkedIn, Slack, Discord, and most other platforms what title, summary, and image to show when someone shares your link. Without these tags, each platform guesses, and the guess is often ugly.
What size should my og:image be?
Use 1200 by 630 pixels, the size Facebook recommends and the one that renders crisply on high-density screens across Facebook, X, and LinkedIn. Keep the file under a few megabytes (JPG or PNG both work) and put any important text or logos in the center safe zone, because some platforms crop the edges. The absolute minimum most platforms accept is 200 by 200 pixels, but small images render as thumbnails instead of the large card style.
Why is my image not showing when I share?
The usual culprits: the platform cached an older version of your page (use the Facebook Sharing Debugger or the X Card Validator to force a re-scrape), your og:image uses a relative URL instead of a full https URL, the image is smaller than the platform minimum, or your server blocks the platform crawler in robots.txt. Also check that the image URL is publicly reachable: images behind a login or hotlink protection will not render.
What is the difference between og:title and the page title?
The page title (the title tag) is written for search engines and browser tabs, while og:title is written for humans scrolling a social feed. They can be identical, and if og:title is missing the platform falls back to the title tag. Many publishers set a slightly punchier, more curiosity-driven og:title for social while keeping the keyword-focused title tag for Google. If you only set one, make it serve both masters.
Do I need Twitter card tags separately?
Mostly no. X (Twitter) falls back to your Open Graph tags when twitter: tags are missing, so og:title, og:description, and og:image are enough for a basic card. The one tag worth adding is twitter:card set to summary_large_image, which guarantees the large-image card style instead of the small thumbnail style. If you want a different image or copy on X than on Facebook, then add the full set of twitter: tags.