社交分享预览失效主因是平台对meta字段的优先级、协议及尺寸等硬性要求不满足：微信不用og:image而取首张img，twitter只认twitter:title和twitter:description，所有og:image须https且尺寸合规，静态标签需服务端渲染，微信还需js-sdk动态配置。
社交分享预览不按预期显示，不是因为没加 <meta> 标签，而是平台爬虫对字段有严格优先级、协议校验和 fallback 逻辑——比如微信根本不用 og:image，Twitter 只认 twitter:description，而所有 og:image 必须是 HTTPS 且尺寸合规，否则直接降级为默认图。
og:title 和 twitter:title 不一致时以谁为准
Twitter 会优先使用 twitter:title，而不是 og:title；Facebook、LinkedIn 等则只读 og:title。如果你只写了一个，另一平台就可能显示空、截断或 fallback 到 <title></title> 标签内容。
-
og:title控制 Facebook、LinkedIn、WhatsApp、Slack 等大多数平台的标题 -
twitter:title是 Twitter（X）唯一认的标题字段，必须显式声明 - 两者内容建议一致，但允许微调：比如 Twitter 标题可加 emoji 或缩短至 70 字以内（平台限制）
- 避免用 JS 动态改
document.title后再塞进 meta——服务端渲染时写死更稳，否则爬虫抓不到
og:image 失效的常见原因
og:image 是最容易出问题的字段，失效往往不是“没填”，而是细节不满足平台硬性要求。
- 必须是绝对 HTTPS 路径，
http://或相对路径（如/share.jpg）会被忽略 - 图片需公开可访问：不能带登录态、防盗链 header、或部署在 localhost
- 尺寸至少 1200×630px（Facebook 推荐宽高比 1.91:1），Twitter 偏好 1200×1200px（summary_large_image 卡片）
- 建议显式声明尺寸：
<meta property="og:image:width" content="1200">和<meta property="og:image:height" content="630">，避免爬虫解析失败 - 微信完全不读
og:image，它优先取页面第一个<img>，其次 fallback 到twitter:image，再不行就用mp:wx:preview_image（公众号专用）
description 类字段平台差异极大
描述字段看似简单，实则最易踩坑：不同平台根本不读同一个标签。
-
og:description：Facebook、LinkedIn、WhatsApp 依赖它，但微信完全无视 -
twitter:description：Twitter（X）唯一认的描述字段，og:description对它无效 -
name="description"：微博 fallback 到这个字段；Google 搜索结果摘要也用它；但若缺失，微博可能截取页面正文前 200 字——里面全是 JS 注释或导航 HTML - 所有描述字段都禁止含换行符、双引号、HTML 实体（如
&），否则解析中断或显示异常 - 长度建议：Twitter ≤200 字，Facebook ≤300 字，
name="description"控制在 120–155 字符内（Google 摘要截断点）
微信分享必须额外处理
静态 <meta> 标签对微信朋友圈/聊天分享基本无效——它的内置浏览器不走 Open Graph 协议，而是依赖 JS-SDK 动态设置。
- 必须先在微信公众号后台绑定 JS 接口安全域名，并引入
https://res.wx.qq.com/open/js/jweixin-1.6.0.js - 调用
updateAppMessageShareData（聊天分享）和updateTimelineShareData（朋友圈）接口传入 title/desc/link/imageLink - 注意：这些接口只在用户主动触发分享时生效，爬虫不会执行 JS，所以仍需配好静态 OG 标签供其他平台使用
- 如果页面未通过微信 JS-SDK 验证，或域名未备案/未绑定，调用会静默失败，分享仍显示默认摘要
真正决定分享效果的，从来不是“有没有加 meta”，而是每个字段是否同时满足目标平台的协议规则、传输协议、尺寸、权限与解析时机——漏掉任意一环，就可能在某个平台显示为空白图、乱码标题，或直接 fallback 到页面底部一段无关代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
