Open Graph Meta 标签完全指南：社交链接预览

Open Graph meta 标签是你放在 HTML 页面 <head> 里的 <meta property="og:…"> 标签。它们控制着别人把你的链接分享到 Facebook、LinkedIn、Slack、Discord、WhatsApp 以及大多数其他平台时所显示的标题、描述和图片。只需定义一次，几乎所有社交网络都会渲染出一张富预览卡片，而不是一条干巴巴的网址。X（Twitter）读取的是它自己的 Twitter Card 标签，但在缺少对应标签时会回退（fallback）读取你的 Open Graph 标签，所以写好一套标签，几乎能覆盖链接会出现的所有地方。

就是这一个协议，决定了一条链接是展示出标题、摘要和一张清晰的 1200×630 图片，还是只剩一串没人愿意点的裸地址。

本指南会完整梳理社交分享所需的 meta 标签：四个必需的 Open Graph 标签、og:image 的尺寸规则、Twitter Card 的回退机制、各平台如何渲染和缓存预览、哪些错误会让分享变成一片空白，以及部署之后如何调试最终效果。

什么是 Open Graph meta 标签？

Open Graph 是一个开放协议，最初由 Facebook 发起，文档托管在 ogp.me，它让任何网页都能把自己描述成一个富对象。平台不必再去猜测你的链接讲的是什么，只需读取寥寥几个标签，就能把它们变成一张预览卡片。

语法就是一个普通的 HTML meta 标签，带一个 property 属性和一个 content 值，放在文档的 <head> 里：

<meta property="og:title" content="How Open Graph Tags Work">

注意这里是 property 属性。经典的 SEO meta 标签（meta description、robots、viewport）用的是 name；Open Graph 用 property，而 Twitter Card 又回到 name。这个属性写对很关键：一个期待 property="og:title" 的爬虫，是不会去读 name="og:title" 的。

几乎每个能把链接变成卡片的平台都读 Open Graph：Facebook、LinkedIn、Slack、Discord、WhatsApp、Pinterest、Telegram 都懂这套协议。X 是个明显的例外，它更偏好自己的 twitter:* 标签，但凡是找不到的字段都会回退到你的 og:* 标签，所以你很少需要把它们重复写一遍。

Open Graph 是与经典 SEO meta 标签并存，而非取而代之。<title> 和 canonical 链接依然主导搜索，meta description 依然塑造你的搜索摘要。Open Graph 标签不碰排名，它掌管的是社交卡片。一个完整的 <head> 通常会同时携带这三类标签。

手写这些标签既重复又容易在细节上出错。Open Graph 与 Meta 标签生成器能根据一个简短的表单生成整段代码，实时预览效果，并把那些容易出错的细节（属性名、绝对 URL、图片尺寸）都保持一致，省得你去逐一记忆。

你真正需要的核心 Open Graph 标签

Open Graph 定义了几十个属性，但一次漂亮的分享只需要用到其中少数几个。先写好四个必需标签，再加一个描述，对大多数页面来说就够了。

四个必需标签：og:title、og:type、og:image、og:url

协议规定有四个标签是必填的。少了任何一个，平台要么直接不显示卡片，要么胡乱猜一个糟糕的结果填进去。

<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">

og:title 是卡片上加粗的标题。og:type 给对象归类（详见下文）。og:image 是预览图片，它必须是一个绝对 HTTPS URL。og:url 是页面的规范地址，平台用它来去重分享、汇总互动数据。

og:description 与 SEO meta description 有何不同

og:description 是分享卡片上印在标题下方的简短摘要：

<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">

它和 SEO 用的 <meta name="description"> 是两个不同的标签，面向的读者也不同。meta description 是在 Google 搜索结果页里争夺点击，通常以大约 155 个字符为衡量标准。Open Graph 描述则是在社交卡片上被阅读，那里空间更紧张，第一句话最吃重。如果你不写 og:description，大多数平台会回退到你的 meta description，所以往往可以省略它。只有当社交卡片的吸引点应当与搜索摘要有所区别时，才专门为它单独写一条。

og:type 及它能解锁什么

og:type 告诉平台你的页面是哪一类东西。常见取值有 website、article、product、profile。首页或落地页属于 website，一篇博客文章则是 article。

选择 article 会解锁一些普通 website 类型用不到的额外属性和功能：

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

这些 article:* 标签会把发布日期和作者署名喂给卡片，还能让页面符合 Pinterest Rich Pins 的条件，Rich Pin 会直接从你的 Open Graph 标记里拉取结构化数据。文章页把 og:type 设为 article，其余页面设为 website，对应的字段自然就跟上了。

