根本原因是社交平台只信任中特定元标签，优先抓取og:开头的open graph标签，忽略js、css及多数name属性meta标签；必须配置og:title、og:description、og:image（绝对url）、og:url四个核心标签，且需满足尺寸、格式、协议等要求，并针对微信、微博、qq等平台添加兼容性补丁。
为什么分享链接时缩略图不显示或显示错误
根本原因不是 HTML 写得不够多，而是社交平台（微信、QQ、微博、LinkedIn、Facebook）在抓取页面时只信任 中特定的元标签，且优先级严格。它们不会执行 JS、不读取 CSS、甚至忽略大部分 <meta name>，只认 og: 开头的 Open Graph 标签和少数平台专有标签（如 twitter:card）。如果你只写了 <meta name="description"> 或靠 CMS 自动生成的默认 meta，大概率会被忽略。
必须写的 4 个核心 <meta> 标签
以下 4 条是微信、微博、钉钉、Facebook 等主流平台共同依赖的最小集合，缺一不可：
-
<meta property="og:title" content="页面标题">—— 不用title标签内容，OG 标题可独立控制，建议 ≤ 30 字 -
<meta property="og:description" content="分享摘要">—— 同样不读name="description"，需显式声明，建议 ≤ 80 字 -
<meta property="og:image" content="https://example.com/thumb.jpg">—— 必须是**绝对 URL**，协议不能省（http://或https://），相对路径、//开头的协议相对地址均无效 -
<meta property="og:url" content="https://example.com/page">—— 指向当前页规范 URL，避免被当成重复内容或跳转后抓错
注意：og:image 的图片要求很实际：推荐尺寸 ≥ 1200×630 像素，格式为 JPG/PNG，大小建议 ≤ 5MB；微信内部分场景会强制裁剪为 1:1，所以关键内容别贴边。
微信/微博/QQ 各自的兼容补丁
Open Graph 是基础，但国内平台有额外偏好：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 微信内置浏览器（含公众号、聊天页）会优先读
<meta name="full-image" content="...">（非标准，但实测有效），可作为og:image的备用 fallback - 微博要求
<meta property="weibo:article:create_at" content="2024-03-15">才能展示时间，否则摘要可能被截断；同时支持weibo:image，但优先级低于og:image - QQ 和手机 QQ 分享依赖
<meta itemprop="image" content="...">（Schema.org 规范），加上更稳妥；另外，<meta name="qq:admins" content="xxx">能提升审核通过率（非必需但建议填）
Twitter 已基本弃用，但若仍需支持，加一行 <meta name="twitter:card" content="summary_large_image"> 即可，它只认这个值才能展示大图。
调试与验证时最容易忽略的三件事
本地开发或刚上线时，缓存和预取机制会让测试结果滞后：
- 微信不读 localhost 或 127.0.0.1 的链接，调试必须用线上域名 + HTTPS；HTTP 页面在新版微信中直接禁用分享卡片
- 所有平台都会缓存
og:image，改图后需主动刷新：微信用「微信开发者工具」的「网页调试」功能；Facebook 用 Sharing Debugger；微博用 微博调试工具 - 服务端返回的 HTTP 状态码必须是 200，301/302 重定向会导致抓取中断；Nginx/Apache 若配置了防盗链（
Referer限制），务必放行mp.weixin.qq.com、graph.facebook.com等爬虫 UA，否则图片 403
真正卡住人的往往不是标签怎么写，而是图传上去了、链接发出去了、但平台缓存没清，或者图片服务器悄悄拦截了爬虫请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
