Open Graph og:image在iMessage正常显示，WhatsApp无预览图求助

问题描述 #

我设置了Open Graph标签后，iMessage能正常显示完整预览图，但WhatsApp里完全不显示图片。最初的代码：

<meta property="og:image" content="https://myurl.com/logo.png" />
<meta property="og:image:width" content="300">

更新标签后问题仍未解决，更新后的代码：

<meta property="og:site_name" content="SiteName">
<meta property="og:url" content="myurl.com" />
<meta name="twitter:card" content="summary" />
<meta property="og:image" content="myurl.com/logo.png" />
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="400">

排查方向与解决方法 #

• 补全URL的协议头
  你更新后的og:url和og:image都没加https://，WhatsApp对URL格式要求严格，必须是完整的带协议地址，否则会无法识别。修改后示例：

  <meta property="og:url" content="https://myurl.com" />
  <meta property="og:image" content="https://myurl.com/logo.png" />
  

• 校验图片实际尺寸与标签声明一致
  标签里声明了400x400，要确认图片文件的实际尺寸确实是这个数值。WhatsApp会校验声明尺寸和实际文件尺寸，不匹配可能会跳过渲染。

• 尝试更换图片格式
  虽然PNG格式理论上支持，但可以试试转成JPG格式（保留合适清晰度，文件大小控制在50KB以内），部分情况下PNG的透明通道或编码方式可能被WhatsApp的解析逻辑拦截。

• 强制刷新WhatsApp缓存
  WhatsApp会缓存OG数据，就算修改了标签，可能还在读取旧缓存。可以用两种方法刷新：

  • 给测试链接加版本参数，比如https://myurl.com/?v=1，生成新链接发送测试
  • 把链接发给自己的小号，长按链接选择「刷新预览」（部分WhatsApp版本支持该功能）

• 检查服务器响应设置

  • 确保图片的Content-Type响应头正确，比如PNG返回image/png，JPG返回image/jpeg
  • 服务器不要设置防盗链规则拦截WhatsApp爬虫请求，允许所有UA访问图片资源

• 补充完整的OG基础标签
  WhatsApp需要完整的OG标签集合才会正常渲染预览，你现在的标签缺少og:title和og:description，建议补上：

  <meta property="og:title" content="你的页面标题">
  <meta property="og:description" content="你的页面描述">
  

内容的提问来源于stack exchange，提问作者HirtLocker128