Open Graph Preview: See Your Social Cards Before You Share

By ZeroFee Tools · October 4, 2026 · 6 min read

A great article with a broken link preview still gets ignored. When someone shares your page and the card shows a cropped logo, a truncated headline or no image at all, most scrollers keep scrolling. The free Open Graph Preview from ZeroFee Tools is a composer: you type your title, description and image, and realistic Facebook, X, LinkedIn and WhatsApp cards render live, side by side, as you type.

One honest note up front, because it shapes how you use the tool: this is a preview composer, not a URL scraper. Browsers cannot fetch and parse arbitrary pages client-side, so instead of pasting a link you design the card here, then deploy the tags with confidence. Once your images are final, verify their dimensions with the social image checker, confirm your site icon loads with the favicon checker, and tighten the search snippet with the meta description preview so both search and social are covered.

Why does my link preview look wrong on social media?

Almost every broken preview traces to four causes: missing or malformed Open Graph tags, a wrongly sized image served over http, a truncated title or description, or stale platform caching of old tag data. Composing the card first fixes the first three before publishing; each platform's debugger clears the cache after deploy.

The image is the usual suspect. Facebook wants 1200 x 630, X large cards want 1200 x 628 and LinkedIn wants 1200 x 627, so one 1200 x 630 image covers all three without visible cropping. Go much smaller and platforms either stretch it into blur or drop the large-card layout entirely, shrinking your link into a forgettable thumbnail row. Serve it over plain http or a relative path and some platforms refuse to fetch it at all.

Truncation is the quieter killer. Titles past about 60 characters get cut mid-word on most cards, and descriptions past roughly 200 characters trail off into an ellipsis that swallows your call to action. The composer's live counters exist precisely for this: you watch the numbers as you type and front-load the important words, so the card reads as designed instead of as an accident.

Can an online tool fetch my URL and preview the tags?

Not from the browser alone. Web pages cannot fetch and parse arbitrary sites because of cross-origin restrictions, and this tool has no server backend to do it for you. Instead it works as a composer: enter the exact title, description and image your tags will carry, then verify the live page with each platform's official debugger.

This limitation is worth understanding because tools that claim otherwise are either running a server you cannot see or quietly guessing. A browser page asking facebook.com or your own domain for its HTML gets blocked by the same-origin policy, the same security boundary that stops malicious sites from reading your email. A scraper needs a backend server making the request on your behalf, which a free static tool does not have.

The composer workflow is actually the more reliable way to work. You control every input, so what you see is exactly what your tags will produce once deployed, with no scraper misreading a tag to muddy the picture. The honest division of labor is: design here, deploy the og:title, og:description and og:image tags in your page head, then paste the live URL into the Facebook Sharing Debugger and the X Card Validator to confirm and to force a fresh scrape.

What makes a link card people actually click?

A clickable card combines a specific, curiosity-carrying title under 60 characters, a description that states the payoff in under 200 characters, and a bold 1200 x 630 image with minimal text that survives small screens. Put your brand or domain in the card's attribution line rather than burning title characters on it, and make the image readable at thumbnail size.

Titles do the heavy lifting. "How We Cut Load Times 40% in a Week" beats "Performance Update Q3" because it promises a specific outcome and a story. Keep it under 60 characters so it never truncates, and resist the urge to keyword-stuff: cards are scanned, not studied, and a natural phrase wins the half-second of attention you get.

Images decide the scroll-stop. Bold shapes, one focal point and high contrast survive the journey from desktop feed to a 320px phone screen; fine text and busy collages do not. Keep any text on the image large and minimal, since platforms compress aggressively and small type turns to noise. WhatsApp is the extreme case: its compact card shows a tiny thumbnail, so if your image communicates nothing at stamp size, the share dies in the chat.

Why does the real share look different from my preview?

Platforms cache link data aggressively, so the usual cause is a stale cache showing your old tags rather than an error in your preview. Re-scrape the URL in the platform's official debugger after every tag change. If the card is still wrong, check the tags sit in the page head and og:image is an absolute https URL.

Caching is the number one support question for link previews, and it behaves exactly like favicon caching: you fix the tags, share again, see the old card and conclude the fix failed. Facebook, X and LinkedIn all store the first scrape and reuse it. The debuggers are not just validators; their re-scrape buttons are the cache-busting mechanism. Make it a habit: change tags, re-scrape, then share.

When re-scraping does not help, the checklist is short. Tags in the body instead of the head get ignored. Relative image URLs break because the platform resolves them against nothing. Images behind authentication, hotlink protection or robots blocks never load. And oversized files, keep it under 8 MB, can time out the fetch. Walk that list in order and the mystery preview resolves itself nearly every time.

How to use the Open Graph Preview in 4 steps

1. Enter your page URL. This fills the domain attribution line on each card, showing how your site name will appear under the preview.
2. Type your title and description. Watch the live character counts and stay near 60 characters for the title and 200 for the description so nothing truncates.
3. Add your image. Paste an https image URL or upload a file from your device, ideally 1200 x 630 px, and watch all four platform cards update instantly.
4. Deploy and verify. Copy the wording into your page's og:title, og:description and og:image tags, then re-scrape the live URL in each platform's official debugger.

6 practical link-card tips

• Front-load the first 40 characters. Mobile cards truncate hardest. Put the payoff, the number or the hook at the very start of the title, not after a throat-clearing preamble.
• Use one 1200 x 630 image everywhere. It is exact for Facebook and LinkedIn and near-exact for X, which scales it without visible cropping. One master file beats four almost-right ones.
• Keep image text huge or skip it. Anything under roughly 60px tall on the master image becomes illegible after compression and small-screen rendering. One short phrase or none.
• Write the description as a payoff, not a summary. "Learn the three checks that catch broken previews before you publish" outperforms a dry recap of the article's sections.
• Re-scrape after every change. Platforms cache the first scrape hard. The Facebook Sharing Debugger and X Card Validator both force a fresh fetch: use them before you share, every time.
• Preview the WhatsApp card too. Its compact layout is the smallest canvas of the four. If your title and thumbnail still communicate there, they will survive everywhere else.

Frequently asked questions