WhatsApp分享链接缩略图不显示：OG标签问题排查求助

问题背景 #

网站OG标签配置正确，但将图片目录迁移至/storage后，WhatsApp分享链接时缩略图显示空白占位图，无法加载预期的产品图片。当前OG标签如下：

<meta property="og:title" content="ResMed AirSense 10 Autoset CPAP (2023) - with Cloud &amp; Tripack (Optional)">
<meta property="og:description" content="Buy Resmed Airsense 10 Autoset  CPAP Machine with Autoset algorithm, premium features like advanced event detection, Auto Ramp, Climate control and 3 year warranty">
<meta property="og:image" content="https://www.oxygentimes.com/storage/productlargeimages/Resmed-Airsense-10-Autoset1648186681.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.oxygentimes.com/cpap-bipap/resmed-airsense-10-autoset-cpap">

解决方案 #

1. 确认/storage目录的公开访问权限 #

WhatsApp爬虫无法访问需要验证或被拦截的资源，直接在浏览器隐私模式打开OG图片URL，检查是否能正常加载：

• 若无法加载，修改服务器配置（如Nginx/Apache的location规则），允许匿名访问/storage/productlargeimages/目录下的图片文件；
• 若使用PHP框架（如Laravel），需确保storage目录已创建软链接到public目录，或调整路由规则放行图片请求。

2. 补充OG图片的关键属性 #

WhatsApp对OG图片有严格的格式要求，需补充以下属性以提高兼容性：

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">

• 尺寸要求：推荐使用1200x630像素（1.91:1比例）的图片，不符合比例的图片可能被拒绝加载；
• 文件限制：确保图片为JPG/PNG格式，大小不超过5MB。

3. 强制WhatsApp刷新缓存 #

WhatsApp会缓存已爬取的链接数据，即使修复问题，旧缓存仍会显示空白图：

• 发送链接时添加随机参数（如?refresh=1），强制爬虫重新抓取页面内容；
• 更换设备或清除WhatsApp本地缓存后重试。

4. 检查服务器的User-Agent拦截规则 #

部分服务器会拦截非浏览器的爬虫请求，WhatsApp爬虫的User-Agent为facebookexternalhit/1.1或WhatsApp/[版本号]：

• 修改服务器配置，允许上述User-Agent访问/storage目录下的资源。

5. 验证OG标签的正确性 #

• 检查页面源码，确保OG标签全部位于<head>标签内，未被动态脚本修改；
• 确认图片URL无特殊字符，编码格式正确，不存在跳转或404错误。

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