Discord HTML META Tags Big and Thumbnail like image

Issue

I am trying to optimize my <meta> tags to work properly on social media such as Discord.

What I got so far:

<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="URL">

This will display a big image on discord, but I need a thumbnail sized image too.

<meta property="og:image" content="URL">

This would be the thumbnail.

How can I have a big image and a thumbnail using <meta> tags?

Solution

For social media embeds, you can sets the specific width and height of the image so that it displays accordingly using og:image properties.

<meta property="og:image" content="path_to_image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">

You can also set the colour to display for some platforms such as Discord with the theme-color property.

<meta name="theme-color" content="#FFFFFF">

Answered By – Skully

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.