Discord documents link previews and adds component embeds for websites

What this means for you

When you paste a link into Discord, it shows a little card with a title and picture. Discord has now written down exactly how it builds that card, and a website can even design its own card. If your links look wrong in Discord, the new guide explains which tags on your page to fix.

The details

• Component embed: a <script id="discord:component-embed" type="application/json"> in the page <head>, or a <link rel="discord:component-embed"> to a JSON file on the same site. The payload is limited to 3,000 bytes.
• Allowed components: Action Row, link-style Button, Section, Text Display, Thumbnail, Media Gallery (10 items across the embed), Separator and one top-level Container.
• Requirements: server-rendered markup (Discord does not run scripts), reachable by Discordbot/2.0, the whole fetch including images within 10 seconds, and Open Graph tags as a fallback.
• Message data: previews built this way have embed type components with a components array holding one Container.
• Standard previews: Discord reads og:title, og:description, og:site_name, og:image (and twitter: equivalents), og:video (video/mp4, video/webm, video/quicktime), twitter:card, JSON-LD VideoObject and oEmbed. At most 50 MB is fetched within 10 seconds.
• Cache: previews are cached for about 30 minutes; share the URL with a new query string, such as ?v=2, to see edits at once.

What to do next

• Business owners: Nothing required. Your site's existing Open Graph tags keep working.
• Marketers and agencies: Check that pages you share in Discord have og:title, og:description and og:image, and add twitter:card set to summary_large_image for a big image.
• Developers: Bots that read embeds should handle the new components embed type; sites can add a discord:component-embed payload under 3,000 bytes.