WhatsApp Desktop端OG图片预览失效问题求助

问题背景 #

近期WhatsApp Desktop更新后，网页分享时无法显示图片预览，但移动端正常运行。已尝试更换SSL证书（从Cpanel Inc.换成ZeroSSL），问题未解决。

页面代码 #

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="og, image, test" />
    <meta name="description" content="Og:image test" />
    <meta name="author" content="Maurício Ramos da Silva">

    <meta property='og:image' content='https://teste.mauricioramos.com.br/003.jpg'/>
    <meta property='og:url' content='https://teste.mauricioramos.com.br'/>
    <meta property='og:type' content='website'/>
    <meta property='og:title' content='Duplex/Casa Geminada Venda'/>
    <meta property='og:description' content='Residência geminada com 2 dormitórios (suíte americana), banheiro social, living amplo integrado a cozinha, área de serviço e estacionamento para 2 carros. Forro em laje de concreto, aberturas em alumínio, amplo pátio fechado e individual.'/>
</head>

<body>
    <h1>WhatsApp Desktop og: Test</h1>
    
    <button onclick="share()">Share</button>
    
    <img src="003.jpg" width="300"/>
    
    <script>
        const content = 'Residência geminada com 2 dormitórios (suíte americana), banheiro social, living amplo integrado a cozinha, área de serviço e estacionamento para 2 carros. Forro em laje de concreto, aberturas em alumínio, amplo pátio fechado e individual. https://teste.mauricioramos.com.br';
        const result = 'https://wa.me/?text=' + content;
        
        function share() {
            console.log('open');
            
            window.open(result, '_blank')
        }
    </script>
</body>
</html>

可行解决措施 #

• 严格符合OG图片规格要求：WhatsApp对预览图片有明确限制，需满足：
  • 尺寸至少为300x200px，推荐1200x630px（1.91:1比例）
  • 文件格式为JPG/PNG，大小不超过5MB
  • 图片URL必须是HTTPS且可直接访问，无跳转或防盗链限制
• 清除WhatsApp Desktop缓存：
  1. 关闭WhatsApp Desktop
  2. 根据系统找到缓存目录：
     • Windows：%appdata%\WhatsApp\Cache
     • macOS：~/Library/Caches/WhatsApp
  3. 删除缓存文件夹内的所有文件，重新启动应用
• 检查服务器响应头：确保图片返回的Content-Type正确（如image/jpeg或image/png），且没有设置过度的缓存限制，避免WhatsApp爬虫无法缓存图片
• 优化分享链接的URL编码：当前代码直接拼接文本到wa.me链接，未做URL编码可能导致特殊字符解析异常，修改代码为：

  const content = 'Residência geminada com 2 dormitórios (suíte americana), banheiro social, living amplo integrado a cozinha, área de serviço e estacionamento para 2 carros. Forro em laje de concreto, aberturas em alumínio, amplo pátio fechado e individual. https://teste.mauricioramos.com.br';
  const result = 'https://wa.me/?text=' + encodeURIComponent(content);
  

• 检查图片的跨域设置：确保服务器没有设置阻止WhatsApp爬虫访问图片的CORS规则，可直接在浏览器访问图片URL确认能正常加载
• 等待WhatsApp缓存刷新：WhatsApp会缓存链接预览内容，若之前的链接有错误，即使修复后也可能需要几小时到24小时才能更新预览

内容的提问来源于stack exchange，提问作者Maurício