WhatsApp 链接预览不显示?修复 og:image
WhatsApp 链接预览不显示,几乎总是由以下五个原因之一导致:页面缺少 og:image 标签、图片 URL 无法公开访问、图片尺寸不合适导致 WhatsApp 裁剪、裁剪正常但预览已过期,或商店的 SEO 插件输出了冲突的标签。本指南涵盖每个原因、为什么您无法强制 WhatsApp 刷新,以及如何在 WooCommerce 商店中进行修改。
简短回答
WhatsApp 会根据页面的 Open Graph 标签生成链接预览。如果 og:image 缺失、无法访问,或不是 1200×630 的卡片形状,分享出去的内容就会显示为纯链接、灰色占位块,或裁剪不当的产品图片。大多数 WooCommerce 商店根本没有为产品页面设置 og:image——SEO 插件会回退到静态的特色图片,而方形或竖长的产品照片会被裁掉两侧或顶部。
1. 页面上没有 og:image 标签
这是商店中最常见的原因。WordPress 和 WooCommerce 默认不会为产品、分类或商店页面输出 og:image,而如果主题没有处理 Open Graph,则标签会完全缺失。
修复方法: 查看页面源代码,确认存在 og:image 标签,且为绝对路径(完整的 https://… URL,绝不能是相对路径),并且是服务端渲染的——而不是在加载后由 JavaScript 注入的。WhatsApp 不会运行你的 JavaScript。
curl -s https://your-store.com/product/example | grep -i 'og:image'
空结果就是答案:WhatsApp 没有可显示的图片。
2. 图片 URL 无法被公开抓取
WhatsApp 的爬虫会像任何匿名客户端一样抓取图片。位于登录页之后、localhost 上、裸 IP 地址上,或被 robots.txt 阻止的路径上的 URL,都会抓取失败。
修复方法: 确认该 URL 无需凭据即可返回图片。
curl -I https://your-store.com/wp-content/uploads/product.jpg
你需要 200 OK 和 image/png 或 image/jpeg 的 Content-Type。
robots.txt 陷阱。 社交爬虫会遵循 robots.txt,因此阻止图片所在路径的规则会破坏预览——而且这种破坏方式很容易被误诊。Meta 的调试器随后会报告 "无法作为图片处理。图片可能已损坏或格式无效",这读起来就像渲染损坏一样。curl 永远不会复现此问题,因为 curl 会忽略 robots.txt。如果你的图片是从被 Disallow: 规则覆盖的路径提供的,那么无论文件本身多么有效,预览都会失败。我们在 FastOG 自己的渲染路径上也遇到了这个问题,并通过最长匹配的 Allow: 覆盖规则修复了它。
3. WhatsApp 会裁剪您的产品图片——而编辑照片本身无法解决这个问题
这就是商家所描述的 “我的产品图片在 WhatsApp 上被裁剪了” 的症状,也是值得正确理解的一个问题。
该平台会将提供给它的任何图片裁剪为 1200×630 的框架。方形或竖版的产品照片会被裁掉两侧或顶部;logo 平铺图则会被拉伸。在 Photoshop 中手动裁剪源照片是徒劳的,因为 WhatsApp 是根据卡片的宽高比来决定裁剪方式,而不是根据您选择的构图——而且下一张产品照片的形状又会不同。
解决办法是改变您提供的图片,而不是您拥有的照片。 发送一张已经按 1200×630 构图好的卡片,并将产品照片嵌入其中。这样平台就没有什么可裁剪的了。
4. 正确的 WhatsApp 链接预览图片尺寸
标准的 Open Graph 图片尺寸为 1200×630 像素,宽高比为 1.91:1,这也是包括 WhatsApp 在内的所有主流平台所期望的格式。使用 1200×630 的图片,预览效果将按预期呈现;如果使用 1000×1000 的正方形图片,WhatsApp 会将其裁剪以填满整个预览框。
请将文件大小控制在 5 MB 以内。一张包含文字和产品信息的 1200×630 卡片,PNG 格式通常为 200 KB 至 500 KB。
关于该宽高比成为标准的原因,请参阅 OG 图片尺寸:1200×630 详解。
5. 预览是旧的——而且你无法强制 WhatsApp 刷新
如果标签、URL 和格式都正确,但预览仍然不对,那你遇到的是缓存问题。
WhatsApp 会缓存预览。它保存在接收者的应用内,这意味着没有任何工具可以要求 WhatsApp 刷新它——调试器不行、API 不行、我们也不行。WhatsApp 不提供任何形式的编程式刷新,所以没有按钮可按。任何声称可以的人,描述的其实是 Facebook 的行为,而不是 WhatsApp 的。
你能做的是确保正确的图片在 WhatsApp 下次读取页面时已经就位。这正是 FastOG 的封面 URL 采用内容寻址的原因:修改产品的标题、价格或图片,URL 也会随之变化,因此下次读取时不可能拿到旧的卡片。至于何时读取,则由 WhatsApp 决定。
另外两个相关平台的行为也相同——LinkedIn 和 X 同样不提供失效 API,通常大约一周内会重新读取。如果你赶时间,它们自带的检查工具可以推动这一过程:
| 平台 | 工具 | 能否强制刷新预览? |
|---|---|---|
| (无) | 不能——预览缓存在接收者的应用内 | |
Sharing Debugger——developers.facebook.com/tools/debug |
可以——使用“Scrape Again”,也支持编程方式 | |
Post Inspector——linkedin.com/post-inspector |
可推动重新读取 | |
| X / Twitter | Card Validator——cards-dev.twitter.com/validator |
可推动重新读取 |
用 Facebook 调试器解决 WhatsApp 问题。 即使它无法刷新 WhatsApp,仍然值得把 URL 粘贴到 Sharing Debugger 中,因为它会以 WhatsApp 相同的方式抓取页面,并报告实际发现的内容——缺失的标签、无法访问的图片、格式错误。把它当作标签的验证器,而不是 WhatsApp 缓存的修复工具。
6. 在 WooCommerce 商店中修复此问题
在 WooCommerce 上,具体流程值得明确说明,因为失败模式通常出在 SEO 插件上,而不是主题上:
- 默认情况下不存在该标签。 WooCommerce 本身不为
og:image、product、product_cat或商店页面提供该标签。 - 您的 SEO 插件会糟糕地填补这一空白。 Yoast、Rank Math、All in One SEO 和 SEOPress 会输出一个
og:image—— 但对于产品,它们会使用静态特色图片。那是一张方形或竖版照片,而这正是 WhatsApp 随后会裁剪的图片。 - 注意重复标签。 如果两个插件都输出
og:image,平台会任选其一,而选中的可能不是您期望的那个。请查看源代码,统计页面输出了多少个og:image标签。
FastOG for WooCommerce 采用了不同的方式:它在自己的渲染服务上,根据实时目录数据(标题、价格、促销徽章、评分、产品照片)渲染一张 1200×630 的卡片,然后将该封面交给您已在运行的任何 SEO 插件,而不是自行输出一个竞争性标签。这样页面上只保留一个 og:image,而且它是一张针对 1.91:1 画幅精心设计的卡片,而非原始产品照片。
由于封面是根据实时目录数据绘制的,卡片上的价格与页面上的价格一致,打折商品会显示促销徽章。当您保存产品时,插件还会请求 Facebook 重新读取页面——Facebook 是唯一提供编程式刷新的平台。WhatsApp、LinkedIn 和 X 会按照各自的计划进行更新,插件会如实说明这一点,而不是承诺无法兑现的刷新。
查看 WhatsApp 实际会看到的内容
在修改任何内容之前,请先以爬虫的方式查看页面。将任意产品 URL 粘贴到 See Your Links The Way Buyers Do — 它会抓取页面,读取当前的 Open Graph 标签,并显示 WhatsApp、X 和 Messenger 渲染出的预览效果,旁边还会展示基于相同产品数据生成的 FastOG 封面。无需注册。
更倾向于直接检查原始标签?可使用 Open Graph Meta Tag Generator 查看标记,或参阅 og:image Not Showing? How to Fix It 中的参考文档。
常见问题解答
为什么我的产品图片在 WhatsApp 上会被裁剪?
WhatsApp 会将其收到的任何图片裁剪为 1200×630 的框架。正方形或竖版的产品照片会丢失两侧或顶部内容。如果直接提供一张已按 1200×630 尺寸组合好的卡片——产品照片已嵌入卡片内部——平台就没有任何可裁剪的内容。
能否强制 WhatsApp 刷新链接预览?
不能。WhatsApp 不提供刷新 API 或调试工具,且缓存的预览保存在接收方的应用中。您只能确保正确的图片已准备好供下次读取。Facebook 是例外,它提供了编程方式重新抓取。
为什么 Facebook Sharing Debugger 显示了我的图片,但 WhatsApp 却什么都不显示?
因为它们是独立的缓存,而调试器报告的是页面标签的内容,两个平台都会读取这些标签。如果调试器显示图片正确,但 WhatsApp 不显示,说明标签没有问题,您看到的是未刷新的 WhatsApp 缓存。如果调试器也什么都不显示,则说明标签缺失或图片无法访问——请依次排查原因 1 和 2。
WhatsApp 使用 og:image 还是 twitter:image?
og:image。请设置 Open Graph 标签。twitter:image 是用于 X 的。
我需要安装插件,还是可以自己添加标签?
您可以自己在主题中添加静态的 og:image 标签——这确实有效,而且比什么都不做要好得多。但它无法为每个产品生成独立的卡片,除非您为每个产品手动制作一张图片,而且每次价格变动时它都会过期。这时动态封面就值得考虑了。
我的网站不在 FastOG 上。这些方法还有用吗?
有用——这五个原因是平台行为,而非 FastOG 行为。请按照顺序使用 curl、页面源代码和调试器逐一排查。