What this tool checks
Enter a URL and the tool fetches the page, reads its Open Graph meta tags, and renders a card preview for each of the four platforms. X (Twitter), Facebook, and LinkedIn each crop, truncate, and display the tags differently. Slack adds its own quirks. What looks perfect on one can break on another — and you won't know until someone pastes the link.
Below each card preview, the tool lists which required tags are present and which are missing or flagged: og:title, og:description, og:image, og:url, and the Twitter Card type. Missing tags show the fallback behavior — what the platform actually displays when that tag isn't there.
How each platform reads the same OG tags differently
All four platforms read the same og: meta tags from your HTML. They don't display them the same way, and the differences matter more than most people expect.
X (Twitter) reads twitter:card, twitter:title, and twitter:image first, then falls back to og: equivalents if the Twitter-specific tags are absent. The twitter:card type controls card size: summary gives a small square thumbnail, summary_large_image gives the full-width card most people expect. If this tag is missing, X defaults to summary — a tiny thumbnail instead of the large image you designed. That surprises a lot of developers.
Facebook uses og:image and crops it to a 1.91:1 ratio (about 1200×628px). Square images get pillarboxed or cropped. The minimum usable size is 600×315; anything smaller gets replaced with a plain text card. og:description appears below the title in smaller text and truncates around 200 characters.
LinkedIn has the same 1.91:1 crop preference but is stricter about dimensions: images below 1200px wide often don't display at all, rendering a text-only card instead. LinkedIn also ignores twitter: tags completely — only og: tags work there. Slack runs its own web crawler (Slackbot-LinkExpanding) that doesn't execute JavaScript, needs a minimum image size of 200×200px, and truncates titles at around 70 characters. If your OG tags are set by React or any JavaScript that runs client-side, Slack will show a plain URL with no preview — it only reads the raw HTML source.
The Open Graph tags that control every preview
Four tags are required for a complete preview across all platforms. Get these right and you're most of the way there.
og:title is the headline of your card. Keep it under 60 characters; longer titles truncate differently on each platform and often cut mid-word. Don't repeat your page URL or domain — it's shown separately.
og:description is the supporting text below the title. Two to three sentences, around 200 characters. If this tag is missing, platforms pull the first paragraph of body text, which is usually the wrong thing to show. (This is a common mistake on documentation sites where the first paragraph is a navigation note or a breadcrumb.)
og:image is the preview image. Use an absolute URL — https://yourdomain.com/images/og.jpg, not /images/og.jpg. The recommended size is 1200×630px at 72dpi. SVG images aren't supported by any of the four platforms; use JPEG or PNG. The image must be publicly accessible — images behind authentication or blocked by robots.txt won't appear in any preview.
og:url is the canonical URL of the page. This is what gets used when someone clicks the card. If you have multiple URLs serving the same content (www vs non-www, trailing slash vs none), set this to the canonical version.
One additional tag worth adding: og:image:width and og:image:height. These dimension hints let social crawlers skip the size check on first crawl, which speeds up preview generation and reduces the chance of your image appearing broken on the first share.
Why your OG image isn't showing up
This is the most common reason someone searches for an OG image preview tool. Six things break OG images regularly, and they're not always obvious from the developer console.
The most common culprit: the tag isn't in the HTML source because it's set by JavaScript. React, Next.js without SSR, and most SPAs that set meta tags in useEffect or componentDidMount only inject those tags after the page runs in the browser. Social crawlers don't execute JavaScript. Check your page source (Ctrl+U or Cmd+U) and search for "og:image" — if it's not in the raw HTML, no crawler will see it. The fix is server-side rendering or a static HTML template.
Second most common: a relative URL. og:image content="/images/share.jpg" looks valid but is technically wrong for OG. Many platforms resolve it anyway, but some don't. Always use the full absolute URL.
After a fix, you'll often run into platform cache. Facebook holds previews for up to 24 hours, LinkedIn for up to 7 days. Facebook has a Sharing Debugger tool that clears the cache when you "scrape again"; LinkedIn has a Post Inspector. Slack typically refreshes on the next unfurl, but links shared in existing conversations keep the old preview indefinitely.
Other issues that come up: image file size over the platform limit (typically 8MB for Facebook, 5MB for others — compress your og:image to under 500KB), image blocked by a CDN or WAF (Slackbot-LinkExpanding, facebookexternalhit/1.1, and LinkedInBot need to be whitelisted if you're running aggressive bot filtering), and wrong dimensions specifically for LinkedIn (requires 1200px minimum width — an 800×420px image shows as text-only on LinkedIn even if it displays fine everywhere else).
FAQ
1200×630px (1.91:1 ratio) is the safe universal size for all four platforms. Facebook minimum is 600×315; LinkedIn requires at least 1200px wide or the image won't display at all. X (Twitter) with summary_large_image crops to 2:1, so your image should have the important content centered with margin to spare. Use JPEG or PNG — SVG is not supported by any platform.
Usually a dimensions issue. LinkedIn requires the image to be at least 1200px wide. An 800×420px image will display fine on Twitter (which accepts smaller sizes) but renders as a text-only card on LinkedIn. Check your og:image URL by opening it directly in a browser to confirm it's accessible, then verify the dimensions. Also confirm you have og:image:width and og:image:height tags — they help LinkedIn resolve the image faster.
Most likely because your OG tags are set by JavaScript. Slack's crawler (Slackbot-LinkExpanding) does not execute JavaScript — it reads only the raw HTML source. If your meta tags are injected by React, Vue, or any client-side framework, Slack won't see them. The fix is server-side rendering: set og:image in your HTML template before serving it, not in a useEffect or componentDidMount. Also check that Slackbot isn't blocked by your firewall or WAF.
Each platform has its own cache-busting method. Facebook: use the Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again" — it forces a fresh crawl and clears the cache immediately. LinkedIn: use the Post Inspector (linkedin.com/post-inspector) and enter your URL. For Slack, deleting and re-pasting the link in a new message usually triggers a fresh unfurl. There's no universal fix for links already shared in existing conversations — those keep the cached version.
Yes, if you want full control over how your links look on X. Twitter reads twitter:card, twitter:title, twitter:description, and twitter:image first, then falls back to og: equivalents. Without twitter:card, X defaults to a summary card (small square thumbnail) regardless of how large your og:image is. Add <meta name="twitter:card" content="summary_large_image"> to get the full-width card.
Platform cache is the most common reason. If you recently added or changed OG tags on a URL that was previously shared, the platform has a cached version of the old state. This tool fetches the page fresh each time, so it shows the current state of your tags — which may be correct even though the shared preview still looks old. Use the platform-specific cache-clearing tools: Facebook Sharing Debugger, LinkedIn Post Inspector. For a brand-new URL, give it 2-5 minutes before the first share for crawlers to process it.
Each platform falls back differently. Facebook and LinkedIn use the HTML <title> tag. X uses the page title from the <title> tag as well. Slack shows the page title in smaller text. None of these fallbacks are ideal — the <title> tag is usually optimized for browser tabs and Google search, not social sharing. Always set og:title separately, written specifically for the platform context.