
对于从手机Safari 分享到微信的链接,有的可以在聊天界面展示卡片形式,经过探索发现,只需要支持开放图协议即可。
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta
property="og:image"
content="https://ia.media-imdb.com/images/rock.jpg"
/>
...
</head>
...
</html>在react 中,想要动态修改meta 标签,可以使用react-helmet。当然,像飞书在发送链接的时候也是支持og协议的,但它应该是服务端抓取的接口,读不到js动态改的meta 内容,如果想支持好这种场景,就需要使用SSR。