Menu
When someone sends a link in Skype or Discord, it can show an image and description, for example:
I think it's because of <meta> tags in the HTML <head> element.
But HTML supports hundreds of <meta> tags... I found this page on GitHub, Link: https://gist.github.com/lancejpollard/1978404
And that's so many tags. Is there someone who knows which tags are used to provide these images and descriptions on Skype and Discord?
I tried adding some meta tags, favicon, and title, but it doesn't work and I don't know which <meta> tags I need.
Code I tried:
<title>Weird Website</title>
<meta name="description" content="Ehm.. weird website"/>
<meta name="url" content="http://www.weirdwebsite.idk/">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
And it looks like this...
Skype is taking the <title> contents but missing the image:
Discord only shows a basic link:
Does anyone know how to automatically add image and some text when a link is shared in these apps? (btw zzz.com isn't my website, only for example)
Thanks,
Oliver.
740
<meta property="og:title" content="Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://my.site.com" />
<meta property="og:image" content="http://my.site.com/images/thumb.png" />
<meta property="og:description" content="Site description" />
<meta name="theme-color" content="#FF0000">
<!-- Include this to make the og:image larger -->
<meta name="twitter:card" content="summary_large_image">
And the image displayed as the link preview on Skype is the thumb image specified in og:image (that is not available anywhere else on the page).
Keep in mind that Skype may also cache information.
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
