OG协议
Open Graph Protocol(开放图谱协议)。它是 Facebook 在 2010 年 F8 开发者大会公布的一种，属于 Meta Tag （Meta 标签)的范畴是一种的 Meta 标签，。它允许在 Facebook 其他网站可以像 Facebook 内容也有丰富的图形对象，从而促进 Facebook 与其他网站集成。
简单地说，该协议用于标记页面的类型和描述页面的内容。它的灵感来自于Dublin Core、link-rel canonical、Microformats 和 RDFa，虽然有这些不同的技术和模可以结合在一起，但是。Open Graph 该协议以现有技术为基础，以开发人员使用的简单性为关键目标，为开发人员提供实施方案，为许多技术设计决策提供信息。
当我们分享链接时（URL）给朋友时，在有的 App 它只是一个链接，在某些方面 APP 上面，他可以包含标题、图片、描述等信息，如下图所示
介绍开放图标签
以上介绍了基本元数据标签，下面将进一步解释一些属性。如果您想获得更全面的信息，请转移到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 要求比例为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
请阅读此内容，以获得所有浏览器和设备的最佳图标支持。
你只是在寻找，例如，在博客文章中添加标签，您可以使用以下结果：
<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_80y_-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" />