18

As your know, when you type a website address (for ex. https://youtube.com), you also send a Rich Embed message of site automatically. How can I set this for my website?

Mixno
  • 402
  • 3
  • 10
Eray
  • 199
  • 1
  • 1
  • 10
  • You need to specify meta tags in your html page. [See an example there](https://stackoverflow.com/questions/54266598/meta-tags-for-url-with-description-and-image-in-skype-discord) – Mixno Dec 14 '19 at 15:28
  • 1
    @mixno please don't answer in the comments but add a real answer – Tarick Welling Jan 21 '20 at 16:11
  • @TarickWelling sorry, i didn't know that my answer will be posted as comment. – Mixno Jan 21 '20 at 18:18

2 Answers2

41

Put this HTML code at the top of your site.

<title>Website Name</title>
<meta content="Embed Title" property="og:title" />
<meta content="Site Description" property="og:description" />
<meta content="https://embed.com/this-is-the-site-url" property="og:url" />
<meta content="https://embed.com/embedimage.png" property="og:image" />
<meta content="#43B581" data-react-helmet="true" name="theme-color" />

The last one is the color of the embed. It is of note that discord doesn't always update the embed immediately.

If you want the embedded image large (like how YouTube URLs and image hosts look) add

<meta name="twitter:card" content="summary_large_image">

P.S: Don't forget to replace "Website Name" and "Site Description" with the site's name and description.

Kaki
  • 9
  • 3
Humboldt123
  • 626
  • 6
  • 8
  • 1
    It's good that you note open graph tags, that's what poster is asking about; it's odd that you include React and Twitter specific stuff. – Ram Jun 06 '22 at 23:22
17

As Skrub said, Discord doesn't always update embed because it keeps in cache the embed content for one URL.

You can however force updating it by providing a different URL, adding an # or ?a=b at the end like https://example.com/#a.

Kureteiyu
  • 529
  • 4
  • 10