为什么需要 react-helmet

SPA 路由切换时 <head> 不会自动更新。手动改 document.title 很快不够用。

react-helmet 让你在组件里 声明式 描述 head，路由变了由库合并更新 DOM：

包	说明
`react-helmet`	React 16/17 老项目
`react-helmet-async`	React 18+ 推荐，Concurrent 安全，SSR 无泄漏

三步接入

静态页：

动态页（等数据就绪再渲染）：

关键： loading 态别设 title 为「加载中……」，爬虫可能缓存错误 head。

canonical、og:url 统一走 absoluteUrl，避免测试域被收录。

话题	说明
同名 meta	子级 Helmet 覆盖父级，推荐 Seo 组件一处定义
`html lang`	根组件设一次：`<Helmet htmlAttributes={{ lang: 'zh-CN' }} />`
Next.js	优先 `metadata` API，不必叠 helmet
自定义 SSR	服务端从 `HelmetProvider context` 取出 helmet 插入 HTML

多语言站点用 Helmet 输出：

误区： SSR 只解决「谁能读到 head」，meta 内容仍要你自己写对。

History 模式刷新子路由需 fallback，否则 404：

微信、Facebook 会缓存 OG。改图后需用平台调试工具刷新；上线前 OG 域名切到生产。

路由切换后 focus 到主内容，改善体验信号。

控制台：

在线工具：

完整 Checklist（上下篇合并）：