'Open Graph data does not display on Discord

I was browsing my websites and i have noticed that the Open Graph data on one of my sites was no longer displaying on discord. I have tried to change

<meta property="og:url"                content="url" />
<meta property="og:type"               content="website" />
<meta property="og:title"              content="site name" />
<meta property="og:description"        content="description" />
<meta property="og:image"              content="image url" />

Firstly i tought it was related to some settings that might have changed on my part, on discord, but after checking everything, seems that was not the case.

issue

As can be seen in the above screenshot, (1) and (2) my links, both used to have the OG data working, and (3) is Youtube that displays properly.

I have tried to play around with the OG data, i was thinking that might be an issue due to the text/title/image lenght/size, but also that was not the case.

In order to check if the OG Data was properly set and working i have also tried the links on "https://www.opengraph.xyz/" and also on Whatsapp / Facebook where the data is being displayed, so the issue is on discord only.

If anyone has an ideea what is the issue with discord, help would be greatly apreciated.

Thank you for your time!

htmlmetadatameta-tags


Solution 1:[1]

Looks like you're missing the og:site_name meta tag

This is what my solution ended up looking like inside of Django templates, so that's where the jinja2 looking syntax is coming from.

<meta name="og:site_name" content="Pawn Guild"></meta>
<meta property="og:title" content="{{ pawn.name }}">
<meta property="og:type" content="website" />
<meta property="og:description" content="Level {{ pawn.level }} {{ pawn.vocation }}"></meta>
<!-- <meta name="theme-color" content="#91ee91"> -->

{% if pawn.picture %}
    <meta property="og:image" content="{{ pawn.picture.url }}" >
{% endif %}

The {{ pawn.picture.url }} is a relative path from my domain... So for example, your url should look something like /path/to/img, not www.mydomain.com/path/to/img.

The theme-color meta tag changed the sidebar color in the card. I found mine looked pretty good without it, so I left it in there commented.

Here's the result: Discord card Example

These 2 links were helpful for me figuring this out:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions