URL 的元标记,带有描述和图像(在 Skype、Discord 中)
Meta tags for URL with description and image (In Skype, Discord)
当有人在 Skype 或 Discord 中发送 link 时,它可以显示图像和描述,例如:
我认为这是因为 HTML <head>
元素中的 <meta>
标记。
但是 HTML 支持数百个 <meta>
标签...我在 GitHub、Link 上找到了这个页面:https://gist.github.com/lancejpollard/1978404
那就是这么多标签。有人知道在 Skype 和 Discord 上使用哪些标签来提供这些图像和描述吗?
我尝试添加一些元标签、网站图标和标题,但它不起作用,我不知道我需要哪些 <meta>
标签。
我试过的代码:
<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" />
看起来像这样...
Skype 正在获取 <title>
内容但缺少图像:
Discord 只显示基本的 link:
有人知道如何在这些应用中分享 link 时自动添加图片和一些文字吗?
(顺便说一下,zzz.com 不是我的网站,仅供参考)
谢谢,
奥利弗
<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">
并且在 Skype 上显示为 link 预览的图像是 og:image 中指定的缩略图(在页面的其他任何地方都不可用)。
请记住,Skype 也可能缓存信息。
当有人在 Skype 或 Discord 中发送 link 时,它可以显示图像和描述,例如:
我认为这是因为 HTML <head>
元素中的 <meta>
标记。
但是 HTML 支持数百个 <meta>
标签...我在 GitHub、Link 上找到了这个页面:https://gist.github.com/lancejpollard/1978404
那就是这么多标签。有人知道在 Skype 和 Discord 上使用哪些标签来提供这些图像和描述吗?
我尝试添加一些元标签、网站图标和标题,但它不起作用,我不知道我需要哪些 <meta>
标签。
我试过的代码:
<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" />
看起来像这样...
Skype 正在获取 <title>
内容但缺少图像:
Discord 只显示基本的 link:
有人知道如何在这些应用中分享 link 时自动添加图片和一些文字吗? (顺便说一下,zzz.com 不是我的网站,仅供参考)
谢谢,
奥利弗
<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">
并且在 Skype 上显示为 link 预览的图像是 og:image 中指定的缩略图(在页面的其他任何地方都不可用)。
请记住,Skype 也可能缓存信息。