How to preview how a link will look when shared
Last updated: September 7, 2026
You post a link and the preview is wrong. Wrong image, stale title, or no card at all. By then it is public, and most platforms cache what they fetched the first time, so fixing the tags does not fix the post.
Checking before you post takes a minute. Here is how.
What the platforms actually read
Almost every platform reads Open Graph tags in the page head:
og:titleandog:descriptionfor the textog:imagefor the picture, which needs an absolute URLog:urlfor the canonical destination
X reads twitter:card and its own title, description and image tags, falling back to the Open Graph ones when they are missing. That fallback is why a page can look right on one platform and broken on another.
Method 1: view source
Open the page source and search for og:. Fast, works everywhere, and tells you whether the tags exist.
It does not tell you whether the image URL resolves, whether it is the right aspect ratio, or what the result will look like. A page can have a perfect set of tags pointing at a 404.
Method 2: dump the tags from the console
One line gets you every social tag on the page as an object:
Object.fromEntries([...document.querySelectorAll('meta[property^="og:"], meta[name^="twitter:"]')]
.map(m => [m.getAttribute("property") || m.getAttribute("name"), m.content]))Worth checking straight away that og:image is an absolute URL and that it actually resolves. Paste the value into a new tab; a 404 there is the most common cause of a card that renders with no picture.
Method 3: the platform validators
Most platforms host a debugger that fetches your URL and renders the card. These are the ground truth for that platform, and some let you force a re-scrape, which is the only way to clear a bad cached preview.
Three limits. They only work on public URLs, so staging and anything behind a login is out. You need a different one per platform. And X is not among them: the Card Validator was retired in 2022, so for X you cache bust with a query string or paste the link into the composer and look at it.
Method 4: read the tags on the page
For the common case of "did I get the tags right before this goes live", Screen Ruler shows a page's SEO and social metadata directly: the Open Graph tags, the Twitter Card tags, the core SEO tags, and a card preview that renders the Open Graph image at the standard 1.91:1 ratio so you can see how it crops.
It reads the page you are on, so it works on localhost and behind authentication, which is exactly where the validators cannot reach.
What else is worth knowing
- Relative image paths do not work.
og:imagemust be an absolute URL including the protocol. This is the single most common cause of a missing preview. - 1200 by 630 is the safe size. Platforms crop differently, so keep anything important away from the edges.
- Caching is the real enemy. Once a platform has scraped a URL it may hold that preview for days. Get it right before the first share rather than after.
- Client rendered tags are unreliable. Some crawlers do not execute JavaScript, so meta tags injected at runtime may never be seen.
Common questions
Why is my preview showing an old image?
The platform cached it. Use that platform's debugger to force a re-scrape; changing the tags alone will not do it.
Do I need both Open Graph and Twitter tags?
Not strictly, since X falls back to Open Graph. Add twitter:card if you want to control the card type, and skip the duplicated title and description.
Why does my card work on one platform but not another?
Different requirements for image size, aspect ratio and whether a description is mandatory. Check each one you care about rather than assuming they agree.