Solution 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="{{ }}">
<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

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:

Solution 2 :

I’m no expert, but here’s how I got it working.

As far as I know, the 3 most basic opengraph meta’s are og:title, og:description and og:image.

For most websites, a relative path to your og:image should work, but there are exceptions like on Discord.

Try changing your og:image from something like:
"images/opengraph.png" to "".

The opengraph image may be cached on Discord for a long time, so if you’d like to refresh it to see changes there, you could change the image filename. Additionally, you could add a query parameter to the end of your URL, which will force Discord to refresh the image for that URL if its previous path isn’t available anymore. Example: "".

Problem :

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.


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 “” 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!


Comment posted by Rob

Note: the

Comment posted by Zeta Reactor

Thank you for the note Rob, but this does not help the issue i have posted above. The closing slash does not affect the tag.

Comment posted by Rob

Which is exactly why I never understand why anyone puts a closing slash there. It does nothing, has no meaning, is uncalled for in the specification and browsers are instructed to ignore it. So it is pointless, worthless and only takes up space.

Comment posted by Ben221199

@Rob It is required when building your website with XHTML5. Or just want your HTML to be complete.

Comment posted by Rob

@Ben221199 The question is tagged HTML. Putting a slash in there does not make it complete because no specification states it is required or needed, it doesn’t do anything, and browsers are instructed to ignore it. You can’t even find any examples of it anywhere in the specifications for any tag/element.