Next.js中OG图片在WhatsApp分享时无法显示的技术问询

排查方向和修复步骤 #

• 换图片格式并调整尺寸
  WhatsApp对WEBP格式兼容性较差，优先改用JPG或PNG格式。同时将图片尺寸调整为1200x630像素（WhatsApp推荐的1.91:1最佳比例），文件大小控制在5MB以内。

• 确保图片可公开访问
  存在Google Cloud Storage中的图片需设置为公开可读权限，否则WhatsApp的爬虫无法抓取到图片，导致预览失效。

• 检查页面渲染的OG标签
  手动查看页面源码，确认og:image、og:image:width、og:image:height等标签已正确生成，且og:image的URL与配置完全一致。

• 刷新WhatsApp缓存
  WhatsApp会缓存已分享链接的内容，修改配置后需触发重新抓取：可以给链接添加随机参数（如https://baseurl.com?v=1），或直接清除WhatsApp的APP缓存后重新发送链接。

• 保证URL完全匹配
  配置里的openGraph.url要和实际分享的URL完全一致，包括HTTP/HTTPS协议、是否带www前缀，任何细微差异都可能导致预览异常。

调整后的参考配置 #

若将图片转成JPG格式，配置可修改为：

openGraph: {
    description: "description",
    url: "https://baseurl.com",
    images: [
      {
        url: "https://storage.googleapis.com/jupitermeta-storage/superj/images/Mochi%20Shoes%20Logo.jpg",
        width: 1200,
        height: 630,
        alt: "Preview image for Kantar dashboard",
        type: "image/jpeg",
      },
    ],
    type: "website",
  },

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