#19 Generate meta tags for Discord embeds

已關閉
towerofnix3 年之前創建 · 2 條評論

Woot! Here's a reddit tutorial specifically for Discord embeds. Obviously it'd be good to do general social media support, but I think most is covered by Open Graph anyway?

Notably, Discord apparently supports <meta name="theme-color" content="#rrggbb"> to color the embed sidebar, which is pretty cool and obviously something we'd want to do.

Thanks to Niklink for the suggestion!

Woot! [Here's a reddit tutorial specifically for Discord embeds.](https://www.reddit.com/r/discordapp/comments/82p8i6/a_basic_tutorial_on_how_to_get_the_most_out_of/) Obviously it'd be good to do general social media support, but I think most is covered by Open Graph anyway? Notably, Discord apparently supports `<meta name="theme-color" content="#rrggbb">` to color the embed sidebar, which is pretty cool and obviously something we'd want to do. Thanks to Niklink for the suggestion!
vriska commented 3 年之前

It's a minor detail, but that Reddit post mostly covers how to get Discord to render your page in a certain way, and not why it renders it like that.

Discord has its own JSON embed format, which sites can't directly use. Instead, Discord has heuristics to generate an embed from a site's HTML. Most notably, it can generate an embed from either Open Graph metadata (which was created by Facebook and provides high-level metadata about a page, not specific to any usecase) or an oEmbed JSON file, which is a vendor-neutral format for embeds.

Also, Open Graph has structured metadata for songs, albums, and people. I don't think Discord uses this, but I assume Facebook does, considering that they're the ones who made Open Graph.

This is complicated by the fact that Discord's native embeds don't map 1:1 to either of these, so while a basic embed would be displayed identically if it came from either Open Graph or oEmbed data there are presentations that can only be achieved by one of them. Discord also takes information from other sources. For example, it uses the theme-color meta tag to set a color for the embed. Keep in mind that this is not strictly metadata: some browsers like Chrome for Android use it to color the URL bar.

The best option is probably to include both Open Graph and oEmbed data that semantically maps to the content. If Discord doesn't render that in a useful way, there might be a possible minor tweak, or the user agent could be sniffed so that Discord gets different data designed to result in a specific presentation.

It's a minor detail, but that Reddit post mostly covers how to get Discord to render your page in a certain way, and not *why* it renders it like that. Discord has its own JSON embed format, which sites can't directly use. Instead, Discord has heuristics to generate an embed from a site's HTML. Most notably, it can generate an embed from either [Open Graph metadata](https://ogp.me/) (which was created by Facebook and provides high-level metadata about a page, not specific to any usecase) or an [oEmbed](https://oembed.com/) JSON file, which is a vendor-neutral format for embeds. Also, Open Graph has structured metadata for songs, albums, and people. I don't think Discord uses this, but I assume Facebook does, considering that they're the ones who made Open Graph. This is complicated by the fact that Discord's native embeds don't map 1:1 to either of these, so while a basic embed would be displayed identically if it came from either Open Graph or oEmbed data there are presentations that can only be achieved by one of them. Discord also takes information from other sources. For example, it uses the `theme-color` meta tag to set a color for the embed. Keep in mind that this is *not* strictly metadata: some browsers like Chrome for Android use it to color the URL bar. The best option is probably to include both Open Graph and oEmbed data that semantically maps to the content. If Discord doesn't render that in a useful way, there might be a possible minor tweak, or the user agent could be sniffed so that Discord gets different data designed to result in a specific presentation.
(quasar) nebula commented 3 年之前
所有者

This is done now!

This is done now!
Sign in to join this conversation.
未指派成員
2 參與者
正在加載...
取消
保存
尚未有任何內容