Open Graph卡片不显示主因是og:url、og:title、og:description、og:image四标签未写全或值不可用；og:url须与分享链接完全一致，og:image需HTTPS绝对URL、CORS放行、尺寸合规、格式支持；微信微博等国内平台不认og:image，需另配meta；调试必须用官方工具重抓缓存。
Open Graph 卡片不显示，90% 是因为 og:url、og:title、og:description、og:image 这四个标签没写全，或其中某个值不可用——不是“加了就行”，而是必须同时满足结构、协议、路径、可访问性四重约束。
og:url 必须与分享链接完全一致，否则平台当它是另一个页面
社交平台（Facebook、LinkedIn、微博等）把 og:url 当作卡片的唯一标识。如果用户分享的是 https://example.com/blog/123?utm_source=wechat，但你的 og:url 写的是 https://example.com/blog/123/（尾部斜杠差异）或 http://example.com/...（协议不一致），平台就会缓存两套元数据，导致预览错乱甚至空白。
- 动态页面务必服务端输出 canonical 地址：去掉 utm 参数、hash、session_id 等非必要 query
- 静态站建议统一结尾带斜杠，避免
/post和/post/被识别为不同页面 - 不要用 JS 拼接：
og:url必须在 HTML 初始响应中硬编码或 SSR 渲染，不能靠document.location.href动态塞
og:image 不是贴个链接就完事，4 个硬性条件缺一不可
og:image 是卡片失效最频繁的环节。平台不会报错，只会静默 fallback 到首张图或留白——你根本看不到提示。
- 必须是 HTTPS 绝对 URL：
https://example.com/img/card.jpg，不能是/img/card.jpg或//example.com/img.jpg - 服务器需放行跨域请求：响应头必须含
Access-Control-Allow-Origin: *，否则 Facebook 爬虫会因 CORS 拒绝加载 - 尺寸 ≥ 1200×630 px，宽高比严格控制在 1.91:1 到 1:1；Twitter 接受 2:1，但 Facebook 会裁切边缘
- 格式仅支持 JPG、PNG、GIF（静态），文件大小 ≤ 5MB；WebP、AVIF、SVG 全部不认
微信和微博根本不读 og:image，得按各自规则另配
国内平台基本无视 Open Graph 标准，尤其是图片字段。微信甚至优先抓页面第一个 <img>，除非你明确告诉它用哪张。
立即学习“前端免费学习笔记（深入）”；
- 微信朋友圈/聊天分享：
og:image完全无效；iOS 微信会读<meta itemprop="image" content="...">，Android 则倾向取首张可见<img> - 微博：
og:image不生效；它只认<meta name="weibo:card" content="summary_large_image">+<meta name="weibo:image" content="..."> - Twitter 强制要求
<meta name="twitter:card" content="summary_large_image">，否则只显示纯文本卡片
调试必须用官方工具强制重抓，刷新页面毫无意义
所有主流平台都会缓存 OG 数据，Facebook 最长可达 24 小时，微信更无明确 TTL。改完 HTML 后直接发链接测试，99% 都是旧缓存。
- Facebook：用 Sharing Debugger 输入 URL → 点
Scrape Again；注意看Response Code是否为 200，Redirect Path是否有跳转 - LinkedIn：用 Post Inspector，它会标出缺失字段和 HTTP 错误码（如 403 表示防盗链拦截）
- 微信：没有官方调试器；最可靠方式是 iOS 微信中长按链接 → “在 Safari 中打开” → 查看源码确认 meta 存在，再配合第三方检测页如
opengraph.xyz
最容易被忽略的点是：所有 og:* 标签必须在 HTML 初始响应中静态存在，不能由 JS 注入；且 <meta charset="UTF-8"> 必须是 <head> 内第一个标签——否则中文字符解析错位，标题和描述直接变乱码。
