Link Previews on LinkedIn, Facebook, Slack, Discord, iMessage

Getting a card right on X is half the job. The same link goes into Slack threads, LinkedIn posts, Discord servers and group chats, and each of those builds its own preview from your page. The good news is that they mostly read the same tags.

Which tags do the big platforms read?

Open Graph for everyone, twitter: tags for X and a couple of others.

Platform	Reads	Notes
X	`twitter:`, falls back to `og:`	Needs `twitter:card` for the large layout
Facebook	`og:*`	`og:image:width`/`height` speed up first render
LinkedIn	`og:*`	Post Inspector shows and refreshes what it sees
Slack	oEmbed, Twitter Card and Open Graph tags	Reads only the start of the page
Discord	`og:` and `twitter:`, `theme-color`, oEmbed	`twitter:card` `summary_large_image` gives the large image layout
Apple Messages	`og:title`, `og:image`, `og:video`, icons	Fetches on the sender's device; no JavaScript

Facebook

Facebook recommends 1200x630 images, accepts down to 200x200, and caps image files at 8 MB. Images smaller than 600x315 still appear, but much smaller. Meta suggests a ratio near 1.91:1 so the image shows in Feed without cropping, and recommends declaring og:image:width and og:image:height so the crawler can render the image before it has downloaded it.

Facebook caches images by URL. To change one, publish it under a new URL and keep the old file available for posts that already use it. The Sharing Debugger at developers.facebook.com shows what Facebook scraped and has a Scrape Again button.

LinkedIn reads Open Graph tags and favors wide images around 1.91:1; 1200x627 is the size most often quoted. It caches previews, so a change to your tags may not show in a new post straight away. Paste the URL into LinkedIn's Post Inspector: it fetches the page again, lists the tags it found and shows the resulting preview. Without an image, LinkedIn shows a compact text preview.

Slack

Slack's link expander reads oEmbed, Twitter Card and Open Graph tags, and ignores robots.txt. Its documentation explains that Slackbot-LinkExpanding fetches only part of each page using HTTP range requests, then fetches any image, video or audio the tags point to. Responses are cached across Slack for about 30 minutes. Because Slack says it is not a crawler (it acts on a person's behalf and does not follow links), it does not honor robots.txt; blocking its previews means contacting Slack.

Put your social tags early in the <head>. A head stuffed with scripts and styles before the meta tags can push them past what a partial fetch reads.

Discord

Discord reads both og: and twitter: tags, colors the embed with theme-color, and caches previews for about 30 minutes. Its developer documentation describes the rules in detail:

og:title/twitter:title and og:description/twitter:description supply the text; og:site_name appears above the title.
twitter:card set to summary_large_image produces the large image layout.
theme-color must be #RRGGBB or #RRGGBBAA.
Two or more og:image tags make a gallery of up to four images.
The fetch must finish within 10 seconds, answer 2xx with HTML, and use at most 5 redirects.

To see a change immediately, post the URL with a new query string. Discord also offers an embed debugger that shows which tags it picked up.

Apple Messages

Messages builds previews from Open Graph on the sender's device and does not run JavaScript or follow meta refresh redirects. Apple's technote TN3156 recommends:

og:title that is short and specific, without the site name; use og:site_name for that.
og:image at least 900 pixels wide; images under 150 pixels wide may be ignored or shown as icons.
A square icon of at least 108 pixels, such as an apple-touch-icon.
Keeping the page itself under 1 MB and all associated resources under 10 MB.

Apple also suggests avoiding text in preview images, since they appear at different sizes. Server-side redirects are followed, so a 301 to the final page is fine.

One set of tags for all of them

A head that satisfies every platform above is short:

<meta name="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#2F5BFF">
<meta property="og:site_name" content="Example">
<meta property="og:type" content="article">
<meta property="og:title" content="A short, specific title">
<meta property="og:description" content="One or two sentences that say what the page offers.">
<meta property="og:url" content="https://example.com/post/">
<meta property="og:image" content="https://example.com/og/post.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="What the image shows">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Generate it with the card generator, then check it in the inspector. When a platform still shows the wrong thing, it is nearly always caching; the cache guide has the refresh options for each.

Questions

Do I need platform-specific tags?

Rarely. og: tags cover LinkedIn, Facebook, Messages, WhatsApp and most chat apps. Add twitter:card for X and Discord's large layout. Platform extras like fb:app_id are optional.

Why does LinkedIn show an old image?

LinkedIn caches previews. Its Post Inspector fetches the URL again and shows what LinkedIn sees, which also refreshes the preview for new posts.

Can I color the Discord embed?

Yes. Discord uses the page's theme-color meta tag, in #RRGGBB or #RRGGBBAA format, as the embed's accent color.

Why is my iMessage preview just a gray bubble with the title?

Messages shows the title, domain and icon by default and adds an image only when og:image points to a large enough image. Images under 150 pixels wide may be shown as icons or ignored.

Link previews beyond X: LinkedIn, Facebook, Slack, Discord, iMessage