Social Preview Tool Social Preview Guide

What the Social Preview tool checks

The Social Preview tool fetches your page, extracts Open Graph and Twitter Card tags, validates the image URL and dimensions, and renders a preview showing how the link card will appear on each major platform. It flags issues including missing tags, invalid image URLs, wrong image dimensions and missing required properties.

Check every important page: Your homepage, product pages, blog posts and landing pages should all have correctly configured social tags. A poorly configured OG image on a product page can significantly reduce the click-through rate when that product is shared.

The most common social preview issues

Wrong image dimensions

The ideal og:image is 1200 x 630 pixels. Images that are too small (under 600 x 315) may not render on some platforms. Square images (1:1 ratio) render differently than landscape images — design your OG image specifically for the 1.91:1 ratio.

Image blocked by robots.txt

If your robots.txt blocks Facebot or Twitterbot from crawling images, social platforms cannot fetch your og:image. Check your robots.txt allows access to your image directories.

Missing twitter:card tag

Without a twitter:card meta tag, Twitter/X will not show a card preview — just a plain link. Add twitter:card set to "summary_large_image" for a large image card or "summary" for a small image card.

Each platform crops your image differently — design for the crop

1200 × 630 is the right file to produce. What each platform then does with it varies, and that is what decides whether your image works or turns into a headless torso.

The rule that survives all of them: centre-weight the image. Assume a square crop from the middle. Put the subject and any text inside the central square, and treat the left and right thirds as decoration that will sometimes be discarded. A logo tucked into a bottom corner is the most common casualty, and it is the one thing people are most confident is safe.

Text on the image is a trap, not a feature

Platforms recompress heavily and downscale aggressively for mobile feeds. Text that is crisp in your design tool becomes a grey smear at thumbnail size — and a caption you cannot read is worse than no caption, because it occupies the space where a legible image could have been. If you use text: a handful of very large words, high contrast, dead centre. Not a sentence.

Dark mode

Most feeds are now dark for a substantial share of users. A logo or diagram with a transparent background — or a white background bleeding into a white card — will look broken for those people and fine for you. Give the image a solid background and check it against black.

The same og:image on 800 pages is a wasted asset

The default in almost every CMS is one site-wide social image. It ships, previews render, nothing errors, and the problem is invisible: every link you ever share looks identical. The preview card tells the reader nothing about which page it is, so the image — the largest and most attention-grabbing element in the entire share — is doing no work at all.

The fix scales with effort available:

Version the image filename when you change it. Replacing the file at the same URL frequently changes nothing visible: your CDN is caching it, and the social platform has cached its own copy of it. Publishing og-image-v2.png rather than overwriting og-image.png sidesteps both caches at once and is the fastest way to make a change actually appear.

The broken-preview causes people miss

The obvious ones — missing tag, 404, wrong dimensions — are listed above. These are the ones that produce a blank preview on a page that looks perfect in a browser:

The definitive test: fetch your own page with curl and read the raw response. That is what the scraper sees. If the tags are not in that output — or if what comes back is a bot-challenge page — no amount of cache-clearing will help, because there was never anything to cache.

Test without publishing, and debug in the right order

The instinct is to test by posting the link somewhere and looking at it. Do not: the platform caches whatever it scraped on that first attempt, so a broken preview posted once is a broken preview cached — and the post itself is now public and wrong.

The order that saves time

  1. curl the page. Are the tags in the raw HTML? Did you get a 200, or a bot challenge? If the tags are absent here, stop — it is a rendering or blocking problem, and every step below is wasted.
  2. Fetch the og:image URL directly, in a private window. Does it load, anonymously, over HTTPS, with no referrer? This catches hotlink protection, auth, and stale CDN paths.
  3. Run the platform debuggers. Facebook's Sharing Debugger is the best diagnostic even for other platforms, because it prints exactly which tags it found. LinkedIn caches unusually hard and needs its Post Inspector to clear.
  4. Only now, share it.

Two things worth knowing about measurement

Frequently asked questions

Why does my shared link look different on different platforms?

Different platforms use different tag sets. Facebook and LinkedIn use Open Graph tags (og:title, og:description, og:image). Twitter/X uses Twitter Card tags (twitter:title, twitter:description, twitter:image) with Open Graph as a fallback. Each platform also has different image dimension preferences and caches metadata independently. The Social Preview tool shows the actual rendering for each platform.

How do I force social platforms to update my cached preview?

Each platform has its own cache refresh tool. Facebook: use the Sharing Debugger at developers.facebook.com/tools/debug/ and click 'Scrape Again'. LinkedIn: use the Post Inspector at linkedin.com/post-inspector/. Twitter/X: post the URL in a tweet and the card will update. Cache refresh typically takes a few minutes to propagate.

What causes a blank or broken social preview?

Common causes of broken social previews include: missing og:image tag, image URL returning 404 or being blocked by robots.txt, image dimensions below platform minimums (600x315px), image file size above platform limits (Facebook: 8MB), HTTPS certificate errors on the image URL, or the page returning an error status code. The Social Preview tool identifies which of these is causing the issue.

My page looks fine in a browser but the preview is blank. What now?

Two causes account for most of these. Bot protection — Cloudflare's bot-fighting modes, a WAF rule or a rate limiter — may be serving the scraper a challenge page or a 403, which contains no Open Graph tags, while your browser sees the real page. Or the tags are injected by JavaScript, which most social scrapers never execute; they parse the served HTML, so anything added after hydration does not exist to them. Fetch your own page with curl and read the raw response — that is exactly what the scraper sees.

How should I design the og:image so it works everywhere?

Centre-weight it and assume a square crop from the middle. Facebook and LinkedIn show the landscape card as designed, but Twitter/X with a plain summary card shows a small square thumbnail, and WhatsApp, iMessage, Slack and Discord often render a compact square-ish image. Keep the subject and any text in the central square, treat the left and right thirds as expendable, use very few and very large words if any, and give the image a solid background so it does not break in dark mode.

Is one og:image for the whole site a problem?

It is a wasted asset rather than an error. Every link you share looks identical, so the largest and most attention-grabbing element of the preview tells the reader nothing about which page it is. At minimum use a distinct image per template; better, a real image for your top pages; best, generate them dynamically with the page title rendered onto a branded background, so every page has a card that says what it is.

I replaced the image file but the old one still appears. Why?

Two caches are holding it: your CDN is serving the old file at that URL, and the social platform has cached its own copy of what it fetched. Publishing under a new filename — og-image-v2.png rather than overwriting og-image.png — sidesteps both at once and is the fastest way to make the change appear.

📱 Preview Social Sharing Now

Run the Social Preview Tool and get results in minutes. Pay as you go.

Preview Social Sharing →

Related tools

About aiwebpageseo

aiwebpageseo.com is a data-driven SEO and AEO (Answer Engine Optimisation) platform providing a free suite of technical website tools. Rather than relying on AI-theorised assumptions, the platform analyses live URL performance, delivering objective diagnostics, page speed metrics, CLS debugging, and site crawl data alongside actionable technical tutorials.