DEV Community

Cover image for I built a free tool to check Open Graph tags across a whole site
Morgan Feeney
Morgan Feeney

Posted on

I built a free tool to check Open Graph tags across a whole site

#webdev #twitter #showdev #opengraph

When X (formerly Twitter) retired its Card Validator, the old link at cards-dev.twitter.com/validator started redirecting to the X login page. There was no longer a quick way to see how a link would look before you posted it. What makes it worse is that once you log in and submit a URL, the response is: “Card preview has moved to Tweet Composer”.

That frustration is a big part of why I built: ogimage.info. It started as a single-URL checker, and it now checks a whole site at once.

Why previews break

Most sites control their link previews with a handful of tags:

<meta property="og:title" content="My Blog Post">
<meta property="og:description" content="A description of the post">
<meta property="og:image" content="https://example.com/preview.png">

<meta name="twitter:card" content="summary_large_image">
Enter fullscreen mode Exit fullscreen mode

The setup looks straightforward, but each platform handles the metadata differently, so there are plenty of gotchas:

  • A relative og:image URL. /preview.png works in your browser but breaks on every platform. It has to be a full https:// URL.
  • Images that are too heavy for WhatsApp. X accepts images up to 5 MB, but WhatsApp drops anything over 600 KB and shows a preview with no image.
  • No large image on Discord. Discord only shows the big image when twitter:card is summary_large_image, even though it otherwise reads your Open Graph tags.
  • The old card sticking around after a fix. Platforms cache previews. Adding ?v=2 to the URL you share makes them fetch it fresh.

None of these are hard to fix once you know about them. The hard part is catching them all.

The problem multiplies when you scale

Checking one URL is quick. But the problems that matter tend to repeat across a site: a template that never sets og:image, blog posts that all share the homepage's image, or headlines that get cut off on every product page.

So I built a bulk OG checker. Give it your site, and it checks every page's Open Graph and X tags, then compares them, so you can see:

  • which pages have broken or missing images
  • which pages share the same image or description
  • which titles get cut off
  • what to fix first

The first 10 pages are free and you don't need an account. Beyond that, you buy page checks.

Checking a single X card

If you just want to see one X card, the X Card Validator shows you the card without logging in. It reads your Twitter Card and Open Graph tags, shows which card type X will use, and flags anything missing or broken.

What would you want from it?

Everything is free to try, and I'm still deciding what to build next.

If you look after a site with lots of pages, how do you check your social previews today? Do you check by hand, use a script, or wait until someone tells you a link looks broken?

Top comments (0)