开放图谱协议( The Open Graph protocol ) 简称 OG 学习记录~

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」。

开放图谱协议是什么？

开放图谱协议是一种网页元信息标记协议，属于一种为了分享的 Meta Tag ( meta )标签 , 用于标准化网页中元数据的使用，使得社交媒体可以用丰富的"图形"来描述共享页面的内容

简单来说这个协议就是可以在分享的时候用来标注页面的类型和描述页面的内容设置了 OG 协议可以让链接在一些社交网站上面分享出去的时候会带上标题图片描述 url 等网页信息

开放图谱协议有什么用？

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

SNS 专指社交网络服务，任何网页只要遵守该协议, SNS 就能从页面上提取最有效的信息并呈现个用户设置 OG 是为了美化在 SNS 上分享的链接 , 加强营销效果

简单的来说，就是如果你使用的社交软件允许的话，那么你发出去的网址，如果带上了 OG 标签，就会变得和别人的与众不同，下面放一个简单的小例子：

这是在钉钉上发送的两个网址，第一个网址是我自己测试的时候在一个网页上使用了开放图谱协议，而第二个就是现在我这篇帖子的一个网址，很明显它是没有使用开放图谱协议的。

可以很直观的看出来，如果使用了开放图谱协议，那么你就可以让自己的网页被发出去的时候带上标题，简单的内容简介和小图标，这能够让你的网址比别的网址更加的吸引眼球。

那么开放图谱协议在实际的代码当中要怎么去使用呢？

首先先在 html 中来实际展示一下开放图谱协议的使用:

    <meta property="og:site_name" content="Colby Fayock" />
    <meta property="og:title" content="Tup Rak Xatliki" />
    <meta property="og:description" content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…" />
    <meta property="og:url" content="" />
    <meta property="og:type" content="image" />
    <meta property="og:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftm-image.tianyancha.com%2Ftm%2F17e5112b8009daa9171fe44bd03ff5a0.jpg&refer=http%3A%2F%2Ftm-image.tianyancha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638608511&t=ca32cf597d9625468e68560ef1d6d557"
    />
    <meta property="og:image:secure_url" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftm-image.tianyancha.com%2Ftm%2F17e5112b8009daa9171fe44bd03ff5a0.jpg&refer=http%3A%2F%2Ftm-image.tianyancha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638608511&t=ca32cf597d9625468e68560ef1d6d557"
    />
    <meta property="og:image:width" content="1280" />
    <meta property="og:image:height" content="640" />

上面这段代码就会让网页变成我上面发出去的那个样子

通过设置四个基本元数据可以将网页转化为可控结构化图形对象分别是 :
1. og:title : 指定你想要在共享时展示的标题, 这通常与你网页的 <title> 标签相同比如 :
  
  <title>The Rock (1996)</title>
  
  <meta property="og:title" content="The Rock" />
2. og:type : 对象的类型，例如video.movie。根据你指定的类型的不同，可能还需要添加一些其他的不同属性常用的还有( article, book, movie )比如 :
  
  <meta property="og:type" content="article" />
3. og:image : 要放置的缩略图的地址 URL 比如 :
<meta property="og:image" content="https://ia.mediaimdb.com/images/rock.jpg" />
1. og:url - 指定你想要共享的 URL 当前页面的 URL（可以是短链接），例如 :
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
还有一些可以选择的元数据
1. og:description : 对对象的一到两个句子描述比如:
  
  <meta name="description" content="下载飞书软件和App。飞书音视频电话会议软件APP下载，考勤打卡软件APP下载。支持Windows、Mac、iOS、Android多种操作系统。">
2. og: locale : 定义资源的语言环境如果还有其他的语言翻译就可以使用 og: locale: alternate 如果没有指定 og: locale 则默认为 en_US
3. og: audio 和 og: video : 用于指定对象的音频和视频文件地址
还有一些可选的元数据和一些元数据还可以设定一些结构化属性，具体可以参考

www.npc.ink/16007.html

总结

合理的使用开放图谱协议能够让你的网页在社交媒体上变得更加的优秀，和引人眼球。所以基本的使用还是有必要去了解一下，未来在越来越多的社交平台支持这个协议的基础上，你设计的网页有没有开放图谱协议就会变得有着很大的区别。

引用部分外部文章内容链接：
最全open graph protocol（开放图谱协议）介绍操作指南 - 简书 (jianshu.com)
前端应该知道的：开放图谱协议（The Open Graph protocol） - SegmentFault 思否