下面这张表列出了大多数页面实际会用到的标签，可作速查：

标签	控制什么	示例值
`og:title`	卡片上显示的标题	`How Open Graph Tags Work`
`og:type`	对象类型：`website`、`article`、`product`、`profile`	`article`
`og:image`	预览图片（绝对 HTTPS URL）	`https://example.com/og/cover.png`
`og:url`	页面的规范 URL	`https://example.com/open-graph-guide`
`og:description`	标题下方的摘要	`A practical guide to social meta tags.`
`og:site_name`	整个站点的名称	`Example`
`og:locale`	内容的语言和地区	`en_US`

og:image：尺寸、比例，以及那些会让分享失败的规则

图片是预览中人们最先看到的部分，也是大多数分享翻车的地方。把 og:image 的尺寸和格式弄对，一个文件就能在所有平台通用。

1200×630（1.91:1）通用标准

推荐的 og:image 尺寸是 1200×630 像素，即 1.91:1 的宽高比。这一张图能在 Facebook、LinkedIn、Slack、Discord 以及 X 的 summary_large_image 卡片上正确渲染，所以你不需要为每个平台单独准备一个文件。

尺寸下限同样重要。Facebook 会忽略任何小于 200×200 的图片，对小于 600×315 的图片则只显示一个局促的方形缩略图。宽度低于 1200 像素时，大卡片开始显得发虚。瞄准 1200×630，你就一次性越过了所有门槛。

为什么 og:image:width 和 og:image:height 很重要

当平台第一次遇到你的链接时，它还没下载图片，图片是异步抓取的。如果你提前声明好尺寸，平台就能预留出恰当的空间，立刻把卡片排布好：

<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">

省掉这几行，页面的第一次分享就可能在爬虫追上进度之前渲染成空白。加上它们，卡片在第一次粘贴时就是正确的。og:image:alt 标签则在支持的平台上为屏幕阅读器描述这张图片。

文件格式与大小

用 JPG 或 PNG。这两种格式在每一个爬虫上都能可靠解码，而这正是 og:image 的意义所在：它必须能在你无法掌控的服务器上渲染出来。经验法则是把文件控制在 1 MB 以下，针对比其他平台更严格的 WhatsApp 则要压到 300 KB 以下。如果你导出的文件偏大，就用在线图片压缩工具把它压到 1 MB 以下，同时肉眼看不出画质损失。

这里很容易让人想上现代格式，但恰恰是这一处应当克制。更新的格式能为浏览器节省字节，可有些社交爬虫对它们的解码并不一致，于是一张 WebP 或 AVIF 的 og:image 在读不懂它的平台上就可能返回空白。这些取舍在《WebP vs AVIF vs JPEG：2026 图片格式选型实战》里有详细讨论；但就分享图片而言，请坚持用 JPG 或 PNG。由于各平台裁剪边缘的方式不同，请把你的 logo 和标题放在居中的 1080×600 安全区内，这样重要内容就不会被裁掉。

绝对 HTTPS URL 规则

og:image 和 og:url 必须是完整的 https://… URL，不能是相对路径。像 /cover.png 这样的路径在你的编辑器里和线上页面上都能正常解析，但抓取你 URL 的爬虫没有可供解析的基地址，于是分享就变成一片空白。图片还必须能被公开访问：如果 robots.txt 拦住了爬虫，或者文件藏在登录鉴权之后，预览就会一直是空的。

还有一条约束决定了上面这一切：爬虫不运行 JavaScript。Facebook、LinkedIn、WhatsApp、Telegram、Discord 抓取的是你的原始 HTML，读的也只是里面已有的内容。框架在页面加载后由客户端注入的标签，对它们来说是不可见的，所以你的 Open Graph 标签必须存在于服务端渲染或静态的 HTML 里。

Twitter/X Card：一个标签，其余回退到 Open Graph

X 用的是它自己的 Twitter Card meta 标签，但由于与 Open Graph 大量重叠，你实际要写的比想象中少得多。实践中，你只需加一个标签，剩下的都交给回退机制。

twitter:card 是唯一必需的 Twitter 标签

只要缺少 twitter:card，哪怕你已经写好了一整套 Open Graph 标签，X 也根本不会渲染任何卡片。它是唯一必需的 Twitter Card 标签：

<meta name="twitter:card" content="summary_large_image">

取值决定布局。summary_large_image 给出的是为 1200×630 图片设计的大横幅卡片，summary 给出的则是文字旁带一个小方形缩略图的紧凑卡片：

<meta name="twitter:card" content="summary">

注意这里是 name 属性。Twitter Card 标签用的是 name，而不是 Open Graph 所用的 property。

