当你把一个网页链接复制粘贴到X（Twitter）、Slack、Facebook 或者微信时，有时候它只是一行标准的蓝色链接（甚至是一串乱码般的 URL）；而有时候，它却是转化为一张精心设计的社交分享图，带有封面图、标题和一段简短的介绍。

这便是使用了 Open Graph 协议进行优化之后带来的社交体验。

今天我们就来聊聊 Open Graph 是什么，以及它如何决定你的网站在社交媒体上的体验。

当你把网页链接粘贴到 Facebook、X（Twitter）、LinkedIn、微信群聊或 Slack 时，平台通常会派一个“抓取机器人”（爬虫）访问这个页面，读取一些“给机器看的信息”，然后生成一个链接预览卡片（也叫分享卡片、link preview）。

这张卡片通常包含：

标题（让人知道你在讲什么）
描述（两三行摘要）
图片（最吸睛的封面）
来源域名/作者等补充信息（视平台而定）

而 OG 协议，就是用来标准化这份“卡片信息说明书”的。

Open Graph 的起源：Facebook 提出，为了解决什么问题？

Open Graph 协议（简称 OG 协议），最初由 Facebook 在 2010 年提出。

为了解决这个问题，Facebook 制定了一套规则：让网页开发者自己告诉社交平台，我想展示什么。

通过这套协议，普通的网页在社交图谱中变成了一个“富媒体对象”（Rich Object）。简单来说，OG 协议让站长/开发者可以明确告诉平台：请按我指定的标题、描述、图片来生成分享卡片。

Open Graph 的基本原理

Open Graph 并不需要你安装复杂的软件，它只是一组写在网页 HTML 代码 <head> 区域的 Meta 标签（og 标签）。

这些标签对普通浏览网页的用户是不可见的，只有当社交平台的爬虫访问你的网页时，它们才会起作用。

核心 OG 标签详解

虽然 Open Graph 协议包含很多属性，但对于大多数网站来说，只要掌握以下几个核心标签就足够了：

1. `og:title`（标题）

作用：定义分享卡片上显示的大标题。
注意：它不一定非要和网页原本的 <title> 一样。你可以专门为社交媒体起一个更具吸引力、更“标题党”一点的名字，而不会影响 SEO 里的网页原标题。

2. `og:description`（描述）

作用：标题下方的一两句简短介绍。
技巧：就像电影的剧情梗概，目的是勾起好奇心，吸引点击。通常建议控制在 2-4 句话以内。

3. `og:image`（图片）

作用：这是最重要的标签！ 它定义了分享卡片上的那张大图。
地位：在视觉时代，一张好看的 OG 图片能让点击率翻倍。如果没有这个标签，平台可能会随机抓取网页里的图片，效果通常很惨烈。

4. `og:url`（链接）

作用：定义该页面的规范链接（Canonical URL）。
用途：确保无论用户分享的是带参数的链接（如 example.com/?source=wechat），最终统计和指向的都是原本干净的链接。

5. `og:type`（类型）

作用：定义内容类型（如 article/website/video/product）。
用途：平台据此渲染卡片样式。

6. `og:site_name`（名称）

作用：显示卡片底部的站点名称

简单代码示例：如何配置 Open Graph

要在你的网站上配置 OG，只需要将以下代码添加到 HTML 的 <head> 和 </head> 之间：

<head>
    <!-- 告诉平台这是文章标题 -->
    <meta property="og:title" content="Open Graph 协议入门指南" />

    <!-- 告诉平台这是文章摘要 -->
    <meta property="og:description" content="一文看懂 OG 标签是什么，以及如何让你的网站链接在社交媒体上更漂亮。" />

    <!-- 告诉平台显示这张图片 (关键！) -->
    <meta property="og:image" content="https://example.com/images/og-cover.jpg" />

    <!-- 告诉平台这是网页的标准链接 -->
    <meta property="og:url" content="https://example.com/blog/what-is-open-graph" />

    <!-- 补充：定义内容类型，如 website 或 article -->
    <meta property="og:type" content="article" />
</head>

小提示：

og:image 尽量用 绝对地址（带 https:// 的完整 URL）
图片要能被公网访问，避免登录态、反爬、403 等问题导致抓取失败
不同平台会缓存预览结果，改了 OG 后可能要等一段时间或用平台的调试工具刷新缓存

常见平台对 Open Graph 的支持情况

虽然 OG 是 Facebook 发明的，但它已经成为了全球通用的行业标准。

国际平台（Facebook, LinkedIn, Discord, Slack 等）：完美支持。只要配置了上述标签，链接就会自动展开为漂亮的大卡片。

