Open Graph Preview
Fill in a title, description and image, and see exactly how the link will render when shared on Twitter/X, Slack and Facebook — then copy the meta tags straight into your page.
Twitter / X
appachi.tech
Appachi Tools — Free Online Developer Tools
35 free developer tools that run entirely in your browser. No signup, nothing uploaded.
Slack / Facebook
appachi.tech
Appachi Tools — Free Online Developer Tools
35 free developer tools that run entirely in your browser. No signup, nothing uploaded.
About the Open Graph Preview
Open Graph tags (og:title, og:description, og:image, og:url) are what Facebook, Slack, LinkedIn and most other platforms read to build a link preview card; Twitter/X mostly uses its own twitter:* tags, falling back to Open Graph tags when they're absent. Getting them right is the difference between a link that shows a rich, clickable card and one that shows a bare, unstyled URL.
Every platform has its own truncation and aspect-ratio rules — a title that reads fine on your page can get cut off mid-word in a Slack unfurl, and a share image cropped to the wrong ratio can hide the important part of the picture. Previewing before shipping catches both.
How to use it
- 1Enter your page's title, description, URL and share image.
- 2Check how each platform's preview renders it.
- 3Copy the generated meta tags into your page's <head>.
Features
- Live preview matching Twitter/X, Slack and Facebook card styles
- Generates og:* and twitter:* meta tags together
- Warns when a title or description is likely to be truncated
- One-click copy of the generated tags
Frequently asked questions
What is the difference between Open Graph and Twitter Card tags?
Open Graph (og:*) is the protocol most platforms — Facebook, Slack, LinkedIn — read for link previews. Twitter/X primarily reads its own twitter:* tags, but falls back to Open Graph tags if Twitter-specific ones are missing, which is why most pages include both.
What image size should og:image be?
A common safe target is 1200×630px (roughly 1.91:1) — large enough to look sharp, and the aspect ratio most platforms crop to without losing the important part of the image.
Why doesn't my link show a preview when I share it?
Usually a missing or malformed og:image/og:title tag, or the platform's crawler being blocked from fetching the page — check that the tags are present in the page's raw HTML (not injected only by client-side JavaScript, which many link-preview crawlers don't execute).
Does this tool fetch my live URL to check its tags?
No — that would require a server-side request this site deliberately doesn't make. Enter your intended title/description/image directly and this previews how they'll render once those tags are live.