如何实现Telegram/Twitter分享URL预览-资源仓库

反诈示警：如遇到文章内跳转至别的网站或产生需要交钱，交易等行为，均为诈骗行为，请谨慎对待。对于网上兼职、刷单、刷信誉的就是诈骗，请勿相信！需要提供身份证明、短信验证和短信链接点击都是诈骗，请不要提供！同时请下载“国家反诈中心”App能自查自检,规避诈骗电话,免遭损失。

我们经常会看到有人在 Telegram 或是 Twitter 上分享链接时，它会自动尝试获取链接的预览信息，包括标题、描述和图片。

如何实现Telegram/Twitter分享URL预览，插图，来源：资源仓库www.zycang.com

如此当接收者看到时，可以立即获取到分享链接的一些重要信息。这有助于接收者更好地了解链接的内容，决定是否点击查看详细内容。

实现这种功能的关键，是在分享的链接中嵌入适当的元数据信息，应用软件会自动解析，请求分享链接的预览信息，并根据返回的元数据生成预览卡片。

对于国内的应用软件，目前我试过抖音，它可以实现分享和复制粘贴都自动解析，而微信、QQ等只能实现分享的自动解析。

对于国外的应用软件，我只实验过Telegram，它可以实现分享和复制粘贴都自动解析，但我想Facebook、Twitter、Instagram这些应用应该也都是可以的。

如果你的网址无法被自动解析，要想实现URL链接的分享预览，你可以使用 Open Graph 协议或 Twitter Cards，然后在 HTML 的<head> 标签中，添加以下 meta 标签来定义链接预览的信息。

使用时，将所有meta全部复制过去，然后根据需求进行自定义即可。

还要注意两点，确保你页面的服务器正确配置了 SSL 证书，以及确保链接的URL有效（即：服务器没有做白名单限制）。

<head>
<!-- Open Graph 协议 -->
<meta property="og:title" content="预览标题">
<meta property="og:description" content="预览描述">
<meta property="og:image:width" content="图片宽度">
<meta property="og:image:height" content="图片高度">
<meta property="og:image" content="预览图片的URL">
<meta property="og:url" content="链接的URL">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="预览标题">
<meta name="twitter:description" content="预览描述">
<meta property="twitter:image:width" content="图片宽度">
<meta property="twitter:image:height" content="图片高度">
<meta name="twitter:image" content="预览图片的URL">
<meta name="twitter:url" content="链接的URL">
</head>

等待几分钟，或是清除网站缓存。你就会发现你的网址在分享时也可以实现URL预览了。

：本文采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可，转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性，不附带任何技术服务！
2、本站提供的模板、软件工具等其他资源，均不包含技术服务，请大家谅解！
3、本站提供的资源仅供下载者参考学习，请勿用于任何商业用途，请24小时内删除！
4、如需商用，请购买正版，由于未及时购买正版发生的侵权行为，与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中，请提前注册好百度网盘账号，下载安装百度网盘客户端或其他网盘客户端进行下载；
6、本站部分资源文件是经压缩后的，请下载后安装解压软件，推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益，请邮件联系： 11210980@qq.com 进行处理!

如需 WordPress 优化加速、二次开发、网站维护、企业网站建设托管等服务，点此联系我 | 近期站内热门福利推荐：