OGKit

为什么你的 Open Graph 卡片一片空白

  • open-graph
  • 调试

你把链接粘贴到 Slack,只看到一个裸网址;再粘贴到 X,也只有一行纯文本。模板里明明写着标签,究竟哪里出了问题?

实际遇到的空白卡片,很少只是因为缺少 og:image。通常是下面五种情况之一;知道该看什么后,很快就能分辨。

1. 图片使用了相对网址

Open Graph 规范需要绝对网址。相对网址在浏览器中可以正常解析,但在其他地方会失败,因为爬虫没有可用于解析的文档基准网址。

<!-- 会静默失败 -->
<meta property="og:image" content="/static/card.png" />

<!-- 正确写法 -->
<meta property="og:image" content="https://example.com/static/card.png" />

og:url 也遵循同一规则。精确的检查逻辑见 og-image-relative-url

2. 标签由 JavaScript 注入

大多数爬虫不会运行你的 JavaScript。如果 meta 标签是在 hydration 后由客户端路由器或类似分析脚本的代码添加,爬虫看到的只有空壳。

用 curl 获取页面,查看网络实际返回的内容:

curl -sL https://example.com/post | grep -i 'og:'

如果输出里没有这些标签,那么对分享平台来说,它们就不存在。请在服务端渲染这些标签。

3. 爬虫被拦截

robots.txt 规则、X-Robots-Tag 响应头、WAF 或 CDN 机器人过滤器,都可能只对平台爬虫返回 403,而你的浏览器仍能正常加载页面。这是最容易让人困惑的失败模式,因为自己检查时一切正常。

典型迹象是:页面对你可以打开,但平台调试器报告抓取错误。请比较普通请求与爬虫 User-Agent 的响应:

curl -sI -A "facebookexternalhit/1.1" https://example.com/post

4. 图片本身加载失败

标签即使完全正确,所指向的资源仍可能返回 404、跳转到带签名的网址流程、位于登录保护之后,或使用平台无法解码的 MIME 类型。平台在这里通常会直接放弃:没有图片,就没有卡片。

尺寸也很重要。图片小于约 200×200 时,多数平台不会渲染大卡片;文件过大则可能在抓取完成前超时。

5. 旧抓取结果仍在缓存中

如果一个网址第一次被抓取时标签还没修好,平台可能连续数天使用那份缓存结果。修正页面不会自动清除缓存——你需要主动要求平台重新抓取。

每个平台都有自己的调试器和缓存周期;重新抓取助手 可以根据网址列出对应入口。

如何快速分辨

现象 可能原因
浏览器预览正常,平台中不正常 JavaScript 注入标签,或爬虫被拦截
文本正常,图片缺失 图片网址为相对路径、返回 404,或尺寸太小
源码完全正确,卡片仍是旧内容 抓取缓存未更新
一个平台正常,另一个不正常 平台各自的尺寸或格式限制

通用方法始终一样:查看爬虫实际收到的原始 HTML,而不是浏览器构建后的 DOM;然后单独确认图片网址可以抓取。

这大致就是 OGKit 自动完成的工作:像爬虫一样获取页面、检查图片,并报告失败的具体规则。完整检查项见规则参考