OG Preview
Preview how your page looks when shared on Facebook, X, LinkedIn, WhatsApp & Slack. Generates ready-to-paste Open Graph + Twitter Card tags.
OG Preview
Browsers block cross-origin reads — paste tags by hand for now.
How to use OG Preview
Fill in your page details
Type the URL, title, description, and image URL of the page you want to share. Leave fields blank to see what default cards look like.
Pick your card type
summary_large_image is the modern wide card used by most blogs. summary is the compact square thumbnail variant some publishers still prefer.
Watch the five previews update live
Facebook, X, LinkedIn, WhatsApp, and Slack each render slightly differently — fix any obvious issues (truncation, missing image) before publishing.
Copy the meta tags
Click Copy tags and paste into your page's <head>. Re-test using Facebook Sharing Debugger and X Card Validator after deploy.
Open Graph & Twitter Cards — What Actually Renders
Open Graph is a set of <meta> tags Facebook introduced in 2010 so that any URL pasted into a feed could carry a title, description, and image instead of a naked link. Every major social platform — including ones that competed bitterly with Facebook — adopted it within a few years, because the alternative was bad-looking link previews and lower engagement. Today, Open Graph is the de facto contract between content publishers and link-sharing surfaces: chat apps, search engines, embed cards, RSS readers, even AI summarisers read these tags first when they encounter a new URL.
The four tags that matter most
og:title, og:description, og:image, and og:url carry almost all the weight. Get those right and you have a working card on every platform. Twitter/X layers a parallel twitter:card family on top — usually summary_large_image for a wide hero, or summary for a compact square thumb. If Twitter-specific tags are missing, X falls back to the Open Graph values, so you only need the twitter: prefix when you want X to display something different from Facebook.
Most "broken share cards" come from one of three things: missing og:image, a cached old version on Facebook, or an image that fails to load over HTTPS.
Image dimensions that work everywhere
Aim for 1200×630. That is the size Facebook recommends, fits X's wide card without cropping, displays cleanly on LinkedIn, and survives WhatsApp's compression. Anything smaller than 600×315 gets demoted to the small-thumb variant on Facebook, and images under 200×200 are ignored outright by several platforms. Stay under 5 MB and use JPEG or PNG — modern WebP works on most surfaces but a few legacy crawlers still choke on it.
The APAC sharing landscape — five platforms, five layouts
Across APAC, the platform mix is fragmented enough that you cannot optimise for one card and call it done. Singapore, Malaysia, Australia, and the Philippines are heavy on WhatsApp and Facebook for link-sharing, with X used by media and tech professionals. Japan and South Korea rely on LINE and KakaoTalk respectively (both consume Open Graph tags the same way WhatsApp does — small thumb left, text right). China uses WeChat almost exclusively, and WeChat reads a different set of tags entirely (wxcards: and JS-SDK hooks), but standard OG still serves the international audience hitting your site from outside the firewall. Indonesia and Vietnam lean heavily on Facebook and TikTok in-app browsers, while India sees a roughly even split between WhatsApp, X, and LinkedIn for professional content. Slack and Microsoft Teams dominate workplace sharing across all of these markets — and both read standard Open Graph.
Why your card looks fine here but broken on Facebook
Facebook aggressively caches the OG response on first scrape. If you change og:image and re-share, Facebook will still show the old image — sometimes for weeks. The fix is the Facebook Sharing Debugger, which lets you force a re-scrape. X has an equivalent Card Validator. LinkedIn caches for around 7 days and has its own Post Inspector. WhatsApp and Slack cache for hours to days depending on whether the link has been shared before. Always test in the debugger after a meta-tag change rather than trusting what shows up in your own feed.
One more thing: og:url and canonicals
The og:url tag should match your canonical URL exactly. If your page is reachable at both example.com/post and example.com/post?utm_source=newsletter, set og:url to the clean canonical version. Facebook deduplicates engagement metrics (likes, shares) per og:url — if every newsletter share has a different URL, you fragment your social proof across dozens of "different" pages. Same goes for trailing slashes — pick one and stick with it.
10 Things You Didn't Know About Social Cards
Open Graph was introduced at Facebook's f8 developer conference in April 2010 — alongside the original "Like" button.
The recommended og:image ratio of 1.91:1 (1200×630) comes from Facebook's News Feed card height — designed in 2014 and never changed.
X processes about 500 million tweets a day and renders Twitter Cards for the link-bearing ones — roughly 100 million card-fetches daily.
WhatsApp's "link preview" only loads if the URL passes a malware check first — most spam URLs render as plain blue text instead of a card.
LinkedIn caches your og:image for 7 days. If you change it, use the LinkedIn Post Inspector to force a re-scrape.
Slack uses an "unfurling" service called iconservice that scrapes every URL pasted into a channel — even DMs, even private channels.
WeChat in China ignores standard Open Graph entirely — pages use the JS-SDK to set custom share metadata at runtime.
LINE (dominant in Japan, Taiwan, Thailand) reads standard og: tags but truncates titles at 50 full-width characters, not Western 65.
iMessage on iOS renders link previews via a private framework called LinkPresentation that reads Open Graph + a few Apple-specific Schema.org fields.
Discord shows the og:image even for URLs that don't intend to be shared — which is why image hotlinking from Discord servers is so common.
FAQ
-
Open Graph is Facebook's standard from 2010, adopted by most platforms (LinkedIn, WhatsApp, Slack, Discord, iMessage). Twitter Cards is X's parallel system using the
twitter:prefix. If only Open Graph tags are present, X falls back to them — so Twitter Cards are usually optional unless you want X-specific overrides. -
1200×630 pixels (1.91:1 ratio) is the universal sweet spot. It fits Facebook's recommended size, X's
summary_large_image, and LinkedIn's wide card. Keep file size under 5 MB and use JPEG or PNG for maximum compatibility. -
Browsers enforce the same-origin policy — JavaScript on recatools.com cannot read the HTML of other websites. A server-side fetcher would work but introduces hosting and abuse-prevention costs. For now, copy the tags manually from View Source on the target page.
-
Indefinitely on first scrape. To force a refresh, paste the URL into the Facebook Sharing Debugger and click Scrape Again. Same applies after every og: tag change.
-
No — Google's search snippets come from the page's
<title>,<meta name="description">, and Schema.org markup. Open Graph is for social sharing only. However, Google Discover and some news products do read og:image as a fallback. -
X truncates the card title at roughly 70 characters. Facebook allows up to 95. LinkedIn allows around 110. If you need the full title visible on X, keep it under 65 characters or set a separate
twitter:titletag. -
Yes — WhatsApp reads og:title, og:description, and og:image and renders them as the small thumb-left, text-right preview card. It does not read Twitter Card tags. The image must be HTTPS and ideally under 300 KB for fast unfurl.
-
Always absolute —
https://example.com/og.jpg. Relative URLs fail on almost every platform because the crawler doesn't know which host to resolve them against. Same applies to og:url. -
Use
summary_large_image— the wide hero card. The oldersummary(small square thumb) is fine for product listings or pages where a wide image would look awkward. Avoidplayerandappunless you're shipping video or a mobile app. -
For sharing inside WeChat (Moments, chats, Mini Programs), yes — WeChat uses its own JS-SDK with
wx.updateAppMessageShareData()calls that set custom title/desc/image per page. Standard og: tags still serve international users hitting your site from outside the Great Firewall, so keep them for that audience.
Related News
You may be interested in these recent stories from our newsroom.
-
Cognition raises US$1 billion at a US$26 billion valuation as Devin clears US$492 million in revenue
The maker of the AI software engineer Devin has raised US$1 billion, valuing the company at US$26 billion after the money. Eight months ago...
-
Singapore tested government AI agents in a sandbox. The hard part was trust, not capability.
Singapore and Google ran AI agents against real government work for four months, on an air-gapped cloud, and published what broke. As someon...
-
OpenAI Foundation commits US$250 million to workers displaced by AI
The OpenAI Foundation has pledged an initial US$250 million for research, grants and programmes to help workers and economies adjust to AI-d...
75 more free tools
Calculators, converters, security tools — no signup.