飞书里面给链接生成一个预览是怎么做到的？

前段时间我们项目接到了个H5活动页的需求，既然是H5活动页，那么其目的就是通过大量的传播进行引流、促活，我们的目的也正如此。PM希望我们的H5页面在别家的APP内传播时能自动解析我们的链接，这怎么做呢？当时我们也不知道，因此经过一番调研得知需要用到本文的主人公 "OG"

本文就来分享一下我同事独钓寒江雪总结的关于OG的相关知识！文章不是很长，希望对大家有所帮助！

原文：https://juejin.cn/post/7023173942001008670

Open Graph 是一种互联网协议，最初由 Facebook 创建，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。

看到这个标题，也许你会陷入疑惑，什么是开放图谱协议（The Open Graph protocol）？我们为什么似乎很少见到它？它到底有什么用呢？确实，对于很多前端开发来说，开放图谱协议（The Open Graph protocol）是一个比较陌生的概念。

什么是 Open Graph Protocol

Open Graph Protocol（开放图谱协议），简称 OG 协议。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴，是一种为社交分享而生的 Meta 标签，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。它允许在 Facebook 上，其他网站能像 Facebook 内容一样具有丰富的“图形”对象，进而促进 Facebook 和其他网站之间的集成。

简单来说，该协议就是用来标注页面的类型和描述页面的内容。其灵感来自 Dublin Core^[1]、link-rel canonical、Microformats 和 RDFa，虽然有这些不同的技术和模式并且可以组合在一起，但没有一种技术可以提供足够的信息来丰富地表示社交图中的任何网页。Open Graph 协议建立在这些现有技术的基础上，以开发人员使用的简单性为关键目标，并为开发人员提供了一个实施方案，它为许多技术设计决策提供了信息。

看了这么多，好像还是不理解什么是开放图谱协议？

举个简单的例子，当我们分享一个链接（URL）给朋友时，在有的 App 上它只是一个链接，而在有的 APP 上，他却可以包含如下图所示的标题、图片、描述等信息：

像飞书、WhatsApp、Twitter、Facebook 等社交软件，都会根据链接去抓取你给定 URL 的内容，以确定要包含哪些属性来进行共享展示。你可以通过在页面的头部代码中包含 og:tags 来显式定义属性；如果没有这些显示定义的信息，这些社交软件将在完成对给定 URL 的页面抓取后推断属性，然后使用这些属性信息组装共享框并进行展示。

其实这一切也是依赖于具体 APP 的实现的（是否会根据URL去抓取内容），对于同一 URL，我们可以看看在飞书和微信上的不同形态：

微信（此处手动@微信官方，为啥微信不做链接解析呢？有懂产品的小伙伴给解释一下不？）：

飞书：

为什么需要 OG协议？

我们知道，构建内容和维护网站通常可能需要耗费大量时间，我们当然希望自己的内容能够在社交分享时能够脱颖而出。先来看下有无 OG 协议时，同一个链接被解析的差别：

没有开放图谱协议时：此时社交软件正确地获取了页面的标题和描述，但它所含有的信息有限，看起来并不诱人。

有开放图谱协议时：

互联网上的内容通常至少有一个目标——与他人分享。如果你只是将它发送给一个朋友，有没有开放图谱协议可能不重要。但是如果你想运营、分享或希望它在任何具有丰富预览功能的社交网络或应用程序上共享、传播时，你会希望该预览尽可能抓住别人的眼球。像下面这样丰富而有效的信息将有助于鼓励人们点击查看你的内容。

如果你的内容没有开放谱图协议标签会怎样？也许对于网站内容来说不会有什么影响，但你的内容将很难从互联网上大量其他内容中脱颖而出。

如果网页采用 OG 协议，分享结果会结构化展示，这样站点在被链接分享时会有更丰富的内容展现，同时站点的转化率将会提升。

如何给网站添加 OG 协议

基础属性

要将你的网页转换为可控结构化图形对象，你需要向页面添加基本元数据。四个基本开放图形标签是：

• og:title - 指定你想要在共享时展示的标题。这通常与你网页的