WhatsApp分享商品链接时缩略图不显示的修复方案咨询

我在WhatsApp分享产品详情页链接时，出现缩略图无法显示的问题。以下是当前页面使用的Open Graph（OG）元标签代码，请问需要修改哪些内容才能让图片正常显示？

现有OG标签代码：

<meta property="og:type" content="Product Detail" />
<meta property="og:title" content="{{product.name|title}} | {{product.store.name|title}}" />
<meta property="og:site_name" content="Stocks Maze" />
<meta property="og:image" content="{{SERVER_BASE_URL}}{{product.image.0.image}}" xmlns:og="http://opengraphprotocol.org/schema/">
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:url" content="https://www.stocksmaze.com/product-detail/{{product.id}}/">
<meta property="og:type" content="product" />
<meta property="og:description" content="{{product.description}} from seller {{product.store.name|title}}.">

需修改的核心内容 #

• 移除重复的og:type标签
  OG规范要求og:type唯一，产品类页面需使用标准值product。删除第一个<meta property="og:type" content="Product Detail" />，保留第二个声明。

• 修正og:image标签格式

  1. 移除og:image标签中的xmlns:og属性，该属性应统一放在HTML根标签<html>上（如<html xmlns:og="http://opengraphprotocol.org/schema/">），而非单个meta标签；
  2. 补全标签闭合符/>，确保HTML语法合规；
  3. 确认{{SERVER_BASE_URL}}输出完整的HTTPS协议地址，避免相对路径或HTTP链接——WhatsApp仅优先加载HTTPS图片。

• 调整图片尺寸属性（优化显示效果）
  WhatsApp推荐缩略图使用1200x630像素（1.91:1比例），最小不低于300x200像素。当前300x300的正方形图片虽能被识别，但显示占比受限。需同步修改og:image:width和og:image:height的content值，且必须与实际图片的物理尺寸完全一致，否则WhatsApp可能忽略该图片。

• 确保图片可被爬虫访问
  检查图片服务器的防盗链设置，允许facebookexternalhit/1.1（WhatsApp爬虫的UA标识）访问图片资源；同时优先使用JPG/PNG格式，避免WebP等兼容性较差的格式。

修改后的完整代码示例 #

<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
  <meta property="og:type" content="product" />
  <meta property="og:title" content="{{product.name|title}} | {{product.store.name|title}}" />
  <meta property="og:site_name" content="Stocks Maze" />
  <meta property="og:image" content="{{SERVER_BASE_URL}}{{product.image.0.image}}" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:type" content="image/jpeg" /> <!-- 可选，指定图片格式 -->
  <meta property="og:url" content="https://www.stocksmaze.com/product-detail/{{product.id}}/" />
  <meta property="og:description" content="{{product.description}} from seller {{product.store.name|title}}." />
</head>
<!-- 页面其他内容 -->
</html>

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