X 如何在标题、描述和图片上回退到 og:*

对于标题、描述和图片，当对应的 twitter:* 标签缺席时，X 会读取你的 og:title、og:description、og:image。这就是你几乎从不需要写 twitter:title 或 twitter:image 的原因。设好 twitter:card，把你的 Open Graph 标签保持干净，X 就会用它们拼出卡片。

空 twitter:image 陷阱

回退机制有一个容易踩的坑：空标签也算「存在」。如果你输出了一个值为空的 twitter:image，X 就会用这个空值，而不再回退到 og:image，于是你的卡片丢了图片。

<!-- Wrong: blocks the fallback and leaves the card imageless -->
<meta name="twitter:image" content="">

<!-- Right: omit the tag entirely and X reads og:image -->

规则很简单：绝不输出空的社交标签。没有值时就把它整个省略掉。

Slack 与 Discord 的特殊之处

Slack 先读 Twitter Card，再读 Open Graph，还能通过 twitter:label 和 twitter:data 额外呈现两个字段：

<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">

它们会作为带标签的小细节显示在 Slack 展开卡片的下方。Discord 读取 Open Graph，还加了一个别家都没有的小点缀：它用你页面的 theme-color 给嵌入卡片左侧的强调条上色。

<meta name="theme-color" content="#5865F2">

链接预览在各平台上如何渲染

同样一套标签，被谁读取，就会产生不同的社交媒体链接预览。每个平台都会挑选自己的一部分标签，按自己的时间窗缓存，再加上一两个小怪癖。下面这张表可作速查。

平台	读取的标签	缓存	特有行为
Facebook	Open Graph	~30 天	忽略小于 200×200 的图片；小于 600×315 时显示小方图
LinkedIn	Open Graph	~7 天	用 Post Inspector 清除过期预览
X (Twitter)	`twitter:card` + 回退到 `og:*`	短	没有 `twitter:card` 就完全没有卡片
Slack	先 Twitter Card，后 Open Graph	每条消息	把 `twitter:label`/`twitter:data` 渲染为附加字段
Discord	Open Graph	每条消息	用 `theme-color` 作嵌入卡片的强调条
WhatsApp	`og:title` + `og:image`	每条消息	希望元数据靠近顶部；图片保持在 300 KB 以下
Telegram	Open Graph	每条消息	仅从 JPEG 或 PNG 才能稳定渲染
Pinterest	Open Graph 或 Schema.org	—	文章 Rich Pin 需要 `og:type=article`

缓存这一列能解释一个常见的意外：你改好了标签、重新分享，Facebook 却还在好几周里显示旧标题。Facebook 大约会保留 Open Graph 数据 30 天，LinkedIn 大约 7 天，所以在缓存过期或你强制刷新之前，改动都不会显现出来。下文的调试器做的正是强制刷新这件事。

常见的 Open Graph 错误（以及如何抓出它们）

大多数坏掉的预览，都能追溯到一份不长的错误清单。每一个错误在本地看都好好的，只有当爬虫抓取线上页面时才会露馅。

相对的 og:image 路径

相对路径能在你的浏览器里渲染，一分享就坏，因为爬虫没有可供解析的基准 URL。

<!-- Blank when shared -->
<meta property="og:image" content="/cover.png">

<!-- Renders everywhere -->
<meta property="og:image" content="https://example.com/cover.png">

缺少 og:url，或 canonical 与它不一致

没有 og:url，分享计数和互动数据就会散落到各种 URL 变体上（带不带 www、带不带跟踪参数、带不带尾斜杠）。把你的 canonical 链接和 og:url 都指向同一个 URL，信号才能聚在一起。

图片太小或宽高比不对

小于 200×200 的图片会被直接忽略，而远离 1.91:1 的图片则会以你意料之外的方式被裁切。发布 1200×630，构图在每个平台上都可预期。

忘了写 twitter:card

少了 twitter:card，一整套 Open Graph 标签在 X 上依然不会生成卡片。这是一条链接在 LinkedIn 上光鲜亮丽、在 X 上却什么都不显示的最常见原因。

爬虫看不见的客户端渲染标签

如果一个单页应用在加载后才注入 Open Graph 标签，不运行 JavaScript 的爬虫就永远看不到它们。请在服务端渲染这些标签，或者对 HTML 做预渲染。

charset 放在了前 1024 字节之后

<meta charset="utf-8"> 声明必须出现在文档的前 1024 字节之内，否则浏览器会忽略它，进而把你标题和描述里的非 ASCII 字符弄成乱码。把它放在 <head> 的最前面：

