根本原因是og:image未被正确解析：必须为HTTPS绝对URL、尺寸≥1200×630像素、响应头含Access-Control-Allow-Origin: *、图片可公开访问且无403/404，同时需用Facebook Sharing Debugger强制刷新缓存。
为什么分享链接时预览图不显示或显示错误图片
根本原因通常是 og:image 没有被正确解析：路径不是绝对 URL、尺寸不符合平台要求、响应头未允许跨域加载，或者图片本身返回 404/重定向/非公开资源。Facebook 和 LinkedIn 会缓存 OG 数据，所以即使你改了 meta，旧缓存仍生效。
-
og:image的值必须是完整 URL（如https://example.com/img/share.jpg），相对路径或 protocol-relative 路径（//example.com/...）会被忽略 - 推荐尺寸至少 1200×630 px，宽高比 1.91:1；小于 200×200 px 的图会被直接拒收
- 图片需支持 CORS：服务器响应头中必须包含
Access-Control-Allow-Origin: *（尤其当图片放在 CDN 或不同域名下） - 用 Facebook Sharing Debugger（
https://developers.facebook.com/tools/debug/）强制刷新缓存，不要只靠清浏览器缓存
如何让 Twitter 和 Open Graph 共存且互不干扰
Twitter 使用自己的 twitter:card 系列 meta，和 Open Graph 并行存在，但参数语义有重叠（比如 twitter:image 和 og:image）。不冲突，但写错顺序或漏掉关键字段会导致某平台 fallback 到网页截图。
- 必须同时声明
og:title、og:description、og:url和og:type（推荐website或article），缺一不可 - Twitter 至少需要
twitter:card（值为summary_large_image才能显示大图）、twitter:title、twitter:description、twitter:image - 如果
og:url和当前页面 URL 不一致（比如带 utm 参数），Twitter 可能抓取该 URL 对应的页面内容，导致预览错乱 - 避免在
<head>中重复写name和property混用的 meta —— 同一含义字段只留一个，优先用property（Open Graph）+name（Twitter）并列
动态生成页面（如 React SSR 或 Next.js）怎么确保 OG 标签被爬虫读到
纯客户端渲染（CSR）页面的 meta 标签在初始 HTML 中为空，而多数社交爬虫不执行 JS，结果抓到的是空 title 或默认 fallback 图。服务端渲染（SSR）或静态生成（SSG）是硬性前提。
- Next.js 用户必须用
next/head或generateMetadata（App Router）注入 OG 标签，且确保数据在构建时或请求时已就绪 - React SSR（如 Remix、Express + ReactDOMServer）需在服务端拼装完整
<head>，不能依赖 useEffect 或 useState 初始化 meta - 检查最终返回的 HTML 源码（右键 → 查看页面源代码），确认
<meta property="og:title" content="...">真实存在，而非仅在 DevTools 的 Elements 面板里可见 - 部分平台（如 Slack）会跳过重定向，所以
og:url指向的地址必须能直出 HTML，不能是前端路由跳转后的路径
本地开发时无法预览 OG 效果的常见卡点
本地 http://localhost:3000 域名几乎被所有社交平台拒绝抓取 —— 它们只接受公网 HTTPS 地址，且证书有效。这不是配置问题，是平台策略限制。
立即学习“前端免费学习笔记（深入）”；
- 调试阶段可用
ngrok或localtunnel暴露本地服务为 HTTPS 公网地址（如https://abc123.ngrok.io），再用 Debugger 工具验证 - 不要用 Chrome 插件模拟分享预览，它们不复现真实爬虫行为（比如不发 OPTIONS 请求、不校验 CORS）
- 微信内分享走的是 JS-SDK 的
updateAppMessageShareData，和 OG 无关；但微信朋友圈会读 OG，前提是域名已备案且在 JS-SDK 白名单中 - 某些 CDN（如 Cloudflare）默认压缩 HTML 并移除空白，可能意外删掉换行或注释——虽然不影响功能，但会让调试时难以定位 meta 位置
og:title 字体大小，却没发现 og:image 的 CDN 返回了 403。 
