Open Graph Preview
See how any URL looks when shared — validate Open Graph and Twitter Card tags across every major platform.
What is the Open Graph Preview tool?
The Open Graph Preview tool answers one question about a page: what does this link look like when someone shares it? It fetches the URL, extracts every Open Graph (og:*) and Twitter Card (twitter:*) meta tag, validates the share image, and renders faithful preview cards for the platforms your audience actually uses — Facebook, X/Twitter, LinkedIn, Slack, Discord, WhatsApp, and iMessage.
Open Graph is a URL-level concern: the same domain can have completely different share cards on its homepage, a blog post, and a product page, so this tool inspects the exact URL you enter. It returns an A–F grade and a ranked list of fixes, so a blank or broken share card becomes a checklist rather than a mystery.
How to Use the Open Graph Preview
- Enter the full URL of the page you want to test and click Preview Tags.
- Open the Previews tab to see the rendered card for each platform side by side.
- Use the OG Tags and Twitter Tags tabs to inspect every extracted property and its value.
- Open the Image tab to confirm the og:image is reachable and correctly sized.
- Read the Findings tab for the graded list of issues, then use Raw to copy or download the JSON.
How the Open Graph Preview Works
When you submit a URL, we perform a normal HTTPS GET — following redirects and, if the site bot-blocks the first request, retrying with a social-crawler user agent, exactly as Facebook or Twitter would. We parse the returned HTML <head> and capture every og:*, twitter:*, and other relevant meta tag, preserving multiple values where a property is repeated.
We then probe the declared og:image directly: a lightweight request confirms the HTTP status, reads the content type, sniffs the real file format from its magic bytes, and measures the size. This catches images that 404, use an unsupported format like SVG, or are too large — the problems that silently produce a blank card.
Finally we evaluate the tags against platform expectations. Missing og:title or og:image, an unreachable image, a mismatched og:url host, a missing twitter:card, or duplicate tags each generate a finding, and the combined result maps to an A–F grade so you can see at a glance whether the page is share-ready.
Key Features
- Multi-platform previews — Facebook, X/Twitter, LinkedIn, Slack, Discord, WhatsApp, and iMessage in one view.
- Full tag extraction — Every Open Graph and Twitter Card property with all of its values.
- Live image validation — Status, content type, real format, and size for the og:image and twitter:image.
- Graded findings — An A–F score with a ranked, actionable list of fixes.
- Crawler-accurate fetch — Follows redirects and falls back to a social-bot user agent like the real platforms.
- Raw JSON — The complete response for scripting and monitoring.
Common Use Cases
- Content marketers — Confirm a new article renders a clean card before it goes out on social.
- Web developers — Debug a blank or wrong share preview without spamming a real timeline.
- SEO specialists — Audit Open Graph coverage across key landing pages.
- Community managers — Check how a link will look in Slack or Discord before pinning it.
Frequently Asked Questions
What is Open Graph and why does it matter?
Open Graph is a set of <meta property="og:*"> tags that tell social platforms how to display a link. When someone shares your URL on Facebook, LinkedIn, Slack, WhatsApp, or iMessage, those platforms read og:title, og:description, and og:image to build the rich preview card. Without them, the share falls back to a bare URL or a randomly chosen image, which looks untrustworthy and gets far fewer clicks. This tool fetches the page, reads those tags, and shows you exactly what each platform will render.
How is the Twitter Card different from Open Graph?
X/Twitter uses its own twitter:* tags to control the card layout. twitter:card selects the format — summary shows a small square thumbnail beside the text, while summary_large_image shows a full-width banner. Twitter falls back to Open Graph tags when a twitter:* equivalent is missing, so you usually only need to add twitter:card and let og:title, og:description, and og:image do the rest. The tool shows both tag sets and previews the exact card type your twitter:card value selects.
Why is my og:image not showing up?
The most common causes are an image URL that returns a non-200 status, a relative path that does not resolve to an absolute HTTPS URL, an unsupported format such as SVG (which Facebook and LinkedIn ignore), or a file that is too large. This tool probes the og:image directly, reports its HTTP status, content type, detected format, and size, and flags any of these problems so you can fix the specific issue rather than guessing.
What image size should I use for social cards?
For a large card, 1200×630 pixels (a 1.91:1 ratio) is the safe target used by Facebook, LinkedIn, and Twitter’s summary_large_image. Keep the file under about 5 MB and use PNG or JPEG rather than SVG, which several platforms refuse to render. Declaring og:image:width and og:image:height helps platforms lay out the card before the image finishes downloading.
Does this tool cache or store the pages it fetches?
The tool fetches the page over HTTPS, reads its tags, and probes the og:image, then returns the result to you. It performs a normal GET like any social platform’s crawler would and does not execute JavaScript, so tags injected only on the client may not appear — render your Open Graph tags server-side to be sure every platform sees them.