帮助中心
这里有最新的使用文档和教程
OG协议，OG协议怎么用？ html5的OG是什么意思？og:title，og:type，og:image，og:url，og:site，og:description，og:url，og:type
OG协议（Open Graph Protocol），也被称为 "开放内容协议"，是一组元标签，即Meta Property=og标签，用来给你的网页标记信息，如网站页面、视频/音频等的标题、类型、页面地址、缩略图、视频/音频等。
基础属性
要将你的网页转换为可控结构化图形对象，你需要向页面添加基本元数据。四个基本开放图形标签是：
og:title- 指定你想要在共享时展示的标题。这通常与你网页的<title>标签相同，例如“百度一下，你就知道”。
og:type- 对象的类型，例如“video.movie”。根据你指定的类型的不同，可能还需要添加一些其他的不同属性。
og:image- 一个图片 URL。
og:url- 指定你想要共享的 URL/当前页面的 URL（可以是短链接），例如，“https://www.baidu.com/[2]”。
给网站设置 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/" /><metaproperty="og:image"content="https://ia.media-imdb.com/images/rock.jpg"/>...</head>...</html>
开放图标签介绍
上面介绍了基本元数据标签，下面将进一步对一些属性进行说明。如果你想要获得更全面的信息，请转到Open Graph[3](https://ogp.me/[4])进行阅读。
title
最多 65 个字符。
<title>your keyword rich title of the website and/or webpage</title>
description
最多 155 个字符。
<metaname="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 链接提供。
<metaproperty="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，可以对图像进行更细致的控制。
尽量确保你遵循开放图形文档[5]中的所有注释和示例。此外，一些社交网络可能会对图像有特殊要求。例如，[Twitter 要求](https://developer.twitter.com...[6])比例为2:1，最小尺寸为300x157，最大尺寸为4096x4096，小于5MB，JPG、PNG、WEBP 或 GIF 格式。
og:video
og:video标签与og:image标签相同，用于补充“图形”对象的视频文件的 URL。
og:type
为了在图形中表示你的对象，你需要指定其类型。这里[7]是可用的全部类型列表。你还可以指定自己的类型。
<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
要获得对所有浏览器和设备的最佳图标支持，请阅读此内容[8]。
Twitter 和其他使用开放图的社交媒体
大多数社交网络都遵循开放图谱协议的基本元数据标签，当然，一些社交应用也会包括自己的扩展，以帮助自定义其生态系统中的一些外观展示。
例如，Twitter 允许你指定twitter:card，这是你在展示你的网站时可以使用的“卡片”类型。他们的卡类型包括：
summary
summary_large_image
app
player
这将帮助你选择如何在其 Feed 中使用你的链接。例如，如果你使用了summary_large_image，只要你在og:image标签中提供了链接，Twitter 就会显示带有高分辨率大图片的链接。
要将你的网页转换为可控结构化图形对象，你需要向页面添加基本元数据。四个基本开放图形标签是：
og:title- 指定你想要在共享时展示的标题。这通常与你网页的<title>标签相同，例如“百度一下，你就知道”。
og:type- 对象的类型，例如“video.movie”。根据你指定的类型的不同，可能还需要添加一些其他的不同属性。
og:image- 一个图片 URL。
og:url- 指定你想要共享的 URL/当前页面的 URL（可以是短链接），例如，“https://www.baidu.com/[2]”。
给网站设置 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/" /><metaproperty="og:image"content="https://ia.media-imdb.com/images/rock.jpg"/>...</head>...</html>
开放图标签介绍
上面介绍了基本元数据标签，下面将进一步对一些属性进行说明。如果你想要获得更全面的信息，请转到Open Graph[3](https://ogp.me/[4])进行阅读。
title
最多 65 个字符。
<title>your keyword rich title of the website and/or webpage</title>
description
最多 155 个字符。
<metaname="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 链接提供。
<metaproperty="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，可以对图像进行更细致的控制。
尽量确保你遵循开放图形文档[5]中的所有注释和示例。此外，一些社交网络可能会对图像有特殊要求。例如，[Twitter 要求](https://developer.twitter.com...[6])比例为2:1，最小尺寸为300x157，最大尺寸为4096x4096，小于5MB，JPG、PNG、WEBP 或 GIF 格式。
og:video
og:video标签与og:image标签相同，用于补充“图形”对象的视频文件的 URL。
og:type
为了在图形中表示你的对象，你需要指定其类型。这里[7]是可用的全部类型列表。你还可以指定自己的类型。
<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
要获得对所有浏览器和设备的最佳图标支持，请阅读此内容[8]。
Twitter 和其他使用开放图的社交媒体
大多数社交网络都遵循开放图谱协议的基本元数据标签，当然，一些社交应用也会包括自己的扩展，以帮助自定义其生态系统中的一些外观展示。
例如，Twitter 允许你指定twitter:card，这是你在展示你的网站时可以使用的“卡片”类型。他们的卡类型包括：
summary
summary_large_image
app
player
这将帮助你选择如何在其 Feed 中使用你的链接。例如，如果你使用了summary_large_image，只要你在og:image标签中提供了链接，Twitter 就会显示带有高分辨率大图片的链接。