注：Twitter (X) 虽然有自己的 twitter:card 标签，但如果没检测到，也会自动回退使用 og 标签，所以配置 OG 性价比最高。

中文互联网环境（微信、微博、钉钉等）：
- 微博、知乎、钉钉、飞书：对 Open Graph 支持较好，通常能直接抓取并显示卡片。
- 微信（WeChat）：情况稍特殊。微信早期支持 OG 协议，但现在为了防止滥用，对直接分享链接的抓取有限制。通常需要配合微信 JS-SDK 才能实现完美的自定义分享卡片。不过，配置 OG 标签依然是基础，因为在微信电脑版、QQ 或者其他浏览器中打开时，依然会读取这些信息。

各主流平台 OG 专属配置

不同平台对 OG 标签的解析规则、特殊要求存在差异，以下是 Facebook、X（Twitter）、Instagram、LinkedIn 的针对性配置方案：

1. Facebook（OG 协议发源地）

Facebook 对 OG 标签支持最完整，除核心标签外，建议补充以下专属配置：

图片尺寸要求：推荐 1200×630px（1.91:1 比例），最小 600×315px，最大文件大小 8MB；
特殊标签：
- og:locale：内容语言（如 zh_CN/en_US）；
- og:image:width/og:image:height：指定图片尺寸，避免平台重新裁剪；
- og:video（可选）：若页面含视频，指定视频 URL（支持 MP4、WebM）。

Facebook 配置代码示例

<head>
  <!-- 核心OG标签 -->
  <meta property="og:title" content="Open Graph 协议全平台配置指南" />
  <meta property="og:description" content="从基础到进阶，搞定Facebook、Twitter、LinkedIn全平台分享卡片配置" />
  <meta property="og:image" content="https://example.com/images/og-facebook.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://example.com/blog/og-complete-guide" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="XX 技术博客" />

  <!-- Facebook专属补充 -->
  <meta property="og:locale" content="zh_CN" />
  <!-- 若有视频可添加 -->
  <!-- <meta property="og:video" content="https://example.com/videos/og-demo.mp4" /> -->
</head>

调试工具

Facebook 提供官方调试工具：Sharing Debugger，可验证标签配置、刷新平台缓存。

2. X（Twitter，原 Twitter）

Twitter 有自己的 twitter:* 专属标签体系，若未配置则回退到 OG 标签，但自定义配置能精准控制展示效果：

核心专属标签：
- twitter:card：卡片类型（必加），可选值：
  - summary：小卡片（左侧小图 + 右侧文字，尺寸 144×144px）；
  - summary_large_image：大图卡片（推荐，1200×600px，与 OG 图片尺寸兼容）；
  - player：视频/音频卡片（适用于媒体类内容）；
- twitter:site：关联的 Twitter 账号（如 @your_account）；
- twitter:title/twitter:description：优先级高于 OG 标签，可单独定制；
- twitter:image：指定卡片图片（优先级高于 og:image）。
图片要求：支持 JPG、PNG、WEBP，无版权水印，避免敏感内容。

X（Twitter）配置代码示例

<head>
  <!-- 核心OG标签（作为回退） -->
  <meta property="og:title" content="Open Graph 协议全平台配置指南" />
  <meta property="og:description" content="从基础到进阶，搞定全平台分享卡片配置" />
  <meta property="og:image" content="https://example.com/images/og-twitter.jpg" />

  <!-- Twitter专属标签 -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@your_twitter_account" />
  <meta name="twitter:title" content="OG协议配置指南：覆盖Twitter/Facebook/LinkedIn" />
  <meta name="twitter:description" content="3分钟搞定各平台分享卡片，点击率翻倍！" />
  <meta name="twitter:image" content="https://example.com/images/og-twitter.jpg" />
</head>

调试工具

Twitter 官方调试工具：Card Validator（需登录账号）。

3. Instagram（基于 Facebook 生态）

Instagram 无专属 OG 标签，完全复用 Facebook 的 OG 配置，但有 2 个关键注意点：

图片适配：推荐方形图（1080×1080px）或 1.91:1 比例图（与 Facebook 兼容），避免图片被裁剪；
内容限制：Instagram 对链接抓取严格，仅「蓝 V 账号」「推广帖」可直接跳转，普通账号需引导用户点击简介链接，但 OG 卡片仍会在「私信分享」「Reels 链接挂载」中生效。

Instagram 适配建议

直接复用 Facebook 的 OG 配置，额外确保：

<!-- 补充Instagram友好的图片尺寸（方形图） -->
<meta property="og:image" content="https://example.com/images/og-instagram.jpg" />
<meta property="og:image:width" content="1080" />
<meta property="og:image:height" content="1080" />

4. LinkedIn（职场社交平台）

