开放图协议(The Open Graph protocol)

对于从手机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。

参考文章

Leave a Comment

邮箱地址不会被公开。 必填项已用*标注