---
title: "15.1 Open Graph 与社交分享"
description: "让你的链接在社交平台上脱颖而出"
---

# 15.1 Open Graph 与社交分享

> 把精心设计的网站链接分享到社交媒体，如果只显示一个蓝色链接，没有任何图片预览，点击率会非常低。Open Graph 协议就是解决这个问题的。

---

## 小明的蓝色链接

小明兴冲冲地把网站链接发到群里："快看我做的项目！"

结果群里只显示了一串蓝色的 URL。没有标题，没有图片，没有描述。就像你在群里发了一个 `https://example.com/app`——谁知道这是什么？朋友们扫了一眼，继续聊别的了。

小明不甘心，又发了一遍，还加了一句"真的很好用！"。但没有视觉吸引力的链接，在信息流里就像一滴水掉进大海，瞬间被淹没。

老师傅看到了："你缺了 Open Graph。"

---

## 什么是 Open Graph

![image-20260303152540838](/images/Advanced/image-20260303152540838.png)

你有没有注意过，有些链接发到 QQ 上，会自动展开成一张漂亮的卡片——有标题、有描述、有封面图？而有些链接就只是一串蓝色的文字？

区别就在于 **Open Graph（OG）** 协议。

OG 是 Facebook 在 2010 年推出的一套元数据标准。它的原理很简单：你在网页的 HTML `<head>` 里放几个特定的 `<meta>` 标签，社交平台在抓取你的链接时会读取这些标签，然后用它们生成一张预览卡片。

X、LinkedIn、Telegram、Discord、Facebook、QQ……大部分主流社交平台都支持 OG。这不是某个平台的私有功能，而是一个被广泛采纳的开放标准。

需要注意的是，**微信不支持 OG 协议**。微信有自己的一套分享机制，需要通过微信 JS-SDK 来自定义分享卡片的标题、描述和图片。如果你的用户主要在微信生态里，OG 帮不了你，得单独处理。这一点后面会再提到。

| 有 OG 标签 | 无 OG 标签 |
|-----------|-----------|
| 精美的卡片预览 | 只有蓝色链接 |
| 标题 + 描述 + 图片 | 只有 URL |
| 高点击率 | 低点击率 |

这个对比不是夸张。根据社交媒体营销的经验数据，带有图片预览的链接点击率通常是纯文本链接的 2-5 倍。道理很简单——人是视觉动物，一张好看的卡片比一串字符更容易吸引注意力。

### 核心 OG 标签

OG 协议定义了一组标签，其中最重要的是这五个：

| 标签 | 说明 | 示例 |
|------|------|------|
| `og:title` | 分享卡片的标题 | "我的产品名称" |
| `og:description` | 分享卡片的描述 | "一句话说明产品价值" |
| `og:image` | 分享卡片的图片 URL | `https://...` |
| `og:url` | 页面的规范 URL | `https://...` |
| `og:type` | 内容类型 | `website` 或 `article` |

这些标签以 `<meta property="og:xxx" content="xxx" />` 的形式放在 HTML 的 `<head>` 中。当有人把你的链接分享到社交平台时，平台的爬虫会访问这个 URL，读取 `<head>` 里的 OG 标签，然后渲染出一张卡片。

具体怎么配？告诉 Claude Code 你需要配置 OG 标签，它会根据你的框架自动处理。Next.js 用户加载了 `next-best-practices` Skill 后，metadata 配置更是信手拈来——Next.js 的 Metadata API 对 OG 有一等公民级别的支持。

---

## 小明配好了 OG

小明让 Claude Code 给项目加上 OG 配置。Claude Code 在 `layout.tsx` 里配好了 `metadata` 对象的 `openGraph` 字段，设置了标题、描述和图片。

几分钟后，小明再次把链接发到群里。

这次不一样了——消息里展开了一张精美的卡片。标题醒目，描述清晰地说明了产品是做什么的，还有一张好看的封面图。整个卡片看起来就像一个正式的产品，而不是某个人随手发的链接。

"这个看起来不错，点进去看看。"朋友们纷纷点击。

小明看着消息下面不断增加的"已读"标记，终于理解了老师傅说的那句话：**OG 优化不是可选项，是营销的基础设施**。你花了几个月做的产品，分享出去的第一印象却是一串蓝色字符——这就像精心装修了店铺，却忘了挂招牌。



---

## OG 图片：分享卡片的视觉核心

在所有 OG 标签中，`og:image` 的影响力最大。人的视线会先被图片吸引，然后才去看标题和描述。一张好的 OG 图片，可能是用户决定"点"还是"划走"的关键因素。

### 各平台推荐尺寸

不同平台对图片尺寸的要求略有不同，但有一个万能尺寸：**1200 x 630 像素**，16:9 左右的比例。这个尺寸在所有主流平台上都能正常显示，不会被奇怪地裁剪。如果你只做一张图，就用这个尺寸。

### 设计原则

| 原则 | 说明 |
|------|------|
| 简洁明了 | 标题要短，突出核心信息——用户在信息流里只会扫一眼 |
| 品牌一致 | 使用你的品牌色彩和字体，让人一眼认出是你 |
| 文字安全区 | 重要内容避开边缘 20% 区域，因为不同平台的裁剪方式不同 |
| 高对比度 | 确保文字在任何背景上都清晰可读，尤其是手机小屏幕 |

