Open Graph 到底在解决什么
有人把发布会链接丢进 Slack：卡片没图，标题截自错误页面，描述还是上个季度的活动文案。频道里第一反应变成「这是不是链错了」，而不是点进去看产品。
这不是品牌审美问题，而是 Open Graph 没完成它唯一的工作：告诉所有会展开链接的客户端，这个 URL 的卡片应该长什么样。
不是「再写一遍 title」——而是卡片契约
Open Graph 是一组 meta 标签（og:title、og:type、og:url、og:image，实务上几乎总要补 description 与 site name）。社交网络、IM 与协作工具在展开链接时会读取它们。
浏览器已有 <title> 与 meta description，那是标签页和搜索摘要的世界。OG 管的是分享表面：Facebook / Meta、LinkedIn、X、Slack、Discord、WhatsApp、Telegram 以及更多小客户端。各自抓你的 HTML、按自家规则挑字段、缓存结果、画出卡片。标签缺失、相对路径、只靠 JS 注入、或缓存仍是旧的——卡片就会错，哪怕你自己浏览器里页面一切正常。
两类问题经常被混在一起：
| 问题 | 你在优化什么 | 工具族 |
|---|---|---|
| 别人分享你的站时的样子 | 标签、图片、爬虫可达、官方 rescrape | 调试器、预览站、生成器、CI 检查 |
| 你的产品里展开别人的链接 | 安全抓取、解析、缓存、SSRF 边界 | Unfurl API / 库 |
同一协议，所有权相反。本系列写的是第一行。若你在做第二行，需要的是爬虫与合规栈，而不是再装一个 meta 生成器。
真实全流程（大多数教程停在第一步）
- 写对标签 —— 绝对 HTTPS 地址、一致的
og:url/ canonical、可用的图。精确检查项见规则参考。 - 多平台预览 —— 第三方聚合预览近似布局与截断，适合日常 QA。
- 官方 rescrape —— 只有 Meta Sharing Debugger、LinkedIn Post Inspector 等能清它们自己的缓存；近似预览替代不了。
- （可选）动态出图 —— 每篇不同图时用 Next
opengraph-image、Satori 或模板 API。 - 防回归 —— 重构、CMS 默认值、SPA 壳会把标签弄丢；CI 与规则引擎接住这一步。
网上的「如何添加 Open Graph」多半停在第 1 步。线上痛点在 2–5：WhatsApp 静默丢图、LinkedIn 仍显示上个月的主视觉、爬虫看不到客户端注入的 meta、公网 debugger 够不到的 staging。
协议最小集与事实标准
协议要求的四件套是 og:title、og:type、og:url、og:image。实务上还要 og:description，通常还有 og:site_name，以及 Twitter Card（twitter:card 与图/标题回退）——部分客户端仍依赖它们。
这不是民间传说。各平台把 OG 当作链接预览的事实标准，哪怕产品文档叫「rich card」或「unfurl」。尺寸、字节预算、裁切比例、标题长度因平台而异，契约本身是共享的。
系列里已有一篇专门拆空白卡片的五种原因。下一篇会逐字段讲必填 meta（规划中：《必填 OG / Twitter meta 标签清单》）。
开发期 vs 上线后维护
| 阶段 | 常见翻车 | 真正有用的手段 |
|---|---|---|
| 开发 | 相对路径图片、空描述、type 乱填、hydration 后才有标签 | 服务端渲染 meta、绝对 URL、PR 里跑规则 |
| 上线 | 第一次抓取缓存了坏卡片 | 官方 debugger「重新抓取」/ Post Inspector |
| 迭代 | 换了图、URL 不变 → 仍是旧卡 | 对在意的平台逐个 rescrape；别赌 TTL 很短 |
| 规模化 | 上百页面，CMS 默认丢了 og:image |
全站扫描 + 关键路径 CI 门禁 |
只在笔记本上用浏览器扩展验，会漏掉爬虫拦截、生产 CDN 规则和缓存。只用多平台预览站，可能修好了布局却仍把 Meta 旧缓存推上线。两层都要。
卡在第 3 步时，重新抓取助手 会按 URL 列出官方入口。
工具地图一页纸
| 需求 | 该用什么 | 别指望它 |
|---|---|---|
| 强制平台清缓存 | 官方 debugger（Meta、LinkedIn…） | 第三方预览站 |
| 多平台视觉 QA | 聚合预览 / 评分站 | 权威缓存失效 |
| 快速拼一段 meta HTML | 标签生成器 | 长期正确性 |
| 每 URL / 每篇文章不同图 | 动态 OG 运行时 / 模板 API | 自动 rescrape |
| 在自己产品里展开链接 | Metadata / Unfurl API 与 scraper | 改善你站被分享时的卡片 |
| CI 防回归 | 规则引擎、CLI 扫描、HTML fixture 测试 | 好看的模拟卡片 |
行业里仍痛的空白：私有 / localhost 预览、带稳定规则 id 的 CI 门禁、图片工程（体积、跳转、Content-Type、各平台字节预算）。OGKit 就卡在这块——可以把它想成 OG 领域的 ESLint + Lighthouse：像爬虫一样抓取，用命名规则打分，分享卡片会坏时让构建失败。
上线前检查清单
-
og:title、og:type、og:url、og:image出现在原始 HTML（不只是 hydration 后的 DOM） - 图片与 URL 均为绝对 HTTPS；图片 200 可抓，无登录墙、无无限跳转
- description 是刻意写的，不是 CMS 空占位
- 用社交爬虫 User-Agent 的 curl 不被 robots / WAF 挡掉
- 改过标签或图之后，对真正在意的平台做了 rescrape
- 关键模板有自动化检查，避免下次改版默默删掉 meta
机器可读的完整检查见 OGKit 规则；平台差异见 平台档案。
下一篇读什么
- 为什么你的 Open Graph 卡片一片空白 —— 一分钟内分辨五种失败模式
- 必填 OG / Twitter meta 标签（系列下一篇）—— 最小正确集
- 八大平台卡片差异 —— 同一套标签为何裁切与截断不同
- 图片工程、缓存 / rescrape、SPA 抓取、CI 门禁 —— 系列后续篇
用公网 URL 试一次
把线上页面贴进首页扫描。你会拿到按规则拆开的报告，而不是一张「看起来还行」的模拟卡。公网爬虫够不到的 localhost / staging，留给扩展路径——系列后文会写。