DEV Community

Sarfaraz
Sarfaraz

Posted on

Stop Guessing How Your Links Look on Social Media — Preview Your OG Tags Before You Ship

#seo #opensource #productivity #webdev

You just shipped a blog post. You paste the link into Slack, Twitter, or a WhatsApp group to share it — and the preview card shows a broken image, a blank title, or your homepage's generic description instead of the actual article summary.

This happens more often than it should, and almost always for the same reason: Open Graph (OG) tags are invisible until someone shares your link. You won't see the problem in your browser. You'll only see it in the wild, after the damage to your click-through rate is already done.

Why OG tags matter more than people think

Every time a link is shared on Twitter/X, Facebook, LinkedIn, Slack, Discord, or WhatsApp, the platform scrapes a specific set of <meta> tags from your page to build the preview card:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:url" content="https://example.com/page" />
Enter fullscreen mode Exit fullscreen mode

If these tags are missing, malformed, or point to an image that doesn't exist, most platforms fall back to something generic — or nothing at all. And because each platform (Twitter, Facebook, LinkedIn, Slack) has its own crawler, cache duration, and image-size requirements, a card can look perfect on one platform and broken on another.

The common failure modes:

  • Wrong or missing og:image — often a relative path that works locally but breaks in production
  • Image aspect ratio mismatches — Facebook and Twitter crop differently, so a fine-looking image on one is cut off on another
  • Stale cached previews — you fix the tags, but Facebook/LinkedIn cached the old version and won't show the update for days
  • No fallback for pages without a custom image, so every shared link looks identical

None of these show up when you're just reading your own site. You only find out when a preview looks wrong in someone else's feed — usually after they've already scrolled past it.

Catching it before you ship

The fix is simple in principle: check the actual rendered preview for each platform before you publish, not after. That's what the OG Preview tool on samtoolkit.com is for.

It's a free, browser-only tool — nothing you enter gets sent to a server. You give it a URL (or paste in your own meta tags directly if the page isn't live yet), and it renders how the card will actually look across Twitter, Facebook, LinkedIn, and Slack side by side.

Typical workflow:

  1. Paste your page URL (or your draft meta tags, if you're still working locally)
  2. Compare the rendered cards across platforms in one view, instead of guessing from raw HTML
  3. Spot the mismatch — a cropped image, a truncated description, a missing title
  4. Fix the source tags and re-check instantly, before the page ever goes live and gets cached

Because everything runs client-side in the browser, there's no rate limit, no sign-up, and no risk of your unpublished draft URLs being logged anywhere.

A quick checklist before you publish

If you don't want to check every link, here's the minimum every page should have:

  • og:title — under ~60 characters so it doesn't get truncated
  • og:description — under ~155 characters
  • og:image — absolute URL, ideally 1200×630px, under 5MB
  • og:url — the canonical URL of the page
  • twitter:card set to summary_large_image if you want the big-image layout on Twitter/X

Once these are in place, run the page through the OG Preview tool and confirm it renders the way you expect on each platform — before it's the first thing your audience sees.

Built this as part of samtoolkit.com, a set of ~30 free, privacy-first developer utilities that run entirely in your browser — nothing you paste or upload ever leaves your machine.

Top comments (0)