LinkedIn 对 OG 标签的解析偏「保守」，需严格遵循以下规则：

核心要求：
- 必须包含 og:title/og:description/og:image/og:url，缺一不可；
- 描述文本限制：最多 156 个字符，超出会被截断；
- 图片尺寸：推荐 1200×630px（同 Facebook），最小 800×400px，文件大小 ≤ 5MB；
特殊规则：LinkedIn 会缓存 OG 信息约 7 天，修改后需用调试工具强制刷新。

LinkedIn 配置代码示例

<head>
  <!-- LinkedIn核心OG配置（严格控制字符数） -->
  <meta property="og:title" content="OG协议配置指南：提升职场内容分享转化" />
  <meta property="og:description" content="掌握LinkedIn分享卡片配置技巧，让你的职场内容更吸睛（156字符内）" />
  <meta property="og:image" content="https://example.com/images/og-linkedin.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://example.com/blog/og-linkedin-guide" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="XX 职场研究院" />
</head>

调试工具

LinkedIn 官方调试工具：Post Inspector。

Open Graph 与 SEO 的关系

很多新手会问：“加了 OG 标签能提高我的 Google/Bing 排名吗？”

答案是：不能直接提高，但能间接助攻。

搜索引擎（如 Google）明确表示 OG 标签不是直接的排名因素。但是，配置了 OG 标签的网页在社交媒体上更美观，这会带来：

更高的点击率（CTR）：好看的图文卡片比纯文字链接更吸引人。
更多的社交分享：看起来专业的链接，用户更愿意转发。

这些增加的流量和社交信号，最终会对你的网站权重产生积极的正面影响。

常见问题

缓存问题解决

各平台都会缓存 OG 信息，修改后需：

使用对应平台的调试工具（如 Facebook Sharing Debugger）刷新缓存；
若无法刷新，可临时修改 og:url 后再改回（如添加随机参数 ?v=2），触发平台重新抓取。

合规性与可访问性

添加 og:image:alt 标签（图片描述），提升视障用户体验；
避免标题/描述含违规、夸大词汇，否则平台可能屏蔽卡片展示。

最后

Open Graph 协议不是什么高深的技术，它只是专门为社交平台分享而创造的一份更完美的用户体验。

没有它，你的链接是“裸奔”的，没有足够的信息说明和视觉表达。
有了它，你的链接是完全可控的，通过自定义来获得更好的体验

在了解了 og:title 和 og:description 后，你会发现最难搞定的其实是 og:image。毕竟，写标题容易，但要为网站的每个页面都专门设计一张 1200x630 像素的封面图，这就有点复杂了，当然接下来我们也会来聊聊这一方面。

什么是 Open Graph？社交媒体 OG 标签完全指南

为什么分享链接会显示图文 Banner？

Open Graph 的起源：Facebook 提出，为了解决什么问题？

Open Graph 的基本原理

核心 OG 标签详解

1. `og:title`（标题）

2. `og:description`（描述）

3. `og:image`（图片）

4. `og:url`（链接）

5. `og:type`（类型）

6. `og:site_name`（名称）

简单代码示例：如何配置 Open Graph

常见平台对 Open Graph 的支持情况

各主流平台 OG 专属配置

1. Facebook（OG 协议发源地）

Facebook 配置代码示例

调试工具

2. X（Twitter，原 Twitter）

X（Twitter）配置代码示例

调试工具

3. Instagram（基于 Facebook 生态）

Instagram 适配建议

4. LinkedIn（职场社交平台）

LinkedIn 配置代码示例

调试工具

Open Graph 与 SEO 的关系

常见问题

缓存问题解决

合规性与可访问性

最后

为什么分享链接会显示图文 Banner？

Open Graph 的起源：Facebook 提出，为了解决什么问题？

Open Graph 的基本原理

核心 OG 标签详解

1. og:title（标题）

2. og:description（描述）

3. og:image（图片）

4. og:url（链接）

5. og:type（类型）

6. og:site_name（ 名称）

简单代码示例：如何配置 Open Graph

常见平台对 Open Graph 的支持情况

各主流平台 OG 专属配置

1. Facebook（OG 协议发源地）

Facebook 配置代码示例

调试工具

2. X（Twitter，原 Twitter）

X（Twitter）配置代码示例

调试工具

3. Instagram（基于 Facebook 生态）

Instagram 适配建议

4. LinkedIn（职场社交平台）

LinkedIn 配置代码示例

调试工具

Open Graph 与 SEO 的关系

常见问题

缓存问题解决

合规性与可访问性

最后

1. `og:title`（标题）

2. `og:description`（描述）

3. `og:image`（图片）

4. `og:url`（链接）

5. `og:type`（类型）

6. `og:site_name`（名称）