加了og:title和og:description却没效果，八成是og:url不一致或og:image返回404；og:url必须与分享链接完全一致且为绝对路径，og:image需https可访问、200响应、≥1200×630px；服务端渲染是底线，js注入无效；微信微博不认og:*，需按各自规则另配；修改后须用官方调试工具强制重抓。
加了 og:title 和 og:description 却没效果，八成是 og:url 不一致或 og:image 返回了 404 —— 社交平台不会报错，只会静默 fallback 到页面第一个 <img> 或截取正文前段。
og:url 必须和用户实际分享的链接完全一致
平台（如 Facebook、LinkedIn、微信）会用你声明的 og:url 去重新抓取页面。哪怕只差一个斜杠、大小写、协议（http vs https）或 UTM 参数，都可能抓错页、返回 404 或缓存旧卡片。
- 动态路由（如
/blog/123?utm_source=weibo）必须服务端剥离查询参数，输出干净的 canonical URL，例如https://example.com/blog/123/ - 绝对路径是硬性要求：
og:url不能是/article/123或//example.com/article/123，必须带协议和完整域名 - 测试时直接用 Facebook Sharing Debugger 输入用户真实分享的链接，别只看本地 HTML 源码
og:image 不是贴个链接就行，关键在可访问性
图片挂掉是卡片失效的第一原因。平台不提示错误，只留白或 fallback 到 logo。
-
og:image必须是 HTTPS 开头的绝对 URL；/images/share.jpg、data:image/png;base64,...、file://全部无效 - 服务器响应必须为 HTTP 200，禁止 302 跳转、403 防盗链拦截；QQ 分享还要求响应头含
Content-Length，不能是Transfer-Encoding: chunked - 推荐尺寸 ≥ 1200×630 px（宽高比 1.91:1），小于 300×300 的图会被微信等平台忽略
- 仅支持 JPG、PNG；WebP 在 Facebook 和老版 LinkedIn 上兼容差，GIF 只认静态帧
服务端渲染是底线，JS 注入 meta 标签完全无效
微信、Facebook、Twitter 等爬虫不执行 JS，只读初始 HTML 响应。React/Vue 的 useEffect 或 mounted 里动态插入 <meta property="og:...">，等于没写。
- Next.js 应用
generateMetadata或 SSR；Nuxt 3 用useHead({ meta: [] })并确保ssr: true - 静态站点（如 Hugo、Jekyll）直接在模板中写死；PHP/Node.js 后端需从数据源注入，而非读
window.location.href - 验证方式：右键 →「查看网页源代码」（不是开发者工具 Elements 面板），确认标签真实存在于原始 HTML 中
微信和微博不认 og:*，得按它们的规则另配
国内平台基本忽略 Open Graph，各自有私有优先级逻辑：
- 微信：优先读
<meta name="description">和页面第一个<img>；若要精确控制，需引入微信 JS-SDK 并调用updateAppMessageShareData（前提是已绑定安全域名） - 微博：不解析
og:image，但认<meta name="weibo:card" content="summary_large_image">和<meta name="description"> - Discord/Slack/Facebook：只认
og:*，且必须全部在内，顺序无关，但重复声明（如两个og:title）会导致只取第一个
最易被忽略的是缓存——平台会缓存 OG 数据长达 24–72 小时。改完 HTML 后，必须用官方调试工具强制重抓，而不是等用户刷新或发新链接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
