如何实现带URL预览（含缩略图）的短信打开功能？

阿华AIGC实验室

2026-4-27

搞定短信/WhatsApp里URL的缩略图预览

嘿，我来帮你捋清楚这个问题！你想要的那种带缩略图的URL预览，不是靠sms链接本身的参数就能实现的——核心是你链接指向的页面得配置好Open Graph（OG）元数据，WhatsApp这类应用会自动抓取这些数据生成预览。你之前试Meta属性没成功，大概率是标签没配对或者URL有问题，下面给你一步步说怎么弄：

先给目标页面补全OG核心标签
不管你链接的是自己的页面还是第三方页面（比如YouTube），只要页面的<head>里有正确的OG标签，应用才能抓取到缩略图。如果是你自己的页面，一定要加这些标签：

<!-- 预览显示的标题 -->
<meta property="og:title" content="你的页面标题">
<!-- 预览的描述文字 -->
<meta property="og:description" content="一两句话描述这个页面">
<!-- 关键！缩略图的直接链接，建议尺寸300x200以上，用JPG/PNG，别用带防盗链的图 -->
<meta property="og:image" content="https://你的图片地址.jpg">
<!-- 告诉应用图片的尺寸，避免拉伸变形 -->
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="400">
<!-- 页面类型，比如网站就写website，文章写article -->
<meta property="og:type" content="website">
<!-- 必须和你短信里放的URL完全一致，包括协议和路径 -->
<meta property="og:url" content="https://www.your-domain.com/your-page">

修正sms链接的格式问题
你现在的sms链接里body参数里的URL带了空格：https://www.youtube.com/ Test，空格会被错误编码，导致应用抓不到正确的页面。要把空格换成%20，或者把文本和URL分开写，比如：
```
<a href="sms:1234567890?body=Check%20this%20cool%20link:%20https://www.youtube.com/watch?v=xxxxxx" style="color:blue;background-color:#FFA500">Test</a>
```
验证你的OG标签是否生效
可以用平台的调试工具输入目标页面URL，看看能不能正确抓取到缩略图、标题和描述。如果抓不到，排查这几个点：
- 图片URL是不是能直接访问（别加登录验证、防盗链）
- 页面加载速度是不是太慢，导致抓取超时
- OG标签的拼写有没有错（比如把property写成name就不行）
如果链接的是第三方页面（比如YouTube）
像YouTube这类平台本身已经配好OG标签了，这时候只要你用的是完整正确的页面/视频URL，WhatsApp会自动抓取预览。比如别用半截URL，直接用https://www.youtube.com/watch?v=xxxxxx这种标准格式就行。