Home › Tools › Open Graph Preview Tool
Open Graph Preview Tool
Preview the card LinkedIn, Facebook, X and Slack will render for your link, and get the Open Graph and Twitter tags that produce it. Flags the image mistakes that make shares render as a grey box.
Fill in the fields and both card layouts render live — the large image card and the small summary card. Below them you get the exact tags, plus a list of the specific problems that stop a card from rendering at all.
How to use it
- Enter the URL, title and description you plan to publish.
- Add an absolute
og:imageURL and its pixel size — this is the field that breaks most often. - Copy the generated block into your page's
<head>, then re-check after deploying, because every platform caches the card.
The four tags that decide whether you get a card at all
og:title, og:description, og:image and twitter:card. Miss the first three and the platform falls back to whatever it can scrape from the page, which is usually the wrong heading and the first logo it finds. Miss twitter:card and X renders a bare link with no image, regardless of how good your Open Graph tags are.
Twitter's tags are the ones people skip, on the assumption that X reads Open Graph. It does, but only once you have told it which card type to build. That one line is the difference between a full-width image and a plain URL.
Why your card shows an image you replaced three weeks ago
Every platform caches what its scraper found the first time the URL was shared. LinkedIn holds it for roughly a week, Facebook indefinitely until something forces a re-scrape, X long enough that people assume the tag is broken. Editing the tag does not update the card.
The reliable fix is to make the URL new. Adding a meaningless parameter such as ?v=2 forces a fresh fetch, because the cache is keyed on the full address. The official debuggers (LinkedIn Post Inspector, Facebook Sharing Debugger, X Card Validator) do the same thing without changing your URL, and they also tell you exactly which tags the scraper read — which is worth checking before you start editing.
og:image mistakes that cost the click
A relative path is the most common one. It works in your HTML for a browser, because the browser resolves it against the page, but a scraper has no base URL to resolve against, so it just gives up. Always absolute, and always https — an http image on an https page is silently dropped by some platforms.
Size matters next. Below roughly 200×200 most platforms refuse to use it as a large card. Above 8 MB Facebook will not process it. And 1.91:1 (1200×630 is the usual choice) is the ratio that survives the most layouts without being centre-cropped — a square image in a feed is a square image with its edges cut off.
The subtle one is the missing og:image:width and og:image:height. Without them the scraper has to download the image to work out the layout, and if that download is slow or blocked the first share goes out with no image at all. Declaring the dimensions is a two-line fix for a problem that otherwise looks intermittent.
Finally, hotlink protection. If your CDN blocks requests with a foreign Referer, the platform's scraper gets a 403 and you get a grey box — while the same URL opens perfectly in your browser. The preview above requests images with no referrer for exactly this reason.
What this tool deliberately does not do
It does not fetch your live page. Reading another domain's HTML from the browser is blocked by the same-origin policy, and any tool that appears to do it is routing your URL through a server that can then see every page you check — the opposite of what a privacy-respecting tool should do.
It also cannot force a platform to re-scrape, and it cannot tell you whether your image URL actually resolves. Both need a request from somewhere other than your browser.
What you get instead is the part that matters while you are writing: the correct block of tags, an honest list of what will break the card, and a preview that shows you the crop before your readers see it.
Questions
Do I need both Open Graph and Twitter tags?
Twitter/X falls back to Open Graph for title, description and image, but it still needs twitter:card to know which layout to build. Without it you get a plain link.
What size should og:image be?
1200×630 is the safe default — it is 1.91:1, well under the 8 MB limit, and large enough that no platform rejects it. Keep any text away from the edges.
Why does LinkedIn show an old image after I fixed it?
Its scraper caches the card, typically for about seven days. Use the Post Inspector to force a refresh, or share the URL with a new query parameter.
Can I preview how Slack or WhatsApp render it?
Both read Open Graph and render something close to the large card above. Exact typography differs per client and version, so treat the preview as a layout guide rather than a pixel-accurate mock.
Is anything I type sent to a server?
No. Everything runs as JavaScript in your browser. The only outbound request is your browser loading the image you typed, if you provide one.
Related tools
Meta Tag Generator
Generate clean page title, meta description, canonical, Open Graph and Twitter card tags.
SERP Preview Tool
Preview how your title and description will look in Google search results, measured in real pixels.
JSON-LD Schema Markup Generator
Generate valid JSON-LD structured data for Article, FAQ, HowTo, Product, BreadcrumbList and Organization.