How to Fix and Control Discord Link Previews (2026 Guide)

Discord embed not showing? Learn how Discord link previews work, why they break, and how to fix og:image, og:title, and og:description so your Discord embeds always display correctly.

Home › Blog › Discord Embed Guide

How Discord Link Previews Work

When someone pastes a URL into a Discord channel or DM, Discord's bot visits that URL and reads specific HTML meta tags from the page source. These tags are called Open Graph (OG) tags, a standard originally created by Facebook and now used by virtually every platform that shows link previews.

Discord reads four OG tags to build the embed card:

  • og:title — the bold title line shown at the top of the embed
  • og:description — the smaller text shown beneath the title
  • og:image — the preview image shown in the embed card
  • og:url — the canonical URL displayed as the site name area

Discord also reads og:site_name to show the website name above the title in the embed. If that tag is missing, Discord falls back to the domain name.

Discord's Bot Behavior

Discord sends a request using its own crawler user-agent (Discordbot/2.0). This bot fetches the raw HTML of the page. It does not execute JavaScript. This is the single most common reason embeds break: if your OG tags are added to the page dynamically via JavaScript (for example, through a React or Next.js client-side render), Discord's bot will see an empty page and show no preview.

Caching: Why Your Fix Didn't Work Instantly

Discord caches link previews for approximately 30 minutes. After you fix your OG tags, if you paste the same URL into Discord again, you may still see the old (broken) embed for up to half an hour. To bypass the cache, you can append a query string to the URL (e.g., ?v=2) or simply wait for the cache to expire. There is no manual refresh button in Discord itself.

Server-Side Rendering Requirement

Because Discord's bot cannot execute JavaScript, your OG meta tags must be present in the raw HTML response from your server. If you are using a JavaScript framework like React, Vue, or Angular in client-side-only mode, your pages will render an empty shell to Discord. Solutions include: using Next.js or Nuxt.js with server-side rendering (SSR) or static site generation (SSG), adding a pre-rendering service, or setting OG tags in your server's response headers or base HTML template.

Here is what a correct Discord embed looks like:
share-preview.com
How to Fix and Control Discord Link Previews (2026 Guide)
Your Discord embed is not showing, or it looks wrong. This guide explains exactly how Discord reads OG tags, why embeds break, and how to fix them in minutes.
[ Preview Image 1200 x 630 ]

Why Discord Embeds Break: 4 Common Failure Patterns

The vast majority of broken Discord link previews come from one of four problems. Each one has a clear fix.

Pattern 1: JavaScript-Rendered OG Tags

If you use a JavaScript framework to inject meta tags at runtime, Discord's bot will never see them. The bot only reads static HTML.

Bad: React client-side only

index.html (client-side rendered)
<!-- Discord bot sees this empty shell -->
<head>
  <title>My App</title>
  <!-- No OG tags here -- React adds them later via JavaScript -->
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>

Good: OG tags in server-rendered HTML

server-rendered HTML (Next.js, Nuxt, plain HTML)
<head>
  <meta property="og:title" content="My Page Title">
  <meta property="og:description" content="A clear description under 350 characters.">
  <meta property="og:image" content="https://example.com/images/preview.jpg">
  <meta property="og:url" content="https://example.com/my-page">
</head>

Pattern 2: Relative Image URLs

Discord fetches the og:image URL directly. If you use a relative path like /images/preview.jpg, Discord does not know what domain to prepend and will fail to load the image.

Bad: Relative URL

HTML
<meta property="og:image" content="/images/og-preview.jpg">
<!-- Discord cannot resolve this. No image appears in embed. -->

Good: Absolute HTTPS URL

HTML
<meta property="og:image" content="https://example.com/images/og-preview.jpg">
<!-- Full URL. Discord fetches and displays the image correctly. -->

Pattern 3: Wrong Image Format or Size

Discord supports JPEG, PNG, GIF, and WebP. It will not display SVG files as OG images. Additionally, images over 8 MB will fail silently. Images smaller than 400 x 300 px may display as a small thumbnail instead of the large embed format.

Bad: SVG image

HTML
<meta property="og:image" content="https://example.com/logo.svg">
<!-- SVG not supported. Discord shows no image. -->

Good: JPEG or PNG at 1200x630

HTML
<meta property="og:image" content="https://example.com/og-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Perfect size. Discord shows a large, clear preview image. -->

Pattern 4: Missing or Duplicate Tags