<head>
  <meta charset="utf-8">
  <!-- everything else follows -->
</head>

如何测试和调试你的 Open Graph 标签

绝不要相信一个你还没对着线上 URL 验证过的预览。三个工具就能覆盖那些要紧的平台，而且它们都能强制刷新缓存。

Facebook Sharing Debugger 会抓取你的线上 URL，精确地展示 Facebook 解析到了什么，并列出所有缺失或格式有误的标签。它最有用的按钮是「Scrape Again」，能按需刷新 Facebook 那约 30 天的缓存，是不必等上一个月就让改动显现的最快办法。

LinkedIn Post Inspector

LinkedIn Post Inspector 为 LinkedIn 做的是同样的事。粘贴一个 URL，它就会重新抓取页面并清掉 LinkedIn 那约 7 天的缓存，于是更新后的标题或图片会在你下一次分享时出现，而不是拖到好几天以后。

X 的卡片校验已迁入开发者门户

X 已下线了它独立的 Card Validator。截至 2026 年，卡片校验被放进了 X 开发者门户里，而不再有一个公开 URL，因此大多数团队改用另一种方式来验证 X 卡片：由于 X 会回退到 og:*，Facebook 和 LinkedIn 的调试器其实已经确认了 X 将要读取的那些标签，而 twitter:card 布局本身的空缺，则交给第三方预览工具来补上。

部署前先预览

调试器只能检查一个已经上线的 URL，可那已经是个发现图片空白的糟糕时机了。趁你还在编辑时就把卡片预览出来。Open Graph 与 Meta 标签生成器会根据你输入的值渲染出 Google、Facebook、X、LinkedIn、Slack、Discord 的预览，在浏览器里读取你 og:image 的真实尺寸以揪出错误的比例，还能导入现有的 <head>，让你在一次坏掉的分享发布之前就把它诊断出来。

快速清单

下面是每个页面都应携带的最小标签集。复制它，换上你自己的值，你就有了一个在各处都能渲染的预览：

<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">

<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">

<meta name="twitter:card" content="summary_large_image">

发布前把要点过一遍：一张 1200×630 的绝对 HTTPS og:image、与你 canonical 一致的 og:url、存在的 twitter:card，以及在服务端渲染的标签。如果你想更完整地了解能加速这套流程的各类工具，《新手指南：如何使用开发者工具提高工作效率》收录了其余部分。当你准备好一次性生成并预览整段代码时，Open Graph 与 Meta 标签生成器会替你写好、校验，并在部署前展示每一张卡片。

常见问题

Open Graph 标签和 Twitter Card 标签有什么区别？

Open Graph 是一个跨平台协议，Facebook、LinkedIn、Slack 等都会读取它；Twitter Card 标签（twitter:*）则是 X 专用的。当对应的 twitter:* 标签缺失时，X 会回退到你的 OG 标签，所以你通常只需要 OG 标签，外加一个 twitter:card 值。

Open Graph 标签会影响 Google 搜索排名吗？

不会。Open Graph 和 Twitter Card 标签不影响 Google 排名，它们控制的是链接被分享时的样子，带来的是社交流量。经典的 <title> 和 canonical 标签才对 SEO 重要；meta description 塑造你的摘要和点击率，但它本身并不是一个直接的排名因素。

Open Graph 标签在 HTML 里放哪儿？

放在 <head> 元素里，且要在服务端渲染或静态的 HTML 中。Facebook、LinkedIn、WhatsApp、Telegram 的爬虫不执行 JavaScript，所以客户端注入的标签不会被看到。把 <meta charset> 放在最前面，让它落在前 1024 字节之内。

一张图片能同时适用于 Facebook、X 和 LinkedIn 吗？

可以。一张 1200×630（1.91:1）的图片能在 Facebook、LinkedIn、Slack、Discord 以及 X 的 summary_large_image 卡片上正确渲染。用 HTTPS 在一个公开 URL 上提供它，并声明 og:image:width/og:image:height，这样第一次分享就不会空白。

为什么我的链接预览不显示图片？

常见原因有：用了相对的 og:image 路径而非绝对 HTTPS URL、图片小于 200×200、X 上缺少 twitter:card，或者标签是由爬虫无法运行的 JavaScript 注入的。修好之后，用 Facebook Sharing Debugger 重新抓取一次。

每个页面都需要各自的 Open Graph 标签吗？

理想情况下是的，每个页面都应有一套反映该具体页面的 og:title、og:description、og:image 和 canonical og:url，这样分享出去的链接才能显示贴切的预览。一套全站通用的回退标签聊胜于无，但逐页定制的标签能赢得多得多的社交点击。