OG标签不生效的主因是未置于<head>内或存在拼写错误；必须用标准闭合形式、绝对路径og:image、强制刷新平台缓存、服务端渲染保障爬虫可见性。
OG标签不生效？先确认是否在里且无拼写错误
绝大多数“分享出来没图没描述”的问题，根源是 <meta> 标签没被正确解析：要么放在了 <body> 里，要么属性名写错（比如把 property 写成 name），或者用了自闭合写法（<meta property="og:title" content="..." />）——部分旧版微信/QQ内置浏览器会忽略这种写法。
必须用标准闭合形式：
<meta property="og:title" content="页面标题">，且全部
<meta property="og:xxx"> 标签都得放在 <head> 中、<title> 之后。
-
og:title、og:description、og:image是三个最基础且强依赖的字段，缺一不可 -
og:image的 URL 必须是绝对路径（https://example.com/img.jpg），相对路径或带 query 参数的 URL（如/img.jpg?v=1）在多数平台会被拒绝抓取 - 微信内分享还额外要求
og:url与当前页面 URL 完全一致（含协议、大小写、尾部斜杠），否则预览图可能失效
为什么调试时看到的是旧图片或缓存内容？
社交平台（尤其是微信、Facebook、LinkedIn）会对 OG 信息做强缓存，首次抓取后不会自动刷新。改完标签后直接分享，大概率还是旧数据。
- 微信用 微信开发者工具「网页调试」 强制刷新缓存，填入 URL 后点“检测”，它会重新 fetch 并显示实际解析出的
og:image、og:title等值 - Facebook 用 Sharing Debugger，输入 URL 后点 “Scrape Again”
- LinkedIn 用 Post Inspector，同样支持强制重抓
- 不要依赖“清浏览器缓存”或“换设备测试”——平台侧缓存和你本地无关
og:image 有哪些硬性限制？
不是随便一张图塞进去就能显示。各平台对尺寸、格式、大小、可访问性都有明确要求，违反任意一条都会降级为默认图甚至空白。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 推荐尺寸：1200×630 像素（Facebook 官方建议），最小不得小于 600×315；微信要求宽高比在 2:1 到 3:1 之间，且高度不低于 300px
- 格式仅支持 JPG/PNG（GIF 不支持动图，WebP 在部分老客户端会失败）
- 文件大小不能超过 5MB（微信实际建议控制在 1MB 内，否则加载超时被丢弃）
- 服务器必须允许跨域：响应头需包含
Access-Control-Allow-Origin: *，否则微信/QQ 无法加载该图 - 避免 CDN 缓存导致更新延迟——改图后记得主动刷新 CDN 对应资源的缓存
动态页面怎么生成正确的 OG 标签？
纯静态 HTML 没问题，但 React/Vue/SSR 应用容易踩坑：客户端渲染（CSR）的 <meta> 标签，爬虫根本看不到。微信、QQ、微博等分享入口基本靠服务端首次响应解析 HTML，JS 后续操作无效。
- Next.js 用
getServerSideProps+Head组件；Nuxt 用head()方法返回对象；传统 PHP/Node.js 后端则需在模板中根据路由参数拼出对应og:title和og:image - 不要在
useEffect或mounted钩子里用 JS 动态插入<meta>——此时 HTML 已发出，爬虫早已离开 - 如果必须 CSR，可考虑用代理页（如
/share?id=123）做服务端跳转或 SSR 渲染，确保原始分享链接返回的是带完整 OG 标签的 HTML
真正卡住人的从来不是写几个 <meta>，而是平台缓存策略、CDN 权限配置、服务端渲染时机这三块——调一次不生效，大概率不是标签写错了，而是其中某一层没对齐。
