AI AI 工具指南
常见问题解决库

分享时 OG 图不显示：4 个原因 + 对症修复

在 Twitter / LinkedIn / Slack 分享页面，预览图不出。

发布于: 作者: AI Productivity Guide Team 🌐 查看英文版本

有人把你的 URL 粘到 Slack，展开只有标题——没图。或者第一次有、后面就没了。或者 Twitter 有、LinkedIn 没。Open Graph 是 2010 年的标准；现代社交平台在它之上加了一堆自己的规则（尺寸限制、爬取频率、缓存时长）。修复通常是这几个之一：og:image 标签缺失、URL 是相对路径或 HTTP、图片尺寸不对、平台缓存了之前的错误。

下面按平台逐一过排查路径。

常见原因

按命中率从高到低。

1. og:image URL 是相对路径或 HTTP

Open Graph 要求绝对 HTTPS URL。绝大多数平台直接拒绝 <meta property="og:image" content="/images/cover.png">。

怎么判断：

curl -s "https://yoursite.com/article" | grep -oP '<meta property="og:image" content="\K[^"]+'

URL 不以 https:// 开头就是这条。

2. 图片太小或宽高比不对

不同平台规则不同：

平台最小甜点比例
Twitter (summary_large_image)300×1571200×6281.91:1
Facebook200×2001200×6301.91:1
LinkedIn400×4001200×6271.91:1
Slack200×2001200×630任意

1200×630（1.91:1）在所有平台都管用。

怎么判断：下载图片看尺寸。宽度 < 600px，Twitter 会回退到 summary（无图）哪怕你指定了 summary_large_image。

3. 平台缓存了旧版本（或 404）

Facebook、LinkedIn、Twitter 对 OG 爬取结果有强缓存。你修之前上线过没图版本，平台就缓存了”无图”几天到几周。

怎么判断：在 Facebook Sharing Debugger 测。仍显示旧版就是缓存陈旧。

4. 图片返回非 200

og:image URL 本身 404、403（要 auth）、或 500。浏览器和爬虫都拉不到。

怎么判断：

curl -sI "https://yoursite.com/og-image.png" | head -1

应该是 HTTP/2 200。其它码 = 图片坏了。

5. 动态生成的图慢或超时

如果用 Vercel OG / @vercel/og 现生成，首次请求要 3-5 秒。一些平台爬虫 2 秒就超时、当作没图。

怎么判断：curl -w "%{time_total}" https://yoursite.com/api/og?title=test。稳定 > 2 秒爬虫就会超时。

6. Twitter Card meta 缺失或类型错

Twitter 要显示大图需要同时有 og:image 和 <meta name="twitter:card" content="summary_large_image">。没这个，Twitter 默认小卡片模式。

怎么判断：curl -s "https://yoursite.com/article" | grep twitter:card。想要大预览就要看到 summary_large_image。

7. 跨域图片 CORS / CSP 问题

图片在另一个域名上，CORS 或 CSP 挡了第三方爬取，有些平台就失败。

怎么判断：图片放在 Vercel / Netlify 原站，而不是 CORS 严格的第三方 CDN。

最短修复路径

第 1 步：查看源代码验证标签

curl -s "https://yoursite.com/article" | grep -E 'og:|twitter:'

至少应包含：

<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://yoursite.com/og.png" />
<meta property="og:url" content="https://yoursite.com/article" />
<meta name="twitter:card" content="summary_large_image" />

og:image 必须是绝对 HTTPS。

第 2 步：验证图片 URL 返回 200

curl -sI "$(curl -s 'https://yoursite.com/article' | grep -oP 'og:image" content="\K[^"]+')"

应该 200 + Content-Type: image/png（或 jpeg）。

第 3 步：强制刷新每个平台的缓存

第 4 步：明确写尺寸

加 og:image:width 和 og:image:height，平台就不用爬图只为看尺寸：

<meta property="og:image" content="https://yoursite.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="图片描述" />

第 5 步：动态 OG 图重缓存

用 Vercel OG：

export const config = { runtime: 'edge' };

export default async function handler(req) {
  // ...生成图片...
  return new ImageResponse(content, {
    width: 1200,
    height: 630,
    headers: {
      'cache-control': 'public, max-age=31536000, immutable',
    },
  });
}

一年缓存，爬虫每次都快。

第 6 步：每个平台都真实测一次

修后在每个平台真发一次（私密 post）。不要只信 validator——平台的真实表现有时跟 validator 不一致。

预防建议

  • OG 标签永远用绝对 HTTPS URL。
  • 永远写 og:image:width 和 og:image:height。
  • 图片尺寸默认 1200×630。
  • 模板改完后，至少在 2 个平台测 OG（Facebook Debugger + LinkedIn Inspector）。
  • 动态 OG 图重缓存（内容稳定就 max-age=31536000，或基于 hash 的缓存）。

相关阅读

标签: #排查 #SEO #排查 #OG 图

相关文章