如何制作 Skype 友好的链接（预览图像标签）

Posted 2023-02-25

【中文标题】如何制作 Skype 友好的链接（预览图像标签）

【英文标题】：How to make Skype-friendly links (preview image tags)

【发布时间】：2016-06-05 22:17:24

【问题描述】：

在 Skype 上共享某些链接会触发程序显示带有页面图像的预览。在我工作的网站上 - 某些页面上有大图像，但 Skype 取而代之的是该网站的徽标。我无法找到哪些元标记可以让 Skype 拾取预期的图像并进行预览。

我有一个<link rel="image_src" href="http://www.example.com/path/to/img.png" />，可用于 Facebook 共享预览（img.png 用于代替网站徽标）但不适用于 Skype。

那么你将如何提示 Skype 应该使用哪个图像进行预览？

【问题讨论】：

这是一个很好的问题。我想测试是唯一的方法......

【参考方案1】：

我需要找到一些资源来支持这一点，但我认为如果您定义了一些开放图元数据，它将选择其中指定的图像。例如，我的一个网站中有这些：

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

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

【讨论】：

谢谢，成功了！最初我做错了，因为我省略了og:type。所需的标签是title、type、url 和image，有趣的是description 也阻止了良好的预览——删除它并只留下其他 4 个导致 Skype 显示一个带有图像的块。

嗨，Skype 执行 javascript 吗？我有 Angular 应用程序和那些由 javasctipt 收缩的字段。

我非常怀疑，@user1315599。想象一下，如果他们这样做了 Skype 服务器上的负载！相比之下，从静态 html 中获取 og:image 标签相对便宜。

@yu.pitomets 我建议对这些元标记使用服务器端渲染。您可以设置一个重写规则，仅将来自 Skype 的流量（我认为 Skype bot 用户代理是 SkypeUriPreview）重定向到页面的服务器端呈现版本。您可以将此页面设置为仅包含这些元标记的精简版本。或者你可以使用像prerender.io 这样的预渲染代理服务器。我已经使用这些设置与 Facebook 和 Twitter 共享链接。

感谢@Alvaro，但是我们可以为Skype或Facebook配置其他标题吗？我的意思是它们都是？

【参考方案2】：

我们在 2021 年，这个 Skype 问题仍在继续！ ：/

我通过微软论坛交流，有几个用户有同样的问题。

我的开放图元数据定义明确，实际上链接在 Facebook 和 Twitter 上预览良好，但在 Skype 上却不行。

我已经向 Skype 报告了这个错误，希望他们能回答...