Meta tags for URL with description and image (In Skype, Discord)

Oli*_*ver 3 html meta html5 skype discord


When somone send link in Skype or Discord, it can create image and description, like is shown on screenshots:
Skype(Img + Descr)
不和谐(Img + Descr)

I think its because of <meta> tags in HTML <head>. But in HTML can be hunderts 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 know only tags, which is making these images and descriptions on Skype and Discord?

I tried adding some meta tags, favicon, and title, but it not works, 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" />
Run Code Online (Sandbox Code Playgroud)

And it looks like this:

Skype(页面标题)
(Skype is taking <title> but where is an image?)
不和谐(仅URL)
And.. discord shows only basic link. Who knows how to automatically add image and some text when is sent a link? (btw zzz.com isn't my website, only for example)
Thanks,
Oliver.

小智 6

<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" />
Run Code Online (Sandbox Code Playgroud)

并且在Skype上显示为链接预览的图像是og:image中指定的拇指图像(页面上其他任何地方均不可用)。

请记住,Skype可能还会缓存信息。

  • 您可以使用 https://metatags.io 为您的网站生成元标记,它非常有用 (5认同)