把精心设计的网站链接分享到社交媒体，如果只显示一个蓝色链接，没有任何图片预览，点击率会非常低。Open Graph 协议就是解决这个问题的。
你有没有注意过，有些链接发到 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: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 标签中，og:image 的影响力最大。人的视线会先被图片吸引，然后才去看标题和描述。一张好的 OG 图片，可能是用户决定"点"还是"划走"的关键因素。
不同平台对图片尺寸的要求略有不同，但有一个万能尺寸：1200 x 630 像素，16:9 左右的比例。这个尺寸在所有主流平台上都能正常显示，不会被奇怪地裁剪。如果你只做一张图，就用这个尺寸。
| 原则 | 说明 |
|---|---|
| 简洁明了 | 标题要短，突出核心信息——用户在信息流里只会扫一眼 |
| 品牌一致 | 使用你的品牌色彩和字体，让人一眼认出是你 |
| 文字安全区 | 重要内容避开边缘 20% 区域，因为不同平台的裁剪方式不同 |
| 高对比度 | 确保文字在任何背景上都清晰可读，尤其是手机小屏幕 |
小明面临一个实际问题：他不是设计师，怎么做出好看的 OG 图片？
几个选择：
next/og 的 ImageResponse 在服务端动态生成 OG 图片。这对博客类网站特别有用——每篇文章自动生成一张带标题的封面图，不需要手动为每篇文章设计图片。如果你的网站有很多页面，动态生成是最省心的方案。对于小明这种单页应用，一张精心设计的静态 OG 图片就够了。但如果以后加了博客或者产品页面，动态生成会更实用。
配置完 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"功能强制刷新缓存。
小明现在每次发布新功能，都会顺手做两件事：检查 OG 卡片效果，然后分享到几个社交平台。他发现，一张好的 OG 图片配上一句吸引人的描述，带来的点击量比他在群里吆喝十遍都多。
社交分享成了他网站的重要流量来源之一。但小明也意识到，社交分享的流量是"脉冲式"的——你发一次，热度过了就没了。要获得持续的、免费的流量，还得靠搜索引擎。
当有人在百度或谷歌搜索你的产品能解决的问题时，如果你的网站能出现在搜索结果里——那才是真正的长期流量。
这就是下一节要讲的：SEO。