Toolkite

Why Your Social Media Preview Generator Output Still Looks Wrong

Oct 30, 2026 · AI-assisted

You paste a link into Slack or a Discord channel, and the card that unfurls is either blank, cropped to a sliver of the wrong image, or showing the title of your homepage instead of the article you actually shared. You already ran the page through a social media preview generator, so why does it still look broken?

Most of the time the tags are fine and something else is fighting them. This walkthrough covers the usual culprits, how to confirm what's actually in your <head> with the Meta Tags Generator, and what to fix before you re-share.

The preview is cached, not regenerated

This is the number one reason people think their tags "didn't work." Facebook, LinkedIn, X, and Slack all cache the card they first fetched. If you changed og:image five minutes ago, the crawler may still be serving the old snapshot.

Before you touch any code, check whether the live HTML actually contains your new tags. View source on the page (not the rendered inspector) and search for og:image. If the new URL is there, you're dealing with cache, not markup.

  • Facebook has a Sharing Debugger that lets you re-scrape a URL.
  • LinkedIn's Post Inspector does the same for its own cache.
  • X's Card Validator will re-fetch, though it's been flaky for years.
  • Slack caches aggressively; posting the link in a private channel with a ?v=2 query string is the quickest way to force a fresh fetch.

If the tags are missing from source entirely, keep reading.

Your tags are in the wrong place or duplicated

A social media preview generator hands you a block of <head> HTML. It's easy to paste it into the <body>, or to leave an older set of tags above it. Crawlers read the first matching tag they find, so a stale og:title higher in the document wins.

Open the page source and count. You should see exactly one of each:

<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="..." />
<meta property="og:url" content="..." />
<meta name="twitter:card" content="summary_large_image" />

If your CMS or a plugin is injecting its own Open Graph block, you'll get two. Disable one. On WordPress, that usually means turning off the SEO plugin's social module or the theme's built-in tags — not both at once.

The image URL is relative, blocked, or the wrong size

Three image problems account for most ugly previews:

  1. Relative paths. content="/images/hero.jpg" is not a valid og:image. It must be an absolute URL starting with https://.
  2. Hotlink protection or auth. If your CDN blocks unknown referrers, the crawler gets a 403 and shows nothing. Test the image URL in a private browser window while logged out.
  3. Wrong dimensions. Most platforms want at least 1200×630 for a large card. A square logo gets cropped, and a 400px-wide image gets upscaled into mush.

One more: og:image must point to a real image file, not an HTML page that redirects. Some image CDNs serve a redirect first — crawlers often don't follow it.

Diagnose and fix it in one pass

Rather than editing tags by hand and guessing, build the block once in the Meta Tags Generator. The workflow is short:

  1. Fill the form with your title, description, canonical URL, and image URL.
  2. Watch the Google SERP preview and the Facebook/Twitter card previews update as you type. If the card looks wrong here, it will look wrong in the wild.
  3. Copy the complete <head> snippet and paste it into your template, replacing any existing social tags.

Everything runs in your browser — the tool builds the tags from string templates and renders the previews client-side, so nothing about your page is sent to a server. That matters if you're drafting tags for a client site under NDA.

After you deploy, re-check the live source, then force a re-scrape on each platform you care about. Do them in that order; re-scraping before the deploy finishes just caches the old version again.

Prevention: a short pre-publish checklist

  • Absolute https:// URLs for og:url and og:image.
  • One set of tags, in <head>, no duplicates from plugins.
  • Image at 1200×630, under ~300KB, publicly reachable without login.
  • twitter:card set to summary_large_image if you want the big card.
  • A canonical <link rel="canonical"> matching og:url — mismatches cause some platforms to ignore the card.

If you're also adding structured data, the Pro tier of the same tool adds JSON-LD builders for FAQ, Article, and Product schema, plus a robots.txt generator and a multi-size favicon pack. The core generator is free; Pro is a one-time $12.99 if you need those extras. Nothing about the free tier requires an account.

When the tool isn't the problem

If your tags are correct, unique, and the image passes every check but the preview still fails, the issue is almost always on the platform side. Some possibilities worth ruling out:

  • The page requires JavaScript to render its <head> (rare, but some SPA setups do this). Crawlers don't execute JS reliably.
  • A noindex or robots meta tag is blocking the crawler.
  • The domain is new and flagged; some platforms throttle previews for fresh domains.

For those cases, no generator will help — you need to fix the underlying page or wait out the platform. If you're also cleaning up images before they go live, the EXIF Remover strips location and camera metadata in the browser, which is worth doing before any photo becomes an og:image.

FAQ

Why does my social media preview still show the old image after I updated the tags?

Platforms cache the card they first fetched, often for days. Confirm the new tag is in your live HTML source, then use each platform's debugger or inspector to force a re-scrape. On Slack, appending a query string like ?v=2 to the URL is usually enough to bust the cache.

How come my Open Graph tags work on Facebook but show nothing on X?

X relies on twitter:card and twitter:image tags and doesn't always fall back to Open Graph cleanly. Make sure you include the Twitter-specific tags alongside the OG ones. If twitter:card is missing, X may render a bare link with no image at all.

What if my og:image is a relative path — will it still work?

No. Open Graph image URLs must be absolute and start with https://. A relative path like /images/hero.jpg will be ignored by most crawlers, and you'll get a blank or text-only card. The same applies to og:url.

Do I need to upload my page or image to generate the tags?

Not with Toolkite. The Meta Tags Generator builds the <head> snippet from string templates and renders the SERP and social previews entirely in your browser, so your URLs, titles, and images stay on your device. You only paste the finished HTML into your site.

Why is my preview image cropped weirdly on LinkedIn?

LinkedIn favors a 1.91:1 ratio, roughly 1200×627. If your image is square or very tall, the crop will cut off important content. Export a dedicated 1200×630 image with the subject centered and keep text away from the edges.

Can a plugin be overriding the tags my generator produced?

Yes, and it's common. Many SEO plugins and themes inject their own Open Graph block. View source and search for og:title — if you see two, disable one source. Usually that means turning off the plugin's social module or the theme's built-in tags, not both.