What is Open Graph? (And why your links look like garbage)
You paste a link in Slack. Or X. Or a WhatsApp group. And instead of a nice card with your product name and a crisp image, you get… a random favicon, a truncated URL, and maybe a screenshot of your navbar. Not great.
That's Open Graph (or the lack of it) doing its thing. Or not doing it.
So what actually is it?
Open Graph is a protocol Facebook came up with in 2010. The idea was simple: when someone shares a URL, the platform needs to know what to show. Title, description, image. Before OG, every site looked different to crawlers, and previews were a mess. Facebook said, "here's a standard," and stuck a bunch of meta tags in your HTML. Other platforms (X, LinkedIn, Slack, Discord, WhatsApp, Reddit) adopted it. Now it's basically the universal language for "this is what my link should look like when shared."
It's not magic. It's just tags in the <head> of your page. Things like:
og:title, og:description, og:image. That's the core. When a bot fetches your URL, it reads those tags and builds the preview card from them. No tags? The platform guesses. And platforms guess badly.
Why does it matter?
Because nobody clicks ugly links. Seriously. If your Product Hunt launch shows a broken image or "undefined" as the title, you're leaving clicks on the table. Same for a Reddit post, a LinkedIn share, or a Discord embed. The preview is the first thing people see. Get it wrong and it looks like you didn't care. Get it right and it looks like you know what you're doing.
We built OG Preview because we kept shipping links and finding out too late that they looked terrible. Checking manually on six different platforms is a pain. So we made a tool. But understanding what's going on under the hood helps.
The basics you need
At minimum: og:title, og:description, og:image. The image should be 1200×630 or thereabouts—that's the sweet spot most platforms use. Bigger is fine, but they'll crop. Smaller and you get blur or weird stretching.
There's also og:url (the canonical URL) and og:site_name (your brand). Twitter has its own twitter:card and twitter:image tags. If you set OG, many platforms fall back to those, but X sometimes prefers its own. Cover both and you're good.
TL;DR
Open Graph = meta tags that tell social platforms how to display your link. No tags = ugly, random previews. Right tags = clean cards that actually get clicked. It's one of those small things that makes a big difference when you're sharing stuff online.
Want to see how your links actually look?
Try OG Preview — paste a URL and see the preview on X, LinkedIn, Slack, Discord, WhatsApp, and Reddit before you hit post.