The broken card nobody notices until it's too late
You share a link on Twitter, LinkedIn, or in a Slack channel.
Instead of a clean card with a title, description, and image,
people see a bare URL — or worse, a wrong title and a broken
image placeholder.
This isn't a platform bug. It's a missing five lines of HTML
that you control entirely.
What Open Graph tags actually are
When a URL gets shared anywhere on the web, the platform
doesn't display the URL itself — it sends a bot to fetch the
page and looks for specific meta tags in the <head> to know
what to show. These are Open Graph tags, originally built by
Facebook but now read by every major platform.
Rough rules of thumb for what happens when they're missing:
- No tags at all — platforms show nothing, or guess badly from the page title
- Missing
og:image— a random image gets pulled from the page, often a tiny logo that looks terrible at card size - Wrong tag values — the card renders, but with stale or incorrect info
The same nine tags work across nearly every platform. This is
normal and expected — one small block of markup, reused
everywhere.
Why title tags and image tags are handled differently
Most people get the text tags right and the image tag wrong.
This is a mistake because:
-
og:imageis the most visually prominent part of the card and the most fragile - Dimensions must be 1200×630px — anything else gets cropped unpredictably
- The URL must be absolute (
https://yoursite.com/og.jpg), not relative — bots don't know your domain - Some image hosts block hotlinking, so the card shows broken even though the URL works in a browser
A missing or malformed og:image can undo otherwise correct
title and description tags.
The honest problem with cached previews
Most people assume fixing their tags fixes their card
immediately. Most are wrong.
Once a platform fetches a URL and caches the result, changing
the tags doesn't refresh the card — even after everything is
corrected. Today that means:
- Facebook / LinkedIn — cached until you use the Sharing Debugger and click "Scrape Again"
- Twitter / X — cached until you run it through the Twitter Card Validator
- Slack / WhatsApp — cached until the link is pasted fresh in a new message, and even then it clears on its own timeline
A tool that shows a "live preview" without warning about
caching is giving a preview of the fix, not the reality of
what viewers will see.
What to check before sharing a URL publicly
Nine tags worth knowing before you publish:
<!-- Open Graph — Facebook, LinkedIn, and most platforms -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your description." />
<meta property="og:image" content="https://yoursite.com/og.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<!-- Twitter Card — Twitter reads these first -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description." />
<meta name="twitter:image" content="https://yoursite.com/og.jpg" />
Show how these render differently across Twitter, Facebook,
and LinkedIn using the same set of values.
Practical situations where this matters
- Sharing a landing page for the first time and wanting it to look intentional
- Debugging why a link looks fine on Facebook but broken on Twitter
- Migrating a site and needing to confirm nothing regressed
- Working in Next.js or Laravel and wanting framework-correct syntax, not just raw HTML
- Auditing a whole site's pages before a launch or campaign
Try it yourself
I built a free OG Meta Tag Builder that shows a live preview
on Twitter, Facebook, and LinkedIn simultaneously. It checks
your image's actual pixel dimensions against the 1200×630px
standard and flags issues automatically. Copy the generated
tags in HTML, Next.js, or Laravel Blade format — ready to
paste into your project.
Free OG Meta Tag Generator & Social Preview Tool — ToolsFusion
Build Open Graph and Twitter Card meta tags with a live preview of how your link will look on Twitter, Facebook, and LinkedIn. Free, no signup, export ready-to-use HTML.
thetoolsfusion.com
No signup. Runs entirely in your browser.
A few things worth knowing
| Platform | Reads first | Falls back to |
|---|---|---|
| Twitter / X |
twitter:* tags |
og:* tags |
og:* tags |
Page title | |
og:* tags |
Page title | |
| Slack |
og:* tags |
Page title |
| Discord |
og:* tags |
Page title |
og:* tags |
Page title |
Standards change slowly here, but hotlink policies and crawler
behavior on individual platforms do shift. Check the tool for
the most current preview behavior.
The bottom line
Adding Open Graph tags doesn't just fix how a link looks. It
changes how people decide whether to click at all — a card
with a real title, description, and image reads as
intentional, which makes you look like someone who ships
finished things.
Top comments (0)