DEV Community

Maxwell Smart
Maxwell Smart

Posted on

Why Your Links Look Broken on Slack (And the 5-Minute Fix)

#webdev #javascript #productivity #seo

You wrote a solid article. You hit publish. You share the link on Slack.

It shows up as a plain URL with no image, no title preview, just a bare link that nobody clicks.

That's an Open Graph problem. And it kills more traffic than bad headlines.

What Open Graph Actually Does

When you paste a URL into Twitter, LinkedIn, Slack, Discord, or iMessage, those platforms send a bot to scrape your page. The bot looks for specific <meta> tags in your <head> to build the preview card.

If those tags are missing or wrong, you get a blank card. Sometimes you get nothing at all.

The four tags that matter most:

<meta property="og:title" content="Your Title Here" />
<meta property="og:description" content="A short description." />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />
Enter fullscreen mode Exit fullscreen mode

The og:image is the one most developers skip. It requires an actual image file — 1200×630px, hosted somewhere public, referenced by URL. Most people either ignore it or spend 20 minutes in Figma making something mediocre.

Why the Image Matters More Than You Think

Studies consistently show that social posts with images get 2–3× more clicks than text-only posts. For developers sharing articles, tools, or projects, a good OG image is the difference between 12 clicks and 400.

The image is also the first thing people see. Before they read your title, before they decide to click, they see your image. A blank gray square tells them nothing. A bold, branded 1200×630 image tells them you give a damn.

The Problem with Existing Approaches

Most developers fall into one of three traps:

Trap 1: Skip it entirely. The link looks broken. Traffic suffers.

Trap 2: Use a static screenshot. Doesn't match your brand, looks lazy, can't be updated without going back into Figma.

Trap 3: Set up a headless browser image generation service. Puppeteer, a serverless function, environment variables, 3 hours of your life gone. Completely overkill for a blog or side project.

There's a better path.

Generate OG Images in 30 Seconds

I've been using OGForge — a free browser-based tool that lets you build a proper 1200×630 OG image with zero setup.

You type your title, subtitle, author name, and tag. Pick a template (there are 12 — from clean minimal to neon to gradient). Customize the colors. Download the PNG. Done.

The output is a proper 1200×630 PNG you can drop into any /public folder and reference in your meta tags. No account needed for the free tier.

The meta tags are generated for you automatically — you copy them straight into your <head>.

Putting It Together

The full workflow:

  1. Write your article or ship your project
  2. Open OGForge, type your title + description
  3. Pick a template, hit download
  4. Upload the PNG to your /public folder or CDN
  5. Paste the generated meta tags into your <head>, update the image URL
  6. Done — every platform will now show a clean preview card

Total time: under 5 minutes. Traffic impact: measurable.

Your content is good. Stop letting a missing 1200×630 PNG be the reason nobody clicks.

Top comments (0)