Guide

How Slack and Discord unfurl the same URL

They do not read the same tags, and they do not crop the same image. Most “social card” checkers show you a generic rectangle and call it a day. If the link is going into a Slack channel or a Discord server, that rectangle is the wrong test.

This is the difference that matters in practice, the tags each client actually uses, and a small set that works for both. CardScope reconstructs the two shells from those tags — it is not a screenshot of the live page.

Same og:title, og:description, and 1200×630 image. Slack keeps a sidebar thumb. Discord, with twitter:card=summary_large_image, puts a wide image under the text.

What Slack actually reads

Slack’s unfurler is Open Graph–first. It wants og:title, og:description, and og:image. Twitter tags are a weak fallback — if you only ship twitter:image, Slack often shows a text link or a card with no picture.

• og:site_name becomes the small gray kicker above the title. Without it, Slack usually shows the hostname.
• The image is a thumbnail on the right, not a banner. A 1.91:1 (1200×630) file still works; Slack just crops it hard. Text in the outer thirds of the image will disappear.
• Descriptions commonly clip around 140 characters. Front-load the sentence.
• A <link rel="icon"> sometimes appears next to the unfurl. Missing favicon is cosmetic, not fatal.
• og:url (or a canonical) helps Slack collapse query-string variants onto one permalink.

Slack also caches aggressively. After you fix tags, the old unfurl can stick until you hit Slack’s own unfurl cache, or until the link is shared in a fresh context. A checker that fetches live HTML will show the new tags immediately; Slack itself may not.

What Discord actually reads

Discord reads Open Graph and then leans on Twitter Card tags to decide layout. The important switch is twitter:card:

• summary_large_image — large embed image under the title and description. This is what most product and blog links want.
• summary — small thumbnail. Fine for a profile or a square icon; disappointing for a launch post.
• Missing twitter:card — Discord still tries OG, but you lose control over large vs small. Set the tag.

Title and description fall back from og:* to twitter:* to the document <title> / meta description. The image prefers og:image, then twitter:image. Discord’s description field is more generous than Slack’s, but it still clips in the embed.

A square image on a large card letterboxes. If the file is 1:1, either ship a 1200×630 crop or accept the small summary card.

Tags that matter (and who uses them)

Mistakes that look fine in a browser

Twitter tags only

A page that only has twitter:* can look perfect on X and empty in Slack. Duplicate the important fields as og:title, og:description, and og:image. Do not assume one vocabulary covers every client.

Relative og:image

/images/card.png may resolve in your head (and in some checkers) against the page URL. Several crawlers fail on relative image URLs. Use an absolute https:// URL.

HTTP images, or an image the crawler cannot fetch

Mixed-content images get dropped. So do URLs that 403 to datacenter IPs, require cookies, or return HTML. If a bot cannot GET the file as an image, there is no card image — even if it loads for you while logged in.

Missing dimensions

Set og:image:width and og:image:height. Slack and Discord are happier when they know the size before they commit to a layout. 1200×630 is the usual target for a large card.

Title and description length

Put the meaning in the first clause. Slack clips descriptions earlier than Discord. A two-word og:title looks unfinished in both embeds.

A minimal set that works for both

If you only set seven things, set these:

<meta property="og:title" content="A specific title, not the brand name">
<meta property="og:description" content="One sentence, 70–110 characters, that still makes sense at 140.">
<meta property="og:image" content="https://example.com/og/1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Your product">
<meta property="og:url" content="https://example.com/the-permalink">
<meta name="twitter:card" content="summary_large_image">

That is enough for Slack’s OG unfurl and Discord’s large embed. Add twitter:title / twitter:image if those should ever differ from OG — most sites can skip the duplicates.

Keep important pixels in the center of the image. Slack’s thumb and Discord’s wide crop will not agree on the edges.

How to verify

View-source or a browser extension shows you the tags your browser got. That is not what Slack or Discord fetched: different user-agent, no cookies, often a different final URL after redirects, and their own image probe.

A useful check fetches the URL from the edge, reads the tags in memory, and shows Slack’s thumb next to Discord’s large embed. Then you can see whether you are missing og:image, whether twitter:card is unset, or whether the image is just too small.