必须服务端硬编码og:title、og:description、og:image、og:url四个标签，缺一不可；og:url须为https绝对路径且与分享链接完全一致，og:image需防防盗链并返回200状态码，js注入无效。
必须在服务端渲染的 中硬编码 og:title、og:description、og:image、og:url 四个标签，缺一不可；客户端 JS 注入、相对路径、带 query 的 og:url 或未处理防盗链的图片，都会导致卡片静默失效。
og:url 必须与用户实际分享的链接完全一致
平台（Facebook、LinkedIn、微信）会用你写的 og:url 去重新抓取页面。哪怕只差一个尾部斜杠、大小写字母、?utm_source=weibo，都可能抓到首页、404 或缓存旧快照。
-
og:url必须是 HTTPS 绝对路径，例如https://example.com/blog/123/，不能是/blog/123或//example.com/blog/123 - 动态页需服务端剥离所有非语义参数（UTM、A/B 测试 ID、session token），只保留 canonical 路径
- 测试时直接用 Facebook Sharing Debugger 输入真实分享链接，点
Scrape Again，别刷浏览器看效果 - 确保该 URL 返回 200 状态码，且响应 HTML 中的
og:url值与之完全相同（避免重定向循环）
og:image 不是贴个链接就行，而是要防防盗链 + 防 chunked 编码
图片加载失败不会报错，只会留白或 fallback 到首张 <img> —— 问题几乎全出在服务器响应层面，而非 HTML 写法。
-
og:image必须是 HTTPS 开头的绝对 URL，如https://example.com/assets/share.jpg；/img/cover.jpg、data:image/png;base64、file://全部无效 - 服务器响应必须返回
200 OK，禁用 302 跳转、403 防盗链拦截；微信 X5 内核不带 Referer，若启用了 Referer 白名单，必然 403 - QQ 分享要求响应头含
Content-Length，部分 Express 默认启用Transfer-Encoding: chunked，需手动设为identity - 推荐尺寸 ≥
1200×630像素，仅支持 JPG/PNG；WebP 在老版 Facebook 和 LinkedIn 上兼容差
服务端渲染是底线，JS 动态注入 meta 标签完全无效
微信、Facebook、Twitter、LinkedIn 等爬虫不执行 JS，只读初始 HTML 响应。React 的 useEffect、Vue 的 mounted、甚至 document.head.appendChild() 插入的 <meta property="og:xxx">，等于没写。
- Next.js v13.4+ 推荐用
generateMetadata函数返回对象，它会自动产出og:title等标签 - Nuxt 3 用
useHead({ meta: [] })，但必须确认ssr: true（默认开启，手动关了就白配） - 静态站点（Vite + Markdown）靠构建时插件（如
vite-plugin-html）注入，不是运行时 JS - 验证方式：右键 →「查看网页源代码」，确认标签真实存在于原始 HTML 中，而非仅在 DevTools Elements 面板里可见
微信和微博不认 og:*，得按各自规则另配
国内平台基本忽略 Open Graph，各自有私有优先级逻辑：微信优先读 <meta name="description"> 和页面第一个 <img>；微博倾向读 weibo:card 等私有 meta。
- 微信想精确控制分享文案？得额外加
<meta name="wxshare:title" content=""> - 微博建议补上
<meta property="weibo:card" content="image">，否则可能降级为纯链接卡片 -
og:site_name微信、微博、QQ 都不显示，写了也白写 - 调试前先用
curl -I https://yourdomain.com检查响应头有没有X-Frame-Options: DENY（可能阻断预览）
最易被忽略的其实是 og:url 的规范化粒度——协议、大小写、尾部斜杠、query 参数，任一差异都会让平台抓错页；其次是 og:image 的防盗链策略和响应头配置，它们不出现在 HTML 里，却决定卡片是否能出图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
