微信不读og:image，twitter不认og:description，facebook严格比对og:url；各平台解析逻辑不同，需分别配置对应标签及响应头。
微信不读 og:image，Twitter 不认 og:description，Facebook 严格比对 og:url 和分享链接是否一字不差——这不是配置遗漏，而是平台解析逻辑根本不同。硬套一套 og:* 标签就想通吃所有渠道，90% 的预览异常都出在这里。
微信为什么死活不显示你配的 og:image
微信压根不解析 og:image，它有自己的抓取优先级：先找页面第一个可见的 <img src="">，再 fallback 到 twitter:image，最后才用 meta name="description" 截图生成文字图。
- 确保首张
<img>是你想展示的分享图，src必须是 HTTPS 绝对路径，不能有loading="lazy"、display: none或visibility: hidden - 加一行
<meta name="twitter:image" content="https://example.com/share.jpg">，这是微信安卓/iOS 都会读的兜底项 - 检查图片响应头：
Content-Length必须存在，不能是Transfer-Encoding: chunked（尤其 Node.js/Express 默认流式响应需手动关闭） - 公众号文章页可用
<meta property="mp:wx:preview_image" content="">，但普通网页无效
Twitter 卡片没图？大概率漏了 twitter:card 或尺寸不对
Twitter 完全忽略 og:* 字段，只按自己那套规则走。漏掉任意一个 twitter:* 标签，卡片就降级为纯文本链接。
- 必须写
<meta name="twitter:card" content="summary_large_image">，值只能是summary或summary_large_image（大小写敏感，拼错就失效） -
twitter:image必须和twitter:card同时存在，推荐尺寸 1200×630，宽高比允许 1:1～2:1，但 Facebook 对 1:1 裁切严重 -
twitter:title和twitter:description要显式写，不能指望平台从og:*自动映射；长度建议 ≤ 200 字符，不支持换行 - 验证必须用 Twitter Card Validator，输入 URL 后点 “Preview”，看 “Card Type” 是否识别成功
og:url 写错导致同一内容出现多套预览卡片
og:url 不是“看起来像链接”，它是卡片的唯一 ID。协议、尾部斜杠、大小写、查询参数哪怕差一个字符，平台就当成全新页面缓存一套元数据。
- 动态页面（如 Next.js、Nuxt）必须从路由或数据源提取 canonical URL，而不是拼
window.location.href - 统一结尾带斜杠：
https://example.com/blog/123/比https://example.com/blog/123更稳定 - 强制剥离非语义参数：去掉
?ref=、&utm_source=、#section，连 hash 都不能留 - 配合
<link rel="canonical" href="">使用，两者值必须完全一致，否则 LinkedIn 等平台会困惑
服务端不渲染 OG 标签，等于没写
Facebook、LinkedIn、Twitter、微信 X5 内核等主流爬虫都不执行 JavaScript。你在 useEffect 里往 document.head 塞标签，它们根本看不到。
- 所有
og:*、twitter:*标签必须在 HTML 初始响应中静态存在，由 SSR 或 SSG 输出 - 检查响应状态码必须是 200，不是
200 OK (from disk cache)这类伪 200 - 调试时点 “Scrape Again” 没更新？大概率是服务器返回了 304、302 或
Cache-Control: no-cache干扰了重抓 - CDN 或反向代理需放行来自
facebook.com、twitter.com等域名的请求，否则图片返回 403，平台静默 fallback
最常被忽略的其实是响应头和防盗链策略——图片能打开不等于爬虫能加载，HTTPS 页面里混用 HTTP 图片链接、CDN 未放行跨域、Nginx 限制 Referer，都会让卡片在某个平台彻底消失，且没有任何报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
