前端需要了解的：开放图谱协议（The Open Graph protocol）
时间：2022-12-21 17:00:00
Open Graph 最初是互联网协议 Facebook 用于标准化网页中元数据的使用，使社交媒体能够用丰富的图形对象来表达共享的页面内容。
什么是 Open Graph Protocol(开放图谱协议)
??Open Graph Protocol(开放图谱协议)OG 协议。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签)类别。
是一种为社交分享而生的 Meta 标签，用于标准化网页中元数据的使用，使社交媒体能够以丰富的图形对象共享页面内容。
它允许在 Facebook 其他网站可以像 Facebook 内容也有丰富的图形对象，从而促进 Facebook 与其他网站集成。
简单地说，该协议用于标记页面的类型和描述页面的内容。虽然有这些不同的技术和模式，可以结合在一起，但没有一种技术能提供足够的信息来丰富社交图片中的任何网页。
Open Graph 该协议以现有技术为基础，以开发人员使用的简单性为关键目标，为开发人员提供实施方案，为许多技术设计决策提供信息。
当我们分享链接时，举个简单的例子（URL）给朋友的时候，有的 App 它只是一个链接，在某些方面 APP 上。
像飞书、WhatsApp、Twitter、Facebook 等待社交软件，会根据链接抓取你给定 URL 共享显示的内容，以确定要包含哪些属性。
你可以在页面的头部代码中包含它og:tags来显式定义属性；如果没有这些显示定义的信息，这些社交软件将完成给定 URL 抓取页面后推断属性，然后组装共享框并显示这些属性信息。事实上，这一切也取决于具体的 APP 实现(是否会取决于URL抓取内容)
为什么要用？ OG 协议？
??我们知道，构建内容和维护网站通常需要很多时间。当然，我们希望我们的内容在社交分享中脱颖而出。让我们看看是否有 OG 同一链接在协议中分析的差异：
在没有开放图谱协议的情况下，社交软件正确地获取了页面的标题和描述，但它所包含的信息有限，看起来不吸引人。
互联网上的内容通常至少有一个目标——与他人分享。如果你只是把它发给一个朋友，你是否打开图谱协议可能并不重要。
但是，如果你想在任何具有丰富预览功能的社交网络或应用程序上运营、分享或传播它，你会希望预览能尽可能吸引别人的注意。以下丰富有效的信息将鼓励人们点击查看您的内容。
如果你的内容没有打开地图协议标签怎么办？也许对网站内容没有影响，但你的内容将很难从互联网上的大量其他内容中脱颖而出。
??若网页使用 OG 协议，分享结果会结构化展示，这样的网站在被链接分享的时候会有内容展示更丰富，同时网站的转化率会提高。
如何给网站添加 OG 协议
基础属性
??将您的网页转换为可控的结构化图形对象，您需要向页面添加基本元数据。四个基本开放图形标签是：
og:title- 指定你想要在共享时展示的标题。这通常与你网页的</code>标签是一样的，比如百度一下，你就知道了。</li> <li><code>og:type</code>- 对象的类型，如video.movie据您指定的类型，可能还需要添加其他不同的属性。</li> <li><code>og:image</code>- 一个图片 URL。</li> <li><code>og:url</code>- 指定你想分享的 URL/当前页面 URL(可以是短链接)</li> </ul> <p>给网站设置 OG 标签时，应与其他元数据一起放置<code><head></code>标签中使用的标签仍然是<code><meta></code>，添加方法如下：</p> <pre><code><meta property="“[NAME]”" content="“[VALUE]”" /></code></pre> <p>??例如，以下是 IMDB 上 The Rock 的 Open Graph 协议标记：</p> <pre><code><html prefix="og: https://ogp.me/ns#"> <head> <title>The Rock (1996) ... ...