Discord Website Embeds

Written on 2023-08-01 22:36 Edited on 2024-09-27 15:12

Important

Discord's proxy caches embeds for 30 minutes. This is not configurable by the website.
You can force it to refresh by appending dummy characters like "#" or random queries.

A Discord website embed is composed of several HTML meta tags, and optionally, an OEmbed JSON file.

Below is a crude diagram of how a Discord website embed is structured.
My apologies for the eyesore.

We won't be talking about section 5 for now, since it's related to OEmbed.

Element Breakdown

Below is the list of elements that I know Discord supports so far.

• og:title - The title of the page, it usually gets displayed in the biggest font size. Represented by the number 1 in the diagram above.
• og:url - The URL to the page. This is used when clicking the author field. Represented by the number 5 in the diagram above.
• og:description - The description of the page. This is shown under the page title. Keep it short! Represented by the number 2 in the diagram above.
• og:image - The image displayed under the description. Must be a URL. Represented by the number 3 in the diagram.
• theme-color - The color of the thin strip on the left of the embed. Must be in hex. Represented by the number 4 in the diagram.

Remarks

Discord by default won't make images large. You must add another meta tag.
Its name must be twitter:card with a content of summary_large_image.

To make the field above the page title appear, you must add an OEmbed file.
Here is an example, taken from the source code of the home page.

OEmbed Definition

To make field 5 appear on your rich embed, you must add a link element to your page's head, with the type application/json+oembed, and an href pointing to your JSON file
Its content is very simple.

• author_name - The text that will appear on field 5 of the image.
• author_url - If this is set, it will turn the author_name field into a link.

Here's an example, again from this website.