Open Graph for Discord

Discord has become a major hub for developer communities, gaming groups, and digital creators. When links are posted in Discord text channels, Discord parses metadata to render sleek inline embed cards.

Discord offers unique customization options — such as custom border accent colors (theme-color) — that make link previews stand out.

---

Standard Open Graph Tags for Discord

Discord parses standard Open Graph tags to populate embed card elements:

<meta property="og:title" content="Page Title for Discord Embed" />
<meta property="og:description" content="Detailed description rendered in Discord chat." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/banner.png" />
<meta property="og:site_name" content="Site or Brand Name" />

---

Discord-Specific Customization: Theme Color

Discord supports the HTML <meta name="theme-color"> tag. This sets the vertical accent bar color on the left side of the Discord embed card:

<!-- Set a custom hex color for Discord embed border -->
<meta name="theme-color" content="#5865F2" />

Using your brand’s primary brand color creates an eye-catching, recognizable embed in Discord channels.

---

Discord Image Specifications

• Recommended Dimensions: 1200 × 630 pixels
• Aspect Ratio: 1.91:1
• Max File Size: 8 MB
• Supported Formats: PNG, JPEG, WebP, Animated GIF

💡 Tip: Discord natively supports animated .gif images for og:image tags. Animated preview images will auto-play when hovering over the embed.

---

Twitter Card Fallback in Discord

If Open Graph tags are incomplete, Discord’s bot will attempt to parse Twitter Card meta tags:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Title for Discord" />
<meta name="twitter:image" content="https://example.com/banner.png" />

If both OG and Twitter tags are present, Discord prioritizes Open Graph data.

---

Troubleshooting Discord Embeds

If Discord fails to render an embed card for your link:

1. Check File Size: Ensure og:image is under 8 MB.
2. Raw HTML Source: Verify tags are server-side rendered. Discord’s bot does not execute client-side JavaScript.
3. Suppress Embed Syntax: Ensure users aren’t wrapping the link in angle brackets (<https://example.com>), which explicitly disables embeds in Discord.

---

Related Resources

• Open Graph for Slack
• Open Graph Image Size Guide
• Open Graph Troubleshooting Guide
• Test your Discord embeds with our Open Graph Inspector