og标签需服务端渲染且og:url必须与分享链接完全一致，og:image须https直连、防防盗链及chunked编码，客户端js注入无效，微信需额外配置twitter:image。
OG 标签写在 index.html 里，不等于社交平台能读到——关键看是否服务端渲染、og:url 是否与分享链接完全一致、og:image 是否可被爬虫直连访问。
og:url 必须和用户实际分享的 URL 完全一致
这是卡片失效最隐蔽也最致命的原因。哪怕只差一个尾部斜杠、一个大小写字母、或多了 ?utm_source=weibo，平台就会用你声明的 og:url 去重新抓取，结果可能抓到首页、404 或缓存旧版本。
-
og:url必须是 HTTPS 绝对路径，如https://example.com/blog/，不能是/blog/或//example.com/blog/ - 动态页面（比如带查询参数）需服务端剥离 UTM 等非语义参数，输出 canonical 地址
- 测试时别刷浏览器看效果，直接用 Facebook Sharing Debugger 或 LinkedIn Post Inspector 输入真实分享链接，点
Scrape Again
og:image 不是“放上去就行”，而是要防防盗链+防 chunked 编码
图片加载失败不会报错，只会静默 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') - CDN 或反向代理需显式放行来自
facebook.com、twitter.com、qzone.qq.com的 HEAD/GET 请求
客户端 JS 动态注入 og 标签完全无效
React/Vue/Next.js/Nuxt 等框架如果只在 useEffect 或 mounted 里用 document.head.appendChild() 插入 <meta property="og:xxx">，对所有主流社交爬虫都无效——它们不执行 JS。
- SPA 页面必须走服务端渲染（SSR）或静态预渲染（SSG），让真实
<meta>出现在初始 HTML 中 - Next.js v13.4+ 推荐用
generateMetadata函数返回对象，它会自动产出og:title、og:description等 - Nuxt 3 用
useHead({ meta: [...] })，但必须确认ssr: true（默认开启，但若手动关了就白配） - 纯静态站点（Vite + Markdown）靠构建时插件（如
vite-plugin-html）注入，不是运行时 JS
微信朋友圈分享不认 og:image？那是没配 twitter:image
微信内置浏览器（X5 内核）对 Open Graph 支持有限，常忽略 og:image，转而读 twitter:image 或页面第一个 <img>。这不是 bug，是事实。
- 务必同步补充
<meta name="twitter:image" content="https://...">，尺寸建议同og:image（1200×630） - Twitter 本身优先读
twitter:description，不读og:description；没写才 fallback - 微信公众号文章页可用
mp:wx:preview_image，但普通网页无效 - 若需精确控制微信分享行为，必须引入微信 JS-SDK 并调用
updateAppMessageShareData，但前提是已绑定安全域名且通过校验
真正难的从来不是写几个 <meta> 标签，而是让这张图在 Facebook 抓取时返回 200、在微信 X5 里绕过 Referer 检查、在 QQ 分享时避开 chunked 编码、同时让 Next.js 的 generateMetadata 在每个路由上输出不同内容——这些环节只要断一环，卡片就降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
