HTML页面直接分享到社交平台默认不携带标题、描述、缩略图，因主流App依赖服务端返回的含绝对URL的Open Graph/Twitter Card meta标签，且需静态或SSR页面、微信对图片有尺寸和直连要求；SPA须用SSR或预渲染解决，纯前端仅微信可用JS-SDK补救。
HTML 页面直接分享到社交平台，基本不会携带标题、描述、缩略图——不是“影响大不大”的问题，而是“默认完全不生效”。
为什么 meta 标签写了也不起作用
微信、微博、QQ、钉钉等主流 App 的分享预览，依赖服务端返回的原始 HTML 中的 <meta> 标签（尤其是 Open Graph 和 Twitter Card 协议），但前提是：
- 分享链接必须指向一个静态或服务端渲染的 HTML 页面（不能是前端路由如
/post/123，除非服务端能识别并返回对应内容） -
<meta property="og:title">、<meta property="og:image">等标签必须在 HTML 的<head>中，且值为**绝对 URL**（og:image尤其不能是相对路径或 blob URL） - 微信内置浏览器对
og:image有额外限制：尺寸建议 ≥ 300×300，格式为 JPG/PNG，且必须可被微信服务器直连访问（不能带登录态、不能 403/404）
Vue/React 单页应用（SPA）怎么破
客户端渲染的页面，初始 HTML 是空壳，og: 标签无法动态注入到 <head> 并被爬虫捕获。解决方案只有两个方向：
- 服务端渲染（SSR）：用 Nuxt / Next.js / SSR Express 中间件，在请求时生成含正确
<meta>的完整 HTML 返回 - 预渲染（Prerendering）：构建时为关键路由（如
/share/:id）生成静态 HTML 文件，里面硬编码对应og:标签（适合内容更新不频繁的场景） - 纯前端补救（仅限微信）：调用微信 JS-SDK 动态设置分享配置，但只对微信内有效，且需后端签名，
updateAppMessageShareData和updateTimelineShareData必须在ready后调用
最简兼容写法（静态页 or SSR 输出）
以下 <meta> 块必须出现在 <head> 中，顺序不重要，但字段要全：
立即学习“前端免费学习笔记（深入）”；
<meta property="og:title" content="文章标题"> <meta property="og:description" content="不超过 200 字的摘要"> <meta property="og:image" content="https://example.com/img/share.jpg"> <meta property="og:url" content="https://example.com/post/123"> <meta property="og:type" content="article"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="文章标题"> <meta name="twitter:description" content="摘要"> <meta name="twitter:image" content="https://example.com/img/share.jpg">
注意：og:image 和 twitter:image 必须是可公开访问的 HTTPS 地址；若图片带参数（如 ?v=2024），确保 CDN 不缓存错版本。
调试与验证工具
别靠“发给朋友看一眼”来测试，要用官方抓取工具：
- 微信：用「微信开发者工具」→「公众号网页调试」或 debug 工具 输入 URL 查看解析结果
- Facebook：用 Sharing Debugger，支持刷新缓存
- Twitter：用 Card Validator
- 通用检查：curl -I 你的 URL，确认返回状态码是 200，且响应头没有
X-Robots-Tag: noindex
最常被忽略的是：本地开发用 localhost 调试时，所有社交平台都无法访问，必须部署到有真实域名的环境才能验证。
