Back to blog

OG images

Discord Link Previews: How to Make Your Links Unfurl

June 21, 2026 · 6 min read · Grabbit Team

Discord Link Previews: How to Make Your Links Unfurl

When you paste a link into Discord, it usually unfurls into a card with a title, a description, and an image. When it does not, the cause is almost always the same: the page you linked is missing the Open Graph tags Discord reads, or its og:image points at something Discord cannot fetch. This guide covers both the why and the fix, including how to give the embed a real image of your page.

How Discord builds a link preview

Discord does not screenshot your page or guess at its content. When a URL is posted, Discord fetches the raw HTML and looks for Open Graph meta tags in the <head>. Those four tags drive the entire embed:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A one-line summary of the page." />
<meta property="og:image" content="https://yourdomain.com/og.png" />
<meta property="og:url" content="https://yourdomain.com/page" />

og:title and og:description become the text. og:image becomes the picture. If a page has no Open Graph tags at all, Discord falls back to the bare URL with no card. That is what a "broken" preview almost always is: missing tags, not a Discord bug.

Two details trip people up:

  • Discord reads the raw HTML, not the rendered page. It does not run your JavaScript. If your meta tags are injected client-side (a single-page app that sets them after load), Discord never sees them. The tags must be in the HTML the server sends.
  • og:image must be an absolute URL. A relative path like /og.png will not resolve. Use the full https://yourdomain.com/og.png, and make sure that URL is publicly reachable, not behind a login or a redirect Discord cannot follow.

How to make Discord links show a preview

If your links are coming up bare, work through this in order:

  1. Add the four og: tags above to the page's <head>, server-rendered.
  2. Set og:image to an absolute, public URL that returns an actual image (not an HTML page).
  3. Use a 1200 by 630 image. That is the 1.91 to 1 ratio Discord renders as a large card. Smaller images may show as a small thumbnail beside the text instead.
  4. Confirm the tags are in the served HTML. View source on the live URL (or curl it) and check the tags are there before any JavaScript runs.
  5. Re-fetch if you changed tags. Discord caches per URL, so append ?nocache=1 to force a fresh read (more on this below).

The one part that is genuinely more work than typing four meta tags is producing the image itself, especially if you want it to reflect the actual page rather than a generic logo.

Making the og:image a real render of your page

For a marketing page, a docs page, or a dashboard, the best preview image is often just a clean shot of the page itself. You can produce that with a screenshot API: point it at the URL, get back a hosted image, and use that image as your og:image.

curl https://api.grabbit.live/v1/grabs \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://yourdomain.com/og",
    "width": 1200,
    "height": 630,
    "format": "png",
    "delay_ms": 500
  }'

The response includes a hosted image_url:

{
  "id": "grb_01jx...",
  "status": "done",
  "image_url": "https://cdn.grabbit.live/grabs/grb_01jx....png",
  "width": 1200,
  "height": 630,
  "format": "png",
  "bytes": 71240,
  "execution_ms": 1240
}

width accepts 320 to 1920 and height 240 to 1080, so the 1200 by 630 Discord card is in range. delay_ms (0 to 10000) gives client-rendered content or web fonts a moment to settle before the capture fires. Drop the returned image_url into your tag:

<meta property="og:image" content="https://cdn.grabbit.live/grabs/grb_01jx....png" />

Capture once per unique page and cache the image_url alongside the page record rather than rendering on every request. A common pattern is to build a dedicated /og route with your normal components, capture that, and reuse the result everywhere. The same template-and-cache approach is covered in how to generate dynamic OG images from any URL, and the Next.js specifics are in adding dynamic OG images in Next.js.

The upside of one correct og:image is reach: Discord, Slack, X, LinkedIn, and Facebook all read the same 1200 by 630 Open Graph image, so a single tag fixes the preview everywhere at once.

Why your preview still is not showing

