OGFreeOGImageOpen editor
← All posts

Discord and Slack link previews: image sizes and how to fix them

· discord, slack, link previews, open graph

You drop a link into a Discord channel or a Slack thread and expect a clean card with your title, description, and image. Instead you get a bare blue link, a stale image from three deploys ago, or a thumbnail squished into a tiny square. Both apps build that card by reading the same Open Graph tags every other platform uses, so the fixes are mostly the same too. The wrinkles are in how each one caches and crops. This post covers the right image size, how Discord and Slack unfurl and cache links, the trick to force a fresh unfurl, and the specific reasons cards break.

How Discord and Slack unfurl a link

When you paste a URL, the app sends its own bot to fetch the page's raw HTML, reads the meta tags in the head, and assembles a card. Neither one runs JavaScript the way your browser does, and neither sees what is behind a login. It is just an anonymous HTTP request reading static tags. This is the same mechanism behind every other platform, so if you have read why your link preview looks broken, the model will be familiar.

The tags that matter most:

  • og:title becomes the card heading.
  • og:description becomes the body text under it.
  • og:image becomes the picture. This is the one that breaks most often.
  • og:url the canonical link, and theme-color (Discord tints the left bar of the embed with it).

Slack's unfurl bot is Slackbot; Discord runs its own crawler. Both honor standard Open Graph, so you do not need app-specific tags. Build one good OG image and both will use it.

What image size to use

Good news: there is nothing special to make. The standard 1200x630 Open Graph image (the 1.91:1 landscape rectangle) is exactly what Discord and Slack expect, and it is the same image Facebook and LinkedIn use. You do not need a Discord-specific or Slack-specific size.

| Platform | Recommended size | Aspect ratio | | --- | --- | --- | | Open Graph default (Discord, Slack, Facebook) | 1200x630 | 1.91:1 | | LinkedIn | 1200x627 | ~1.91:1 | | X / Twitter (summary_large_image) | up to 1600x900 (1200x675 also valid) | 16:9 | | Square (some in-app crops) | 1080x1080 | 1:1 |

Ship a single 1200x630 image and your card looks right in Discord, Slack, and most other unfurlers. For the full per-platform breakdown, see the OG image size cheat sheet. A few practicalities specific to chat apps:

  • Keep the file reasonable. Stay under 5 MB and realistically a few hundred KB. A bloated PNG slows the unfurl and some fetches time out.
  • Export at 2x for retina. Designing at 1200x630 and exporting at 2x keeps the card crisp on high-DPI screens. FreeOGImage does this automatically, so a 1200x630 design comes out at 2400x1260.
  • Use PNG for crisp text, JPG for photographic backgrounds where file size matters more.
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short, compelling summary." />
<meta property="og:image" content="https://example.com/og/post.png" />
<meta property="og:url" content="https://example.com/your-page" />
<meta name="theme-color" content="#22d3ee" />

How each app crops and shows the card

The image is the same, but the frame differs, so design with both in mind.

  • Discord shows a large, near-full-width embed in the message column, with a colored accent bar on the left edge (driven by theme-color). A 1200x630 image displays as a wide landscape card. Very large images may show as a smaller inline thumbnail with a click-to-expand, but a properly sized OG image renders as the big card.
  • Slack renders a more compact unfurl. The image often appears as a thumbnail beside the title and description, and larger when the layout has room. Slack leans on the text, so a strong og:title and og:description carry more weight there than in Discord.

The portable habit survives every platform: keep critical content centered and treat the outer ~10% on each edge as a danger zone. Big, high-contrast type that reads as a thumbnail wins, because in a busy channel the card is small and scrolled past fast. A dark, code-shaped design like the dark-terminal template reads especially well in both apps because it matches the dark UI most users run.

The stale-unfurl problem (and the fix)

The single most confusing part of chat-app previews: you fix your tags, paste the link again, and the old image still shows. That is the cache, not a real bug. Both apps store the first version they scraped for a given URL and reuse it.

  • Discord caches an unfurl per URL and holds it for a while. It does not re-scrape just because you edited your tags.
  • Slack also caches per URL and reuses what it has rather than re-fetching on every paste.

Two reliable ways to get a fresh card:

  1. Append a query string to bust the cache. Because the cache key is the exact URL, https://example.com/page?v=2 is a different URL to the crawler, so it forces a fresh fetch. Bump the value (?v=3, ?cb=20260619) each time. Use a harmless throwaway parameter your app ignores; it does not change the page.
  2. Share a genuinely fresh URL. A path the app has never seen has no cached entry, so it always unfurls from scratch. This is why a brand-new link "just works" while your edited one looks stale.

For Open Graph in general, the official debuggers (Facebook's Sharing Debugger, LinkedIn's Post Inspector) force a re-scrape and show exactly what the crawler sees, the fastest way to confirm your tags before you paste into a channel.

The usual breakages

Most dead or wrong cards come down to a short list, the general failure modes applied to chat apps.

  • No og:image at all. Many frameworks set a title and a description but never emit Open Graph tags. With no og:image, the apps show a text-only card or scrape a random page asset. View the raw HTML source and search for og:image.
  • A relative image URL. This is the most common subtle bug. Crawlers do not run in your page's context, so /og/post.png resolves to nothing. The value must be an absolute https://... URL including the domain. The same applies to og:url.
  • Auth-gated or CDN-blocked image. If the image sits behind a login, an expiring signed URL, a private bucket, or a bot-blocking rule, the crawler gets a 403/404 and shows nothing. Open the image URL in a private window with no cookies. If you cannot see it there, neither can Slackbot or Discord's crawler.
  • Oversized or slow image. Files over 5 MB, or images behind a slow redirect chain, can time out and silently drop from the card. Compress, and serve the image directly.
  • Wrong shape. An image that is not roughly 1.91:1 gets cropped or shrunk to a small thumbnail instead of the large card. Use 1200x630.
  • A stale cache. Covered above: not actually broken, just cached. Bust it with a query string.

Before you paste anything, preview and validate your tags to catch a missing image, a relative URL, or the wrong dimensions in seconds.

The fix checklist

Run this top to bottom:

  1. og:image exists in the raw HTML source.
  2. The URL is absolute (https://yourdomain.com/...), never relative.
  3. The image is publicly fetchable with no login, expiring token, or bot block. Verify in incognito.
  4. The file is reasonable (under 5 MB, ideally a few hundred KB) and is PNG or JPG.
  5. The image is 1200x630 (1.91:1), the size both apps expect.
  6. og:title and og:description are set and compelling, since Slack in particular leans on the text.
  7. Bust the cache with a ?v=N query string (or share a fresh URL) to force a clean unfurl.

Don't have a share image yet?

If the card looks bad because there is no purpose-built image, you can make one in your browser in a couple of minutes, then drop its absolute URL into og:image. Everything runs client-side: no signup, no watermark, and nothing you make is uploaded anywhere. Browse templates for a head start, or read more guides on the blog.

Ready to ship a card that looks sharp in every channel? Open the editor, build a clean 1200x630 image, wire up the absolute URL, and bust the cache on your next paste.

Dark Terminal template preview

Make your own with the Dark Terminal template — free, private, no signup.

Open the editor