DEV Community

big c
big c

Posted on

I Built a Free OG Tag Checker — See How Your Links Look Before You Share Them

Ever shared a link on Twitter and the preview looked broken? No image, wrong title, generic description? That's because your Open Graph tags are missing or misconfigured.

I built a free tool to check them instantly: OG Tag Checker

Paste any URL, and you'll see:

  • Link preview — exactly how your link appears on Twitter, LinkedIn, Slack
  • All OG/Twitter meta tags — what's set, what's missing
  • Score out of 10 — based on completeness of your meta tags
  • Specific issues — like "Missing og:image — links without images get 50% less clicks"

Why This Matters

Links without proper OG tags get significantly fewer clicks when shared. Here's what happens:

  • No og:image → Your link shows as a plain text URL. Nobody clicks that.
  • No og:title → The browser guesses from your <title> tag, which is often wrong.
  • No twitter:card → Twitter shows the smallest possible preview.

Most devs set these up once and forget about them. Then they wonder why their Show HN post or tweet got no engagement — the link preview looked broken.

The Most Common Issues I've Seen

After building this and testing dozens of sites:

  1. og:image is a relative path — needs to be absolute (https://...)
  2. Description is too long — gets truncated after ~155 characters
  3. No twitter:card — Twitter defaults to the smallest preview format
  4. og:title is different from twitter:title — confusing when cross-posting

Try It

Free, no signup, instant results: https://resume-roast-alpha.vercel.app/tools/og-checker

Built with Next.js and deployed on Vercel. The tool fetches your page server-side, parses the HTML for meta tags, and renders a preview.

If you want a full audit of your landing page (design, copy, conversion — not just meta tags), we also have a $12 Landing Page Roast.


Drop your URL in the comments and I'll tell you what's broken.

Top comments (0)