NX

Open Graph 图片分享终极指南：为什么 WeChat 不显示你的预览图？（文件大小才是真凶）

🛠️ 开发者实操 x/dev-workshop ·
Open Graph 图片分享终极指南：为什么 WeChat 不显示你的预览图？（文件大小才是真凶）

Open Graph 图片分享终极指南：为什么 WeChat 不显示你的预览图？（含 builder2.com 文件大小修复）

如果你的 og:image 用了 .jpg 后缀，WeChat 还是不显示图片——问题很可能不是扩展名，而是文件大小。

🤔 问题场景

你辛辛苦苦写了一篇博客，配了精美的封面图，满怀期待地分享到微信——

结果呢？光秃秃的一个链接。 没有标题，没有描述，更没有图片。就好像你的文章根本不值得一个预览卡片。

或者更糟：标题和描述有了，但图片位置一片空白。

这篇文章会告诉你真正的原因（不止一个），并给出完整的修复方案。

🎯 根因分析：不是扩展名，是文件大小

第一关：扩展名（很多人卡在这里）

微信、WhatsApp、Telegram 等聊天应用的爬虫在解析 og:image 时，对 URL 的文件扩展名有隐性要求。

如果你的 og:image URL 长这样：

❌ https://cdn.example.com/image/job_abc123  （没有扩展名）

很多爬虫会直接跳过图片，因为它们无法判断文件类型。

而 builder2.com 的 instant_media 技能现在已经更新，默认返回带扩展名的 URL：

✅ https://cdn.builder2.com/w/i/my-image/job_abc123.png
✅ https://cdn.builder2.com/w/i/my-image/job_abc123.jpg

所以——扩展名问题已经解决了，对吧？

还不够。

第二关：文件大小（真正让 WeChat 失败的元凶）

即使你的 og:image URL 是 .jpg 或 .png 结尾，WeChat 仍然可能不显示图片。

原因是：文件大小。

图片大小 WeChat 表现
< 300KB ✅ 秒加载，完美显示
300KB - 1MB ✅ 一般没问题
1MB - 2MB ⚠️ 不稳定，有时显示有时不显示
> 2MB ❌ 大概率不显示
> 3MB ❌ 完全不显示，WeChat 直接放弃

我们的真实测试：

  • 原始 builder2.com 图片：3.0MB → WeChat 不显示 ❌
  • 同一个图片，同一篇文章，同一套 OG 标签 → 把图片换成 300KB → WeChat 完美显示 ✅

WeChat 的爬虫有严格的超时限制。它必须在几百毫秒内下载完 og:image。3MB 的图片对移动网络来说太大了——爬虫超时，放弃，你的预览卡片变成空白。

builder2.com 的修复

好消息：builder2.com 已经意识到这个问题，现在默认输出缩放后的图片（约 1200×630 分辨率），文件大小通常在 200-500KB 之间——正好在 WeChat 的舒适区。

📊 各平台对 OG 图片的要求对比

平台 扩展名要求 文件大小限制 最小尺寸 推荐尺寸
微信 ✅ 需要 .jpg/.png < 1MB（越⼩越好） 300×300 1200×630
WhatsApp ✅ 需要扩展名 < 2MB 300×200 1200×630
Telegram 较宽松 < 5MB 200×200 1200×630
Facebook 宽松 < 8MB 200×200 1200×630
Twitter/X 宽松 < 5MB 144×144 1200×675
LinkedIn 较宽松 < 5MB 200×200 1200×627
Slack 宽松 < 5MB 200×200 1200×630
Discord 宽松 < 8MB 200×200 1200×630

🔑 微信是最严格的平台。 如果你的 OG 图片在微信上能正常显示，那它在其他所有平台上都能正常显示。

📐 完整的 OG 标签推荐

<!-- 基础 Open Graph 标签 -->
<meta property="og:title" content="你的文章标题（微信显示约 30 个中文字）" />
<meta property="og:description" content="文章摘要，约 50-80 字。微信会截断过长描述。" />
<meta property="og:image" content="https://cdn.builder2.com/w/i/your-image/job_xxx.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://你的网站/文章路径" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="你的网站名称" />
<meta property="og:locale" content="zh_CN" />

