社交平台预览失败的根本原因是爬虫仅解析服务端返回的原始HTML中的标签，不执行JS；CSR项目若未做SSR/SSG/预渲染，OG标签由JS注入，则爬虫不可见，导致无图、标题错、描述空等问题。
直接加 <meta property="og:xxx"> 标签就行，但只加对不等于能被正确抓取——社交平台爬虫不执行 JS、缓存顽固、图片路径不绝对、响应头不对，都会导致预览空白或错乱。
为什么分享链接后预览没图/标题错/描述为空
根本原因是社交平台（Facebook、LinkedIn、微信、Discord 等）的爬虫只解析 HTML 原始响应体里的 <meta property="og:xxx"> 标签，且不运行 JS。如果你用 React/Vue 等 CSR 框架，服务端返回的是空壳 HTML，所有 OG 标签靠 JS 注入，那爬虫根本看不到。
- 检查方式：用
curl -s https://yoursite.com/post/123 | grep 'og:title'，必须看到真实标签内容，而不是<div id="app"></div> - 纯前端项目必须做服务端渲染（SSR）、静态生成（SSG）或预渲染（prerender-spa-plugin）
- Vercel/Cloudflare Workers 可用边缘函数动态注入 OG 标签，但需确保
Content-Type: text/html且状态码是 200 - 微信内置浏览器对
og:image要求更严：必须 HTTPS、尺寸 ≥ 300×300、不能是 WebP（旧版兼容性差）
og:image 加了还是显示默认图或报错
og:image 是最常出问题的字段，不是贴个 URL 就完事。平台会主动请求该图片并校验响应头、尺寸、格式和可访问性。
- 图片 URL 必须是**绝对路径**（
https://example.com/img/share.jpg），相对路径或//协议相对地址会被忽略 - 必须返回
Content-Type: image/jpeg或image/png；WebP 在部分平台（如 LinkedIn 旧版、微信 iOS）可能 fallback 失败 - 推荐尺寸 1200×630 像素（宽高比 1.91:1），同时加
<meta property="og:image:width" content="1200">和<meta property="og:image:height" content="630">，避免拉伸或裁剪异常 - 图片服务器不能返回 403/404/重定向；Nginx/Apache 需确认未屏蔽爬虫 UA（如
facebookexternalhit/1.1）
不同页面类型要区分 og:type 和动态值
og:type 不只是填个字符串，它影响平台如何解析后续字段。首页、列表页、详情页必须用不同 type，并把关键字段（尤其是 og:title、og:description、og:image）按当前页面上下文动态生成。
- 首页/分类页用
website；文章/新闻/产品详情页必须用article（否则 Facebook 可能不显示发布时间） - 动态字段不能硬编码：
og:url必须是当前页面真实 URL（含 query 参数），不是模板占位符；og:title应拼接栏目名 + 当前标题，避免重复 - 多语言站点加
<meta property="og:locale" content="zh_CN">和<meta property="og:locale:alternate" content="en_US"> - 时间类字段如
og:updated_time必须是 ISO 8601 格式（2026-04-19T15:26:00+08:00），不能是时间戳或中文格式
调试时别信浏览器 F12 查看的 DOM
浏览器开发者工具里看到的 <meta property="og:xxx"> 是 JS 渲染后的结果，而 Facebook Debugger、LinkedIn Post Inspector 等工具抓取的是服务端直出的原始 HTML。两者经常不一致。
- 用 Facebook Sharing Debugger（
https://developers.facebook.com/tools/debug/）强制刷新缓存，它会显示“Scraped URL”下的原始响应和解析日志 - 首次分享后，平台会缓存 OG 数据长达 24–72 小时；改完标签必须点 “Scrape Again”，不能等自动更新
- 微信不提供公开调试工具，可用企业微信或测试号发链接到对话，长按链接 → “查看网页” → 截图预览效果
- Discord 对
og:description字数敏感：超过 200 字可能截断，建议控制在 155 字以内
真正卡住人的从来不是标签怎么写，而是服务端是否吐出了带值的 HTML、图片能否被外网直连、以及平台缓存是否被绕过——这三个环节漏一个，预览就白配。
