需按平台差异配置5个基础meta标签并确保服务端静态输出：og:title、og:description、og:image、twitter:card、twitter:title；微信依赖meta name="description"和首张HTTPS图片，各平台缓存需用对应工具刷新验证。
要让网页在微信、微博、Twitter、Facebook 等平台分享时显示指定标题、描述和图片，不能只靠“加几个 meta 标签”了事——得按各平台实际抓取逻辑分别配置，且确保服务端静态输出、路径绝对、资源可直连。
必须写全的 5 个基础 meta 标签
以下标签需全部放在 <head> 内，缺一不可：
- <meta property="og:title" content="页面真实标题（≤60字）">——别用 JS 动态改 document.title，微信不读这个，但 Facebook、LinkedIn 依赖它
- <meta property="og:description" content="一句话说明这是什么（≤200字）">——避免换行、引号、HTML 实体；微信虽不认它，但微博 fallback 时可能截取乱码正文
-
<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
微信分享的特殊处理方式
微信 X5 内核基本忽略所有 og:* 标签。它真正读的是：
- meta name="description"：作为分享描述（不是 og:description）
- 页面第一个 <img src="https://...">：作为封面图，要求 HTTPS、≥300×300 像素、无 loading="lazy"、无 display:none
- mp:wx:preview_image（仅限公众号文章页）：需在公众号后台配置，普通 H5 无效
所以静态页想稳控微信分享图，最可靠做法是：把想要的图作为页面首个 img 标签，src 用 HTTPS 绝对地址，并确保 CDN 响应头含 Access-Control-Allow-Origin: *。
立即学习“前端免费学习笔记（深入）”；
各平台关键差异与避坑点
不同平台对字段的识别逻辑完全不同，混用或漏写会导致降级：
-
Twitter 不读 og:description，必须单独写
<meta name="twitter:description" content="...">，且长度 ≤200 字符、无换行 - og:url 必须与用户实际分享的 URL 完全一致：协议、大小写、尾部斜杠、查询参数都不能多也不能少；带 utm 的链接不能当 og:url 值
- 微博 fallback 到 meta name="description"，若没写，它会直接截取页面前 200 字 HTML（可能含导航栏或 JS 注释）
- 所有 og:image 必须可被爬虫直连：不能有登录拦截、403/404、302 跳转、CORS 阻止，旧版微信还不支持 WebP
验证与缓存刷新必须手动做
改完 meta 后，绝不能靠“发一遍再看效果”来验证——平台缓存长达 24–72 小时：
- Facebook / LinkedIn：用官方工具（Sharing Debugger 或 Post Inspector）输入 URL，点 Scrape Again
- Twitter：用 Card Validator 提交链接检测
- 微信：没有公开调试器，可在 iOS 微信中长按链接 → “在 Safari 中打开” → 查看源码确认标签存在；或用 opengraph.xyz 检查 HTML 结构
- 上线前务必检查最终返回的 HTML 源码（右键 → 查看页面源代码），确认 meta 标签已由服务端渲染出来，而非 JS 动态插入