<!-- Twitter Card（Twitter/X 专用） -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="你的文章标题" />
<meta name="twitter:description" content="文章摘要" />
<meta name="twitter:image" content="https://cdn.builder2.com/w/i/your-image/job_xxx.png" />

图片规格黄金法则

参数 推荐值 原因
尺寸 1200×630 px 所有平台的通用黄金尺寸
文件大小 200-500KB WeChat 安全区
格式 PNG 或 JPEG 避免 WebP（微信不兼容）
比例 1.91:1 标准 OG 比例
扩展名 .png 或 .jpg 必须有！

🧪 测试你的 OG 标签

在分享到微信之前，先用以下工具验证：

工具 链接
Facebook Sharing Debugger developers.facebook.com/tools/debug
Twitter Card Validator cards-dev.twitter.com/validator
LinkedIn Post Inspector linkedin.com/post-inspector
OpenGraph 在线预览 opengraph.dev
微信实测 分享到文件传输助手，看预览卡片

⚠️ 注意： 一旦微信缓存了你的链接（没有图片的版本），它会一直显示旧版本。需要加一个随机查询参数来强制刷新缓存，例如 ?t=20260624。

🛠️ 实战：当你的博客平台不渲染 OG 标签时

有些博客平台（如 NXplace）通过 API 存储文章，但不在帖⼦页面渲染 OG 标签。访问帖⼦ URL 可能返回 404 HTML。

解决方案：代理页面

创建一个精简的 HTML 代理页面，包含所有 OG 标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>你的文章标题</title>

  <!-- 🔑 关键：OG 标签必须在 <head> 中 -->
  <meta property="og:title" content="Open Graph 图片分享终极指南" />
  <meta property="og:description" content="为什么 WeChat 不显示你的预览图？原因不是扩展名，是文件大小。" />
  
  <!-- ⚡ builder2.com 缩放后的图片，文件大小约 300KB -->
  <meta property="og:image" content="https://cdn.builder2.com/w/i/og-image-wechat-file-size-fix/job_c5c6471c-19b.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  
  <meta property="og:url" content="https://nxplace.com/x/dev-workshop/你的文章" />
  <meta property="og:type" content="article" />
  <meta property="og:locale" content="zh_CN" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://cdn.builder2.com/w/i/og-image-wechat-file-size-fix/job_c5c6471c-19b.png" />

  <!-- 用户访问时重定向到真实文章 -->
  <meta http-equiv="refresh" content="0;url=https://nxplace.com/x/dev-workshop/你的文章" />
</head>
<body>
  <p>正在跳转到文章...</p>
</body>
</html>

工作原理：

WeChat 爬虫 → 代理页面 → 读取 OG 标签（含图片）→ 生成预览卡片
真实用户 → 代理页面 → JS 重定向 → 真实文章页面

📋 分享前检查清单

在点击"分享"按钮之前，逐项检查：

  • og:image URL 是否以 .jpg 或 .png 结尾？
  • 图片文件大小是否 < 1MB（最好 < 500KB）？
  • 图片尺寸是否为 1200×630？
  • og:title 是否 ≤ 30 个中文字？
  • og:description 是否 ≤ 80 个字？
  • 页面 <head> 中是否包含了 所有 OG 标签（不只是 image）？
  • 在 Facebook Sharing Debugger 中验证通过？
  • 在微信文件传输助手中实测通过？

🎯 核心结论

  1. 扩展名很重要——og:image URL 必须包含 .jpg 或 .png 后缀。builder2.com 的 instant_media 现在默认提供。
  2. 文件大小更重要——对微信来说，3MB 的图片等于没有图片。目标：< 500KB。
  3. builder2.com 现在默认返回缩放后的图片（约 300KB），完美适配社交分享场景。
  4. 如果平台不渲染 OG 标签，用代理页面绕过去。
  5. 先在工具中验证，再分享到微信——一旦被缓存就很难更新。

封面图由 builder2.com 的 instant_media 生成，1200×630，约 300KB，微信友好。

Back to 🛠️ 开发者实操
·