Discord Embed Image: How Discord Link Previews Work

How Discord Renders Link Previews

When you paste a URL in Discord, the platform's scraper fetches the page and reads its Open Graph meta tags. Discord then renders a rich embed card that includes:

• Site name — from og:site_name, displayed in small text at the top
• Title — from og:title, shown as a clickable blue link
• Description — from og:description, displayed as gray text below the title
• Image — from og:image, rendered below the description
• Color bar — a colored left border based on theme-color meta tag

Discord's embed system is more generous than most platforms — it supports larger images, animated GIFs, and even video embeds from certain providers.

Discord OG Image Specifications

• Recommended size: 1200 x 630 px
• Large embed threshold: Images wider than 400 px display as a large embed below the text
• Small thumbnail: Images 400 px wide or smaller display as a small thumbnail to the right of the text
• Aspect ratio: No strict requirement, but 1.91:1 displays best for large embeds
• Supported formats: PNG, JPEG, GIF (animated!), WEBP
• Max file size: 8 MB (practical limit for fast loading)

Large Embed vs. Thumbnail

Discord uses the image dimensions to decide how to display your embed. This is a key distinction that many developers miss:

• Large embed (image below text): When your og:image is wider than 400 px, Discord renders the image at full width below the title and description. This is the format you want.
• Thumbnail (image beside text): When the image is 400 px wide or smaller, Discord shows it as a small square thumbnail to the right of the text. This is less eye-catching.

OGPix always generates images at 1200x630, guaranteeing the large embed format in Discord every time.

Setting the Embed Color Bar

Discord reads the theme-color meta tag to set the colored bar on the left side of the embed. This is a great branding opportunity:

<meta name="theme-color" content="#6366f1" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:site_name" content="Your Site" />

The og:site_name tag is especially important for Discord — it displays prominently above the title and helps users identify the source.

Discord-Specific Tips

• Animated GIFs work: Discord is one of the few platforms that supports animated GIF OG images. Use them sparingly for high-impact links.
• Description length: Discord truncates descriptions at roughly 350 characters. Keep it concise.
• Caching behavior: Discord caches embeds per-URL. To force a refresh, you can append a query parameter like ?v=2 to your URL.
• HTTPS required: Discord will not load OG images from HTTP URLs. Always use HTTPS.
• No redirect chains: Discord's scraper follows redirects but may fail on chains longer than 3 hops. Serve images directly.
• Bot embeds vs link embeds: This guide covers link embeds (automatic previews). Bot embeds use a different API and have different limits.

Generating Discord Embed Images with OGPix

OGPix is ideal for Discord embeds because it returns images instantly via CDN — no cold starts that cause Discord's scraper to time out. Here's how to set it up:

const ogUrl = new URL("https://ogpix-pi.vercel.app/api/og");
ogUrl.searchParams.set("title", "Join Our Discord Community");
ogUrl.searchParams.set("description", "10,000+ developers building together");
ogUrl.searchParams.set("theme", "dark");
ogUrl.searchParams.set("key", process.env.OGPIX_KEY!);

// Add to your HTML head
// <meta property="og:image" content={ogUrl.toString()} />
// <meta property="og:site_name" content="Your App Name" />
// <meta name="theme-color" content="#6366f1" />

Combine the OGPix image with a theme-color and og:site_name tag for a polished Discord embed that looks professional in any server.

Testing Your Discord Embeds

Unlike Facebook and LinkedIn, Discord doesn't have an official embed preview tool. Here are your options for testing:

• Private test server: Create a private Discord server and paste your URL to see the live embed.
• DM yourself: You can send a DM to yourself or a bot to test embeds without spamming a server.
• OpenGraph.xyz: This third-party tool shows a Discord embed preview alongside other platforms.

To force Discord to re-fetch a cached embed, edit the message containing the link (add a space and remove it) or post the URL with a cache-busting query parameter.