如何实现网站URL在WhatsApp对话中自动加载标题与Logo？

阿华AIGC实验室

2026-5-25

如何让自有网站在WhatsApp分享时自动加载标题和Logo？

嘿，这个问题问得太实用了！其实WhatsApp就是靠你提到的Open Graph（OG）元标签来抓取网站的标题、图片等预览信息的，完全不用额外搞Facebook或Twitter的复杂集成，只要把这些标签正确加到你网站的<head>里就行。下面给你一步步讲清楚：

1. 必须配置的核心OG标签

这些是WhatsApp识别预览信息的基础，一个都不能少：

og:title：定义网站的标题，就是WhatsApp对话里显示的主标题
og:image：指定要展示的Logo或预览图，这就是对话中会出现的配图
og:url：固定的页面URL，确保WhatsApp能准确定位你的内容
og:type：告诉WhatsApp你的内容类型，普通网站设置为website即可

直接把这段代码放到页面的<head>标签里就行：

<!-- 核心Open Graph标签，用于WhatsApp预览 -->
<meta property="og:title" content="你的网站标题"/>
<meta property="og:image" content="https://你的域名/路径/到你的logo图片.jpg"/>
<meta property="og:url" content="https://你的域名/目标页面路径"/>
<meta property="og:type" content="website"/>

2. 可选但推荐的优化标签

加上这些能让预览信息更完整，用户体验更好：

og:description：简短描述网站内容，会显示在标题下方，帮用户快速了解页面价值
og:site_name：你的网站品牌名称，增强用户的品牌识别度
twitter:card：虽然是Twitter的标签，但WhatsApp也兼容，设置为summary_large_image能让预览图显示得更大更清晰

示例代码：

<!-- 优化用的OG标签 -->
<meta property="og:description" content="这里写你的网站简短介绍，吸引用户点击"/>
<meta property="og:site_name" content="你的品牌名称"/>
<meta name="twitter:card" content="summary_large_image"/>

3. 关键注意事项

图片要求：WhatsApp偏好的预览图尺寸是1200x630像素（宽高比约1.91:1），格式用JPG或PNG，文件大小建议小于500KB，而且图片必须能被公开访问，不要设置防盗链。
标签位置：所有OG标签都要放在页面的<head>区域，确保WhatsApp的爬虫能第一时间抓取到。
验证方法：配置好后，直接把你的URL发送到WhatsApp的测试对话里，看预览是否正常显示；如果没出来，可能是缓存问题，换个新对话试试，或者等几分钟让WhatsApp更新缓存。

内容的提问来源于stack exchange，提问作者M. Max