Discord Open Graph Preview Guide

How Discord Uses Open Graph Tags

Discord is a community-focused chat platform that uses Open Graph tags to create rich link previews (embeds) when users share URLs in servers, direct messages, and channels. Discord's implementation follows the standard Open Graph protocol with some platform-specific enhancements.

Where Discord Shows Open Graph Previews

• Server Channels - Link previews in text channels
• Direct Messages - Rich embeds in private conversations
• Group DMs - Preview cards in group chats
• Threads - Link previews in message threads
• Forum Channels - Embeds in forum posts

Discord Image Dimensions & Requirements

Discord follows standard Open Graph image recommendations:

Recommended Image Size

• Optimal size: 1200×630px (1.91:1 aspect ratio)
• Minimum size: 300×300px
• Maximum file size: 10MB (but aim for under 1MB)
• Format: JPG, PNG, GIF, or WebP
• Image ratio: 1.91:1 works best, but Discord handles various ratios

Image Best Practices for Discord

• Use high-contrast images that work in Discord's dark theme
• Keep text large and readable
• Include vibrant colors that stand out in chat
• Test how images appear in both light and dark Discord themes
• Consider Discord's compact embed layout when designing

Discord Theme Color Feature

Discord has a unique feature that allows you to customize the embed color using the theme-color meta tag:

<!-- Discord Theme Color -->
<meta name="theme-color" content="#5865F2" />

This sets the accent color on the left border of Discord embeds, helping your links stand out and match your brand.

Theme Color Best Practices

• Use your brand's primary color
• Choose colors that contrast well with Discord's dark theme
• Use hex color codes (e.g., #5865F2 for Discord's brand color)
• Test how the color appears in both light and dark Discord themes

Required Discord Open Graph Tags

Discord requires these essential Open Graph tags:

<!-- Essential Open Graph Tags for Discord -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<!-- Optional: Discord Theme Color -->
<meta name="theme-color" content="#5865F2" />

Recommended Additional Tags

• og:site_name - Your site name
• og:image:width and og:image:height - Image dimensions
• og:image:alt - Alt text for accessibility
• theme-color - Custom embed border color

Discord Caching Behavior

Discord aggressively caches Open Graph data, which can be frustrating when updating your tags:

Cache Duration

• Discord typically caches for 24-48 hours
• Cache is per-URL, so changing the URL bypasses cache
• There's no official Discord cache-clearing tool

Cache Workarounds

• Wait 24-48 hours for natural cache expiration
• Use query parameters to create a "new" URL (e.g., ?v=2)
• Test with a different URL to verify your tags are correct
• Use our preview tool to verify tags without waiting for cache

Common Discord Open Graph Mistakes

1. Relative Image URLs

❌ <meta property="og:image" content="/images/og.jpg" />

✅ <meta property="og:image" content="https://example.com/images/og.jpg" />

Discord requires absolute URLs with HTTPS. Relative paths will not work.

2. Not Using Theme Color

The theme-color meta tag is a simple way to make your Discord embeds stand out:

<meta name="theme-color" content="#YOUR_BRAND_COLOR" />

This small addition can significantly improve brand recognition in Discord.

3. Images That Don't Work in Dark Theme

Discord is primarily used in dark theme. Ensure your images:

• Have good contrast against dark backgrounds
• Use bright, vibrant colors
• Test how they appear in Discord's dark interface

4. Not Accounting for Cache

Discord's aggressive caching means updates won't appear immediately:

• Plan ahead when updating OG tags
• Test with our preview tool before sharing
• Consider using versioned URLs for important updates

Discord Embed Structure

Understanding how Discord structures embeds helps optimize your Open Graph tags:

Embed Components

• Title - From og:title (clickable, links to og:url)
• Description - From og:description (truncated if too long)
• Image - From og:image (displayed at bottom of embed)
• Footer - Shows domain name from og:url
• Color Bar - Left border color from theme-color

Description Length

Discord truncates long descriptions. Best practices:

• Keep descriptions under 200 characters for full display
• Put most important information in the first 150 characters
• Use line breaks strategically (Discord respects some formatting)

Implementation Examples

Nuxt 3

useSeoMeta({
  ogTitle: 'Your Page Title',
  ogDescription: 'Your description optimized for Discord',
  ogImage: 'https://example.com/discord-og-image.jpg',
  ogUrl: 'https://example.com/page',
  ogType: 'website',
  ogSiteName: 'Your Site Name',
  themeColor: '#5865F2' // Discord brand color or your brand color
})

Next.js 14+

export const metadata = {
  openGraph: {
    title: 'Your Page Title',
    description: 'Your description',
    images: ['https://example.com/discord-og-image.jpg'],
    url: 'https://example.com/page',
    siteName: 'Your Site Name',
    type: 'website'
  },
  other: {
    'theme-color': '#5865F2'
  }
}

Discord Community Tips

For Discord communities and servers, consider these additional optimizations:

Community-Focused Content

• Use engaging, community-oriented language
• Include calls-to-action that encourage Discord engagement
• Use vibrant, eye-catching images that stand out in chat
• Leverage theme-color to match your server's branding

Gaming and Tech Communities

• Discord is popular with gaming and tech communities
• Use relevant imagery and terminology
• Consider Discord's younger, tech-savvy audience
• Test how previews appear in gaming-focused servers

Related Resources

• Slack Open Graph Guide
• Facebook Open Graph Guide
• Twitter Open Graph Guide
• OG Image Size Guide
• Why OG Images Not Updating