ThumbCrafted Try Free Editor

Preview Debug Workflow

Your link's social preview is broken — missing image, wrong size, awkward crop, or stale cache. This is the five-step loop to diagnose it, fix it in the editor, push it live, and verify it shipped clean on every platform.

Workflow 01 ~15 min 5 steps Works on Twitter, Facebook, LinkedIn, Discord
1

Diagnose with Preview

Open ThumbCrafted Preview and paste the URL of the page whose preview is broken. The tool fetches the page's og:image, og:title, og:description, and twitter:card meta tags, then runs six validation checks against them — flagging anything that's missing, wrong size, too long, or at risk of cropping awkwardly on a specific platform.

Cards for Twitter, Facebook, LinkedIn, and Discord render side-by-side with the actual content, so you can see what each platform will show — not just read a list of errors.

Open Preview
2

Open in Editor at 1200×630

Click Fix in Editor on any failing card. The editor opens with a 1200×630 canvas — the universal og:image size that works for Facebook, Twitter's large card, LinkedIn, and Discord — and the platform safe-zone overlay is enabled so you can see exactly which regions each platform crops.

If your page already had an og:image, it's preloaded as the base layer, so you're editing rather than starting from scratch.

Jump to Editor
3

Compose your og:image

Build the new image inside the safe zone. Three things consistently matter for click-through: a recognizable subject (face, product, or scene), a short headline (4–7 words, big enough to read at thumbnail size), and a brand element in the corner (logo or wordmark, never floated into a crop region).

Keep the visual weight off the edges — Twitter's 1.91:1 large card crops more aggressively than Facebook's, so anything within ~40px of left/right edges may disappear on Twitter even if it shows on Facebook.

4

Update on your site

Export from the editor (PNG for transparency, JPG for smaller file size, WebP for the best of both if your CDN supports it). Upload to your site or CDN at a stable URL — avoid signed/expiring URLs and avoid query strings that change per request, since platforms cache by URL.

Replace the og:image meta tag in your page's <head> with the new image URL. While you're there, double-check that og:image:width and og:image:height are set to 1200 and 630 — some platforms refuse images without dimensions.

5

Re-scrape, then re-validate

Each platform caches previews independently — sometimes for hours, sometimes for weeks. After updating your meta tags, you need to force each platform to re-fetch your page. The three debuggers below each have a "Scrape Again" or "Refresh" button that triggers a fresh crawl:

Facebook Sharing Debugger Twitter Card Validator LinkedIn Post Inspector

Once all three debuggers show the new image, come back to ThumbCrafted Preview and re-run the validation against your URL. All six checks should now pass green. You're done — the next time someone shares the link, the new card will render.

Common pitfalls

Cached previews don't update without re-scrape Updating the meta tag on your site does not update the cached preview on Facebook/Twitter/LinkedIn. Every platform caches independently. The re-scrape step is the one most people skip — and then assume the workflow is broken.
Image dimensions must be declared Facebook in particular will sometimes refuse to display an og:image if og:image:width and og:image:height aren't set. Always declare them as 1200 and 630.
Twitter crops harder than Facebook The same 1200×630 image renders differently across platforms. Twitter's large card has a tighter 1.91:1 crop than Facebook. Keep critical content centered — anything within 40px of the left or right edge is at risk on Twitter.
Use stable URLs, not signed ones Platforms cache images by URL. If your CDN issues signed URLs that expire or change per request, the cached image will 404 next time someone shares the link. Always serve og:image from a permanent path.

Frequently asked

Why doesn't my new preview show up immediately on Facebook?
Facebook caches previews aggressively — sometimes for weeks. Updating your og:image meta tag on your site doesn't trigger a fresh fetch. You have to use the Facebook Sharing Debugger, paste your URL, and click Scrape Again. That forces Facebook to re-crawl the page and refresh its cached preview.
Do I need both og:image and twitter:image meta tags?
No — Twitter falls back to og:image if twitter:image isn't set. Most sites only set og:image. You only need a separate twitter:image if you want Twitter to show a different image than Facebook/LinkedIn (rare in practice).
What size should my og:image be?
1200×630 is the universal answer. It satisfies Facebook (recommends 1200×630), Twitter large card (1.91:1 ratio), LinkedIn (1200×627 recommended), and Discord (which uses og:image directly). Smaller images get rejected or upscaled; larger images get downsampled. 1200×630 is the sweet spot.
What if my page doesn't have any og:image at all?
Most platforms fall back to whichever image they can find on the page (usually the first <img> tag) or a generic placeholder — which almost always looks bad. ThumbCrafted Preview will flag this as a critical issue. Step 2 of this workflow opens the editor with a blank canvas so you can build one from scratch.
How is this different from just using each platform's debugger?
Each platform's debugger only covers itself — and they're developer-focused (raw meta-tag dumps, validation logs). ThumbCrafted Preview shows all four platforms side-by-side as visual cards, identifies issues across all of them in one pass, and gives you a one-click path into the editor with the right canvas size pre-loaded. You still need the platform debuggers for the re-scrape step, but the diagnosis and fix are unified.

Next workflow

Cross-Platform Publish Workflow → One source image → YouTube thumbnail, Instagram post, TikTok cover, Facebook share — at every platform's optimal size.