Why Your Links Look Broken Without OG Images (And How to Fix It)

That grey box showing up when you share your site? It's costing you clicks. Here's what's happening and how to fix it in minutes.

You paste your link into Slack, iMessage, or LinkedIn and wait for the preview. What comes back is a grey box, a tiny favicon, and a URL. No image. No description. Just… nothing.

You know something is wrong, but you’re not sure what. The page works fine when you visit it. So why does it look so bad when you share it?

The Short Answer: You’re Missing an OG Image

OG stands for Open Graph — a protocol developed by Facebook that tells platforms how to render a preview when your URL is shared. When a crawler visits your link, it reads a handful of <meta> tags in your page’s <head> to build the preview card you see in chat apps, social feeds, and SMS threads.

The most important of these is og:image. Without it, every platform falls back to a generic placeholder — or nothing at all.

<meta property="og:image" content="https://yoursite.com/preview.png" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A sentence about what this page is." />

Three tags. That’s the difference between a bare URL no one clicks and a preview that actually stops the scroll.

What It’s Actually Costing You

This isn’t just an aesthetic problem. Link previews are one of the most underrated drivers of click-through rates in organic social and word-of-mouth distribution.

Studies consistently show that posts with rich link previews get 2-4x the engagement of bare URL posts. When someone shares your article in a Slack channel, the thumbnail is often the only thing that convinces someone in a busy feed to stop scrolling and actually read it.

For product teams and marketers, every shared link is an impression. A broken preview is a wasted impression.

Why It Still Happens

Despite how old the Open Graph standard is (it launched in 2010), missing or broken OG images are absurdly common. A few reasons:

1. Static images go stale. Most teams set a single og:image for the whole site and forget it. Every blog post, landing page, and product page ends up with the same image — or no image on newer pages that weren’t in scope when the site launched.

2. Dynamic pages are hard to cover. If your site generates pages from a database — blog posts, product listings, user profiles — you’d need to generate unique OG images for each one. Doing that at scale requires either a browser-based screenshot pipeline, an image generation API, or a Cloudflare Worker. Most teams skip it because it’s too much work.

3. Developers set it once and move on. OG image maintenance doesn’t belong to any one team. It’s not marketing, it’s not engineering, it’s not design. So it falls through the cracks.

How to Fix It

The minimal fix is straightforward: add OG meta tags to every page. At minimum:

og:title — the page title (can pull from <title> dynamically)
og:description — a one-sentence summary
og:image — a 1200×630px image, either static or generated
og:url — the canonical URL of the page

For a static site, you can generate a single branded card and use it everywhere. It’s not ideal, but it’s infinitely better than nothing.

For dynamic sites, the better path is generating unique images per page. This means either:

Writing a headless Chrome pipeline to screenshot a styled HTML template
Using a service that does this for you at the URL level

The Set-It-And-Forget-It Solution

If you don’t want to maintain an image pipeline, ShareMagic handles this entirely at the URL level. Point your og:image tag at a ShareMagic URL, and we generate a custom branded card for each page — pulling from your page’s title, description, and metadata automatically.

No infrastructure to maintain. No design work per post. Every link you share looks the way it should.

The preview card problem is solved once. Then you can get back to the work that actually matters.