Having no OG tags at all means Discord falls back to guessing the title from the <title> tag and shows no image. Having duplicate OG tags (two og:image lines) causes unpredictable behavior where Discord may pick the wrong one.

Bad: Duplicate og:image tags

HTML
<meta property="og:image" content="https://example.com/old-image.jpg">
<meta property="og:image" content="https://example.com/new-image.jpg">
<!-- Two og:image tags. Discord behavior is undefined. -->

Good: One og:image tag, correctly formed

HTML
<meta property="og:image" content="https://example.com/og-preview.jpg">
<!-- Single, correct tag. Always audit for duplicates with Share Preview. -->

Step-by-Step: How to Control Your Discord Link Preview

Here is the complete, correct OG markup for a page you want to look great when shared on Discord. Place all tags inside the <head> element.

Complete OG markup for Discord
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Basic OG tags (required for Discord embed) -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Your Page Title Here (max 256 characters)">
  <meta property="og:description" content="A clear, specific description of this page. Keep it under 350 characters so Discord does not truncate it.">
  <meta property="og:image" content="https://yourdomain.com/images/og-preview.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:url" content="https://yourdomain.com/your-page">
  <meta property="og:site_name" content="Your Site Name">

  <!-- Twitter Card (for Twitter/X sharing -- Discord ignores these) -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Page Title Here">
  <meta name="twitter:description" content="A clear, specific description of this page.">
  <meta name="twitter:image" content="https://yourdomain.com/images/og-preview.jpg">

  <!-- Canonical URL -->
  <link rel="canonical" href="https://yourdomain.com/your-page">
</head>

Follow these steps to implement it correctly:

  1. 1
    Create your OG image at 1200 x 630 px. Save it as JPEG or PNG. Keep the file under 8 MB (ideally under 1 MB for fast loading). Upload it to a public, HTTPS-accessible URL on your domain.
  2. 2
    Add the OG meta tags to your HTML head. Use the template above. Make sure og:image uses the full absolute URL starting with https://.
  3. 3
    Confirm the tags are in the raw HTML source. Open your page URL in a browser, right-click, and select "View Page Source". Search for og:image. If you see it in the source, Discord can read it. If you don't see it, your framework is rendering it client-side only.
  4. 4
    Test with Share Preview before posting. Paste your URL at share-preview.com to see exactly how Discord and other platforms will render the embed. This catches issues before your users see them.
  5. 5
    Paste in Discord and verify. If the cache shows an old preview, add ?v=2 to your URL and paste again. The new version should appear within seconds.
Next.js users: Use the metadata export in your page.tsx or layout.tsx files. Next.js automatically injects these as server-rendered meta tags. For dynamic pages, use generateMetadata(). See the OG image guide for framework-specific examples.

Testing Your Discord Embed with Share Preview

The fastest way to catch Discord embed problems before your users do is to run your URL through Share Preview. Unlike Discord itself, Share Preview shows you the embed preview instantly without needing to post in a real channel, and it shows all platforms side by side.

Share Preview simulates how your link appears on:

  • Discord — the purple-bordered embed card that appears when you paste a link
  • Twitter / X — summary card or summary_large_image card
  • LinkedIn — post preview with title, description, and image
  • Facebook — link preview in feed posts and messenger
  • Slack — message unfurl card
  • WhatsApp — chat link preview

This is especially valuable when you need to verify that a fix actually worked. Discord's 30-minute cache makes it slow to test fixes in the Discord app directly. Share Preview bypasses the Discord cache and fetches your page fresh every time.

Share Preview also flags specific errors: missing og:image tags, relative URLs, unsupported image formats, tags that are too long, and pages that return errors for the OG image URL. You get a checklist of what is broken and what is correct, across all six platforms at once.

Test Your Discord Embed Right Now

Paste your URL and see exactly how Discord will show your link preview. No sign-up needed. Results in under 5 seconds.

Open Share Preview

Discord Embed Specifications: Sizes, Limits, and Formats

Discord has specific limits for each part of the embed. Staying within these limits ensures your embed displays exactly as intended.

Property Recommended Maximum / Limit
og:title 60 to 80 characters 256 characters (truncated beyond this)
og:description 100 to 200 characters 350 characters visible in embed
og:image width 1200 px No strict maximum, but very large images scale down
og:image height 630 px No strict maximum
og:image aspect ratio 1.91:1 (landscape) Square images display but may be cropped
og:image file size Under 1 MB 8 MB maximum (larger images fail silently)
Image formats JPEG or PNG Also supports GIF and WebP. SVG not supported.
Image protocol HTTPS HTTP images blocked since 2020
Cache duration N/A Approximately 30 minutes

