乐趣区

关于前端:前端应该知道的开放图谱协议The-Open-Graph-protocol

jiezi

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、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 – 指定你想要在共享时展现的题目。这通常与你网页的 <title> 标签雷同，例如“百度一下，你就晓得”。
  • og:type– 对象的类型，例如“video.movi​​e”。依据你指定的类型的不同，可能还须要增加一些其余的不同属性。
  • og:image – 一个图片 URL。
  • og:url – 指定你想要共享的 URL/ 以后页面的 URL（能够是短链接），例如，“https://www.baidu.com/”。

  各标签管制区域如下图所示：

  给网站设置 OG 标签时，应该将其与其余元数据一起搁置在 <head> 标签中。应用的标签还是<meta>，增加形式如下：

<meta property="“[NAME]”" content="“[VALUE]”" />

  例如，以下是 IMDB 上 The Rock 的 Open Graph 协定标记：

<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>

凋谢图标签介绍

  下面介绍了根本元数据标签，上面将进一步对一些属性进行阐明。如果你想要取得更全面的信息，请转到 Open Graph (https://ogp.me/)进行浏览。

title

  最多 65 个字符。

<title>your keyword rich title of the website and/or webpage</title>

description

  最多 155 个字符。

<meta
  name="description"
  content="description of your website/webpage, make sure you use keywords!"
/>

og:title

  最多 35 个字符。

<meta property="og:title" content="short title of your website/webpage" />

og:site_name

  你的内容所在的整个网站的名称。如果你的对象是较大网站的一部分，则应为整个网站的名称。

og:url

  以后网页地址的残缺链接。

<meta property="og:url" content="https://www.example.com/webpage/" />

og:description

  页面的形容，最多 65 个字符。相似 og:title，这通常应该和你网站的 <meta type=“description”> 标签雷同，当然，你也能够使其不同。

<meta property="og:description" content="description of your website/webpage" />

og:image

  尺寸小于 300KB 且最小尺寸为 300 x 200 的图像（JPG 或 PNG）。此图像个别应通过具备无效 非自签名证书 的 HTTPS 链接提供。

<meta
  property="og:image"
  content="//cdn.example.com/uploads/images/webpage_300x200.png"
/>

  尽管应用 og:image 增加图像比拟容易，但有时让你的图像正确显示可能具备挑战性。凋谢图谱协定包含一些图像标签，例如 og:image:urlvsog:image:secure_url 以及 og:image:width 和og:image:height，能够对图像进行更粗疏的管制。

  尽量确保你遵循凋谢图形文档中的所有正文和示例。此外，一些社交网络可能会对图像有特殊要求。例如，[Twitter
要求](https://developer.twitter.com…)比例为
2:1，最小尺寸为 300x157，最大尺寸为 4096x4096，小于 5MB，JPG、PNG、WEBP 或 GIF 格局。

og:video

  og:video 标签与 og:image 标签雷同，用于补充“图形”对象的视频文件的 URL。

og:type

  为了在图形中示意你的对象，你须要指定其类型。这里 是可用的全副类型列表。你还能够指定本人的类型。

<meta property="og:type" content="article" />

  设置凋谢图标签时，你须要理解哪种类型对你的网站更有意义。如果你的页面专一于单个视频，则应用“video”类型可能是有意义的；如果它是一个没有特定垂直行业的个别网站，你可能更适宜应用“website”类型。

og:locale

  资源的语言环境。如果你有其余语言翻译可用，你也能够应用 og:locale:alternate。如果不指定 og:locale，则默认为 en_US。

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

video/audio

  还能够共享音频 / 视频。例如，Facebook 和 Twitter 能够很好地共享视频。当然，WhatsApp 也有这个选项，比方当你分享 Instagram 或 Youtube 链接时，WhatsApp 的预览会在利用内附带视频播放。

products, persons, movies 等

  此类信息实际上取决于提供商（Facebook、Google），WhatsApp 和 Twitter 能够启用对产品的反对。这样，你与之共享链接的人可能会在共享链接“小部件”中看到价格、均匀评分、评论等内容。

favicon

  要取得对所有浏览器和设施的最佳图标反对，请浏览此内容。

Twitter 和其余应用凋谢图的社交媒体

  大多数社交网络都遵循凋谢图谱协定的根本元数据标签，当然，一些社交利用也会包含本人的扩大，以帮忙 自定义 其生态系统中的一些外观展现。

  例如，Twitter 容许你指定twitter:card，这是你在展现你的网站时能够应用的“卡片”类型。他们的卡类型包含：

  • summary
  • summary_large_image
  • app
  • player

  这将帮忙你抉择如何在其 Feed 中应用你的链接。例如，如果你应用了summary_large_image，只有你在 og:image 标签中提供了链接，Twitter 就会显示带有高分辨率大图片的链接。

  要获得最佳 Twitter 反对，请浏览 Twitter 的相干文档。

  要获得最佳 Facebook 反对，请浏览 Facebook 的分享指南。

  以下是无关如何在某些社交媒体网站上应用凋谢图标签的文档链接，供你参考：

  • Twitter
  • Facebook
  • Pinterest
  • LinkedIn

测试你的凋谢图标签

  如果你在开发过程中遇到困难，也能够应用一些社交媒体提供的工具来测试、调试你的标签：

  • Twitter
  • Facebook
  • Pinterest

进一步探索凋谢图标签

  尽管以上介绍涵盖了一个网站中可能蕴含的大部分标签，但还有一些标签可能会帮忙你和你的企业在整个社交网络中更多的被吸引和发现。如果你有趣味 深入研究，The Open Graph protocol 官网文档将是一个很好的使用指南。

  如果你只是在寻找 入门示例，例如为博客文章增加设置标签，你能够采纳相似上面的后果：

<meta property="og:site_name" content="Colby Fayock" />
<meta
  property="og:title"
  content="Anyone Can Map! Inspiration and an
introduction to the world of mapping - Colby Fayock"
/>
<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="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/"
/>
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta
  property="og:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta
  property="og:image:secure_url"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta
  property="twitter:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="twitter:site" content="@colbyfayock" />

  如果你正在寻找其余办法来优化和剖析你的内容，上面几个链接兴许会使你感兴趣：

  • 如何将社交媒体图像增加到你的 Github 我的项目存储库
  • 如何了解 Google Analytics 和你网站的流量
  • 如何应用 Google Analytics（剖析）设置和跟踪 YouTube 频道的体现

OG 协定的其余阐明

  不同公司的许多技术审计结果表明，应用 Open Graph 标签 不会帮忙你取得更好的 SEO 排名，它们仅实用于在社交媒体展现丰盛的“图形”对象。

参考资料

  • The Open Graph protocol
  • What is Open Graph and how can I use it for my website?
  • Provide an image for WhatsApp link sharing
  • How to Customize which URL, Text and IMG to Share

  本文首发于集体博客，欢送斧正和 star。

退出移动版