分享预览异常的根本原因是各平台爬虫对open graph字段有严格优先级和校验逻辑，如微信忽略og:image而用twitter:image或首张img，twitter只认twitter:description，所有og:image须https且尺寸合规，微博fallback到meta name="description"等。
直接改 <meta> 标签就能控制分享到微信、微博、Twitter、Facebook 时显示的标题、图片和描述——但多数人只加了 og:title 就以为完事，结果发出去还是显示乱码、缩略图不加载、甚至抓取到页面底部的无关文字。
为什么分享预览总是不按预期显示？
根本原因不是“没加 meta”，而是平台爬虫（如 Facebook 的 Sharing Debugger、微信的 JS-SDK 检查工具）对 Open Graph 协议字段有严格优先级和校验逻辑。比如：
- 微信会忽略
og:image，转而用twitter:image或页面内第一个<img>，除非你同时配置mp:wx:preview_image（仅限公众号） - Twitter 不认
og:description，必须用twitter:description - 所有
og:image必须是 HTTPS 路径，且宽高比建议 1.91:1（Facebook）、1:1（Twitter），尺寸至少 1200×630 像素，否则降级为默认图 - 部分平台（如微博）会 fallback 到
<meta name="description">，但如果你没写这个，它可能直接截取页面正文前 200 字——里面全是 JS 注释或导航栏 HTML
必须写的 5 个 <meta> 标签
以下标签需放在 内，顺序不重要，但缺一不可：
-
<meta property="og:title" content="页面真实标题（≤60字）">—— 不要用document.title动态值，服务端渲染时写死更稳 -
<meta property="og:description" content="一句话说明这是什么（≤200字）">—— 避免含换行、引号、HTML 实体；微信不读这个，但 Facebook、LinkedIn 依赖它 -
<meta property="og:image" content="https://yoursite.com/share.jpg">—— 必须绝对路径、HTTPS、可公开访问；建议加og:image:width和og:image:height显式声明尺寸 -
<meta name="twitter:card" content="summary_large_image">—— 固定写死，否则 Twitter 只显示纯文本卡片 -
<meta name="twitter:title" content="同 og:title，但允许微调">—— Twitter 会优先用这个而非og:title
微信朋友圈/聊天分享的特殊处理
微信内置浏览器不走标准 Open Graph，而是用 JS-SDK 的 updateAppMessageShareData 和 updateTimelineShareData 接口动态设置——但前提是页面已通过微信后台绑定 JS 接口安全域名，且引入了 https://res.wx.qq.com/open/js/jweixin-1.6.0.js。
- 静态
<meta>对微信基本无效（除公众号文章页的mp:wx:preview_image） - 必须在
wx.ready()后调用分享接口，并传入title、desc、link、imgUrl四个字段 -
imgUrl必须是 HTTPS、尺寸 ≥ 300×300，否则显示默认灰色图标 - 如果未调用 JS-SDK，微信会退化为用
<title></title>+ 页面首张<img>+<meta name="description">，但不可控
验证和调试不能跳过的三步
改完标签别急着发，先跑通验证链：
- 用 Facebook Sharing Debugger 输入 URL，点 “Scrape Again” —— 关注 “Warnings” 里是否提示
og:image尺寸不足或重定向失败 - 用微信开发者工具打开页面，Console 执行
document.querySelector('meta[property="og:title"]')确认标签存在且 content 值正确（注意：不要在 Vue/React 客户端渲染后查，要查服务端吐出的 HTML 源码） - 发链接到微博测试账号，观察是否出现「网页卡片」；若仍是纯链接，检查是否漏了
og:url（微博有时强依赖它做去重）
最常被忽略的是缓存：Facebook、LinkedIn 会缓存首次抓取结果长达 24 小时，改了 meta 必须手动触发重新抓取；微信 JS-SDK 分享数据每次刷新页面都会重载，但旧链接已发出去的无法更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