Image Dimensions in Detail

The 1200 x 630 px size is the standard for all major platforms. Discord uses this size to display a large image embed below the title and description. If your image is smaller than roughly 400 x 300 px, Discord may display it as a small thumbnail on the right side of the embed instead of a full-width image, which is significantly less impactful.

Animated GIFs are supported and will play in the Discord embed. Keep animated GIFs under 8 MB. Very long animations or high frame rates may cause performance issues for users on slower connections.

NSFW Images and Content Filtering

Discord applies content filtering to embedded images in non-NSFW channels. If your og:image contains adult content and is shared in a standard channel, Discord may suppress the image preview entirely. Mark channels as NSFW in Discord server settings if your content requires it.

Minimum Image Size for Large Preview

To trigger the large image embed format (image displayed below the title), your og:image must be at least 400 x 300 px. Anything smaller shows as a right-aligned thumbnail. The 1200 x 630 px size ensures maximum compatibility and the best visual result across Discord, Twitter, LinkedIn, and Facebook simultaneously.

Pro tip: Use the same 1200 x 630 px image for og:image and twitter:image. One image, all platforms. Read more in our complete OG image guide and our Twitter card validator guide.

Discord Embeds vs. Other Platform Previews

Discord reads the same Open Graph standard as other platforms, but there are subtle differences in how each platform handles edge cases. Understanding these differences helps when you need platform-specific behavior.

Platform Image tag read Twitter:image Cache duration JS rendering
Discord og:image Not read ~30 minutes No
Twitter / X og:image or twitter:image Yes (preferred) ~7 days No
LinkedIn og:image Not read ~7 days No
Facebook og:image Not read Scraper-controlled No
Slack og:image Not read ~1 hour No

The key takeaway: none of these platforms execute JavaScript. Your OG tags must be in server-rendered HTML. Discord is unique in that it explicitly does not fall back to twitter:image, so if you only have twitter:image set, Discord will show no image. Always set og:image.

For a deeper look at how link previews work across all platforms, read our complete link preview guide.

Frequently Asked Questions

Why is my Discord embed not showing an image?

The most common reasons are: the og:image URL uses a relative path instead of an absolute URL, the image is served over HTTP instead of HTTPS, the image format is not supported (Discord requires JPEG, PNG, GIF, or WebP), the image file exceeds 8 MB, or the page uses JavaScript to render the image tag so Discord's bot never sees it.

Fix: use an absolute HTTPS URL for og:image and confirm the tag appears in the raw HTML source by right-clicking the page and selecting View Page Source.

How do I refresh a Discord embed cache?

Discord caches link previews for approximately 30 minutes. To force a refresh you can: add a query string to the URL (e.g., ?v=2), wait for the 30-minute cache to expire naturally, or delete the original message and resend the link. There is no manual "purge cache" button in Discord itself.

Use Share Preview to test your updated embed instantly without waiting for Discord's cache.

Can you disable Discord link previews?

Yes, from two angles. As a user, go to Discord User Settings > Text & Images > and toggle off "Show website preview info from links pasted into chat". As a page owner, you can suppress embeds by removing all og: meta tags from your page, though this also disables previews on other platforms like Slack and LinkedIn.

What is the difference between a Discord embed and a Twitter card?

A Discord embed is the automatic link preview Discord shows when you paste a URL into chat. It reads og:title, og:description, og:image, and og:url from the page. A Twitter card is the preview shown on X/Twitter when a link is shared in a tweet. Twitter reads both og: tags and its own twitter: prefix tags (twitter:card, twitter:title, twitter:image). Both formats use the same underlying OG markup, but Twitter cards support additional card types like summary_large_image and player cards that Discord does not use. See our Twitter card validator guide for the full breakdown.

Does Discord use og:image or twitter:image?

Discord uses og:image. It does not read the twitter:image tag. If your page has both tags, Discord will use og:image. If og:image is missing but twitter:image is present, Discord will not show an image in the embed. Always set og:image with an absolute HTTPS URL to ensure Discord can display a preview image.

See How Your Link Looks on Discord, Twitter, LinkedIn, and More

Share Preview shows you the actual embed cards for all major platforms at once. Fix issues before your audience sees them. Free, no sign-up.

Test My Link Preview Now

Related Guides