DEV Community

hey atlas
hey atlas

Posted on • Originally published at aitoolsinsiderhq.com

X killed its Card Validator and Facebook's needs a login, so I built a free Open Graph preview tool

#webdev #html #seo #tools

When I push a new page, I want to know how the link card looks before I share it. That used to mean two tools: Twitter's Card Validator and Facebook's Sharing Debugger. In 2026 both are basically gone for that job:

  • X retired its public Card Validator (cards.twitter.com/validator) back in 2023. There is no first-party preview anymore.
  • Facebook's Sharing Debugger still exists, but it needs a login and it only works on URLs that are already public. Useless for a staging or unpublished page.

So you are flying blind on the exact moment that decides whether anyone clicks. I got tired of it and built a free tool that reads HTML you paste and renders the Facebook, X, LinkedIn and Google previews locally, plus a checklist of what is missing. No login, works on unpublished pages, nothing leaves the browser: Open Graph & Social Share Preview Validator.

This post is the 5-minute version of what it checks, so you can fix your tags whether or not you use the tool.

The tags that actually matter

A broken share card is almost always one of these four:

<!-- Open Graph: Facebook, LinkedIn, Slack, Discord, iMessage... -->
<meta property="og:title"       content="The 7 Best Free AI Tools in 2026 (Tested)">
<meta property="og:description" content="The seven free AI tools actually worth your time in 2026.">
<meta property="og:image"       content="https://example.com/og-image.jpg">
<meta property="og:url"         content="https://example.com/best-free-ai-tools">
<meta property="og:type"        content="article">
<meta property="og:site_name"   content="Example">

<!-- Twitter / X -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="The 7 Best Free AI Tools in 2026 (Tested)">
<meta name="twitter:description" content="The seven free AI tools actually worth your time in 2026.">
<meta name="twitter:image"      content="https://example.com/og-image.jpg">
Enter fullscreen mode Exit fullscreen mode

The four mistakes I see most

  1. og:image is missing or relative. This is the number one reason a link shares as a bare grey box. The URL must be absolute (https://...), not /og-image.jpg. Aim for 1200x630px.
  2. No twitter:card. Without summary_large_image you get a tiny thumbnail on X instead of the big image card. X falls back to OG tags for title/description, but not for the card type.
  3. Title and description too long. The card crops around ~60 chars for the title and ~155 for the description. Write for the crop, not the full sentence.
  4. og:url and <link rel="canonical"> disagree. When they point at different URLs, your share equity and your SEO equity split across two addresses. Keep them identical.

A useful mental model: og:* is the canonical set, and most platforms fall back to it. twitter:* only overrides when present. So you can ship a solid card with OG alone and add the Twitter tags only where you want different copy.

Why I check this locally instead of with a live fetcher

A server-side fetcher cannot see a page that is not deployed yet, and that is exactly when I want the preview. Parsing pasted HTML with DOMParser in the browser means it works on localhost, on a staging branch, or on a draft in your CMS, with zero round trips and nothing uploaded. The tool also spits out a corrected tag block you can paste straight into <head>, with the gaps filled from whatever fallbacks it can find.

If you build sites, bookmark a preview tool you can hit without logging into anyone's platform. Here is the one I made: open-graph-preview (free, no signup).

What is your biggest OG-tag gotcha? The hotlink-blocked image one still gets me on certain CDNs.

Top comments (0)