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?
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">