### OG 图片从哪来

小明面临一个实际问题：他不是设计师，怎么做出好看的 OG 图片？

几个选择：

- **设计工具**：Canva 有大量现成的社交媒体图片模板，选一个改改文字就行。Figma 适合有设计基础的人。这是最快的方式。
- **AI 生成**：用 AI 图片生成工具，描述你想要的风格和内容，生成一张封面图。效果取决于你的 prompt 质量。
- **动态生成**：Next.js 支持用 `next/og` 的 `ImageResponse` 在服务端动态生成 OG 图片。这对博客类网站特别有用——每篇文章自动生成一张带标题的封面图，不需要手动为每篇文章设计图片。如果你的网站有很多页面，动态生成是最省心的方案。

对于小明这种单页应用，一张精心设计的静态 OG 图片就够了。但如果以后加了博客或者产品页面，动态生成会更实用。

---

## 不同平台的差异

小明把同一个链接分别发到了 X、QQ 群、微信群和 LinkedIn。X、QQ 和 LinkedIn 上都显示了漂亮的卡片，但微信群里还是一串蓝色链接。

"微信怎么不行？"

老师傅说："微信不读 OG 标签，它有自己的一套。"

### X

X 有自己的一套 `twitter:card` 标签体系（标签名沿用了 Twitter 时代的命名），但它也会回退读取 OG 标签。所以如果你只配了 OG 标签，X 上也能正常显示卡片。

X 的卡片有几种类型：

- `summary`：小图卡片，图片在左边，文字在右边
- `summary_large_image`：大图卡片，图片占据整个卡片上方（推荐）

大部分情况下，`summary_large_image` 的视觉效果更好，点击率也更高。如果你想精确控制 X 上的显示效果（比如用不同于 OG 的标题或图片），可以额外配置 `twitter:title`、`twitter:image` 等标签。但通常没必要——OG 标签就够了。

### 微信

微信是一个完全独立的生态。它**不支持 OG 协议**——不管你的 OG 标签配得多完美，微信都不会读取。

微信的分享卡片（带标题、描述、缩略图的那种）需要通过**微信 JS-SDK** 来实现。流程大致是：在微信公众平台注册、配置安全域名、在前端调用 `wx.updateAppMessageShareData` 等 API 来自定义分享内容。这套流程比 OG 复杂得多，而且需要一个已认证的微信公众号。

对个人项目来说，微信 JS-SDK 的接入成本偏高。如果你的用户主要在微信生态里，这个投入是值得的；如果不是，先把 OG 配好覆盖其他平台，微信的事以后再说。

### LinkedIn

LinkedIn 是对 OG 标准支持最严格的平台。它严格按照 OG 标签渲染卡片，不会做太多自己的"创意发挥"。确保图片尺寸正确（1200 x 627）、URL 可公开访问就行。

---

## 测试和调试

配置完 OG 后，不要直接发到群里测试——社交平台会缓存你的链接信息。如果第一次抓取时 OG 还没配好，平台会缓存那个"空"的结果，之后即使你配好了，显示的可能还是旧的。

正确的做法是用各平台提供的调试工具：

| 工具 | 功能 |
|------|------|
| Facebook Sharing Debugger | 验证 OG 标签是否正确，可以强制刷新缓存 |
| X Card Validator | 预览 X 卡片效果 |
| LinkedIn Post Inspector | 预览 LinkedIn 分享效果 |

这些工具不仅能预览效果，还能告诉你哪些标签缺失或有问题。小明第一次用 Facebook Debugger 时发现自己的 `og:image` URL 写错了——图片路径少了个斜杠。这种小错误肉眼很难发现，但调试工具一下就能定位。

如果更新了 OG 标签但平台还是显示旧内容，用调试工具的"Scrape Again"或"Fetch new scrape information"功能强制刷新缓存。

---

## 常见问题

### Q1: OG 图片不显示怎么办？

这是最常见的问题，通常是以下原因之一：

1. **图片 URL 不可公开访问**——localhost 的地址、需要登录才能看的图片，社交平台的爬虫都访问不了
2. **图片格式不对**——只支持 JPG、PNG、WebP，不支持 SVG
3. **图片太大**——建议控制在 5MB 以内，太大的图片爬虫可能超时放弃
4. **URL 写错了**——用调试工具检查，它会告诉你具体的错误信息

### Q2: 微信分享怎么显示卡片？

微信不支持 OG 协议，需要通过微信 JS-SDK 自定义分享内容。这需要一个已认证的微信公众号，接入成本比 OG 高不少。如果你的产品面向国内用户且微信是主要传播渠道，值得投入；否则先把 OG 配好覆盖其他平台。

---

## 小明的分享习惯

小明现在每次发布新功能，都会顺手做两件事：检查 OG 卡片效果，然后分享到几个社交平台。他发现，一张好的 OG 图片配上一句吸引人的描述，带来的点击量比他在群里吆喝十遍都多。

社交分享成了他网站的重要流量来源之一。但小明也意识到，社交分享的流量是"脉冲式"的——你发一次，热度过了就没了。要获得持续的、免费的流量，还得靠搜索引擎。

当有人在百度或谷歌搜索你的产品能解决的问题时，如果你的网站能出现在搜索结果里——那才是真正的长期流量。

这就是下一节要讲的：SEO。