If the tags are present and the image URL works in a browser but Discord still shows nothing, run through these:

  • Discord cached the old version. Discord stores the metadata it fetched the first time a URL was posted. Editing your tags will not update an embed that already rendered. Append a unique query string, such as ?nocache=1, and paste the link again so Discord treats it as a new URL and re-fetches.
  • The image is behind auth or a redirect. If og:image requires a login, sits behind a paywall, or redirects in a way Discord will not follow, the card renders without an image. Test the raw image URL in a private browser window.
  • Tags are set by JavaScript. Discord reads static HTML and does not execute scripts. Server-render the meta tags.
  • The link preview toggle is off for the reader. This one is on the viewer's side, not yours: if someone has turned off "Show embeds and preview website links pasted into chat" in their Discord settings, they will not see any card regardless of your tags. You cannot fix that from the page.
  • The image is too small. Below roughly 300 pixels wide, Discord may render a small thumbnail instead of a full card. Use 1200 by 630.

Work top to bottom: re-fetch first (it is the most common), then verify the image is public, then confirm the tags are server-rendered.

The short version

A Discord link preview is just your page's Open Graph tags, rendered as a card. Add og:title, og:description, og:image, and og:url server-side; make og:image an absolute, public, 1200 by 630 URL; and append ?nocache=1 to force a refresh after changes. If you want the image to be a real render of the page instead of a static logo, a screenshot API turns the live URL into the hosted image you point og:image at. New to the format? Start with what is an OG image.

FAQ

How do I make my Discord links show a preview?
Add Open Graph meta tags to the page you are linking: og:title, og:description, og:image, and og:url in the HTML head. Discord fetches those tags when the link is posted and builds the embed from them. The og:image must be an absolute URL (https://yourdomain.com/og.png), at least 300 pixels wide, and reachable without a login. If the tags are present and correct, the preview unfurls automatically.
Why is my Discord link preview not showing?
The usual causes are: the page has no og:image tag (or it points at a relative or broken URL), the image sits behind auth or a redirect Discord cannot follow, the page requires JavaScript to render the tags (Discord reads the raw HTML, it does not run JS), or Discord cached an earlier version of the page. Confirm the tags are in the served HTML, then append ?nocache=1 to the URL to force a re-fetch.
What size should a Discord link preview image be?
Use 1200 by 630 pixels, the 1.91 to 1 ratio Discord renders as a large embedded card. Smaller images still work but Discord may show them as a small thumbnail beside the text instead of a full-width image. 1200 by 630 is the same size that works for Facebook, X, LinkedIn, and Slack, so one image covers every platform.
How do I refresh a Discord link preview after changing my OG tags?
Discord caches the metadata it fetched the first time a URL was posted, so editing your tags will not update an existing embed. Append a query string such as ?nocache=1 (or any unique value) to the URL when you paste it again. Discord treats it as a new URL and re-fetches the Open Graph tags, so the updated preview appears.

Capture any website with one API call

Get a free test key and capture your first screenshot in two minutes.

Get your free test keyLearn more

Written by

Grabbit Team

Screenshots as a service

The team behind Grabbit, the screenshot API for developers and AI agents. We write about web capture, rendering, and automating screenshots at scale.

Keep reading

OG imagesWhat Is an OG Image? Why Your Shared Links Look Broken
OG images

What Is an OG Image? Why Your Shared Links Look Broken

An OG image is the preview image that appears when a link is shared on social media. Learn what it is, why it breaks, and how to automate one per page.

Jun 13, 2026 · 5 min read

OG imagesHow to Generate Dynamic OG Images from Any URL
OG images

How to Generate Dynamic OG Images from Any URL

Generate a unique Open Graph image for every page by pointing a screenshot API at your HTML template. One template, zero design work, scales to any number of pages.

Jun 12, 2026 · 4 min read

How to Add Dynamic OG Images in Next.js
OG images

How to Add Dynamic OG Images in Next.js

Add dynamic Open Graph images to a Next.js app two ways: the built-in opengraph-image convention with @vercel/og for templated cards, and a screenshot API when you want the OG image to be a real render of the page.

Jun 15, 2026 · 4 min read