og:url必须与分享链接完全一致，协议、大小写、尾缀斜杠、utm参数、hash路由任一不同都会导致抓取错误；og:image需https绝对地址且返回200；所有og标签必须服务端渲染，客户端js注入无效。
og:url 必须和用户分享的链接完全一致
卡片不显示、跳转错页、缓存旧快照，八成是 og:url 和实际分享链接有细微差异。不是“差不多就行”，而是协议、大小写、尾部斜杠、UTM 参数、hash 路由，任何一项不同都会导致平台用你声明的 og:url 重新抓取，结果可能是首页、404 或过期内容。
-
og:url必须是 HTTPS 绝对路径，如https://example.com/blog/2026-og-guide/，不能是/blog/2026-og-guide/或//example.com/blog/2026-og-guide/ - 动态页面（如
/post/123?utm_source=weibo）需服务端过滤非语义参数，只保留规范化路径 - 微信、LinkedIn 等会以
og:url为基准发起新请求，若该 URL 返回 301/302，可能中断解析或缓存错误响应 - 验证方式：用
curl -s https://yoursite.com/path | grep og:url，确认输出值与你复制粘贴到微信/微博里的链接一字不差
og:image 不是贴个 URL 就完事
图片加载失败不会报错，只会静默 fallback 到首张 <img> 或留白。问题几乎全在服务器响应层，而非 HTML 写法本身。
-
og:image的 URL 必须是 HTTPS 绝对地址，且返回状态码为200 OK；302重定向、403防盗链、Transfer-Encoding: chunked全部失效 - 微信 X5 内核抓图时不带
Referer和Cookie，若图片服务器启用了 Referer 白名单，必然403 - QQ 分享要求响应头含
Content-Length，部分 Express 默认流式响应，需手动加res.setHeader('Transfer-Encoding', 'identity') - 推荐尺寸
1200×630像素，同时显式声明og:image:width和og:image:height，避免拉伸或裁剪异常
客户端 JS 注入的 OG 标签完全无效
Facebook、微信、LinkedIn、Discord 等平台爬虫不执行 JavaScript。你在 useEffect、mounted 或 document.head.appendChild() 里动态插入的 <meta property="og:title">，它们根本看不到。
- React/Vue SPA 必须走 SSR（如 Next.js 的
generateMetadata）或 SSG（如 Nuxt 3 的useSeoMeta+ssr: true） - 纯静态站点（Vite + Markdown）靠构建时插件（如
vite-plugin-html）注入，不是运行时 JS - 验证底线：用浏览器“查看网页源代码”（不是 Elements 面板），搜索
og:title，必须看到真实值，而不是空壳<div id="app"></div> - Nginx/Apache 反向代理配置中，要确认未因安全策略 strip 掉
property="og:*"这类属性
微信朋友圈不显示图？先补 twitter:image
微信内置浏览器（X5 内核）对 Open Graph 支持有限，常忽略 og:image，转而读 twitter:image 或页面第一个 <img>。这不是 bug，是事实兼容策略。
- 务必同步配置
<meta name="twitter:image" content="https://example.com/img/share.jpg"> -
twitter:image必须与og:image指向同一张图，且满足相同可访问性要求（HTTPS、200、无防盗链） - 微信 iOS 端已强制读取
og:image:alt，为空时提示“图片无说明”，建议始终补上描述性文本 - 别指望
og:video或og:audio在微信里生效——它当普通页面处理
og:url 是否精准、og:image 是否能被爬虫直连、以及标签是否真正在服务端 HTML 中——这三个点任一出错，其余字段再全也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
