usemeta 失效主因是客户端接管后默认不强制刷新 dom，需在 setup/onmounted 调用并设 debounce: 0；csr 无法解决 seo，须用 ssr 或静态生成；微前端需显式传 helmetcontext；next.js 中 generatemetadata 必须 async 且参数命名严格匹配。
Vue Router 里用 useMeta 更新 <title></title> 和 <meta> 失效？
多数人以为装了 @vueuse/core 就能直接用 useMeta，结果发现路由跳转后 <title></title> 没变、og:title 仍旧是首页的。根本原因是：SSR 渲染后客户端接管时，useMeta 默认不强制刷新 DOM 标签，尤其在非服务端渲染的纯前端 SPA 中容易被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保在
setup()或onMounted中调用，不要只写在onBeforeRouteUpdate里——后者不触发首次加载 - 显式传入
debounce: 0避免防抖导致延迟更新：useMeta({ title: '用户页' }, { debounce: 0 }) - 若用 Vue 2 + vue-router 3，必须搭配
vue-meta而非@vueuse/core，后者仅支持 Vue 3 - 检查是否启用了
history.scrollRestoration = 'manual'，某些滚动策略会干扰 head 更新时机
React Router v6.4+ 用 useEffect 改 document.title 但 SEO 抓取仍是旧标题
搜索引擎爬虫（尤其是 Googlebot）通常不执行 JS，只读取初始 HTML 的 <title></title> 和 <meta name="description">。你在 useEffect 里改的标题对爬虫完全不可见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 静态页面用
createRoot前先同步写死初始document.title，比如从路由参数或预置配置中取值 - 动态内容必须走 SSR（如 Next.js）或静态生成（如 Remix 的
loader+meta导出），否则无法解决 SEO 问题 - 别依赖
document.querySelector('title').textContent = ...，它绕过 React 渲染周期，可能被 hydration 覆盖 - 若强行用 CSR 方案，至少加
<meta name="robots" content="noindex">避免低质页面被收录
react-helmet-async 在微前端子应用里 <title></title> 不生效
微前端场景下，主应用通常已接管 document.head，子应用的 Helmet 实例可能被隔离或未挂载到真实 DOM，导致 <title></title> 和 <meta> 写入失败，控制台也无报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 子应用初始化时显式传入
helmetContext，并在主应用中统一收集和合并：<helmet helmetcontext="{helmetContext}"></helmet> - 避免在子应用中使用
Helmet.renderStatic()，它只返回字符串，不操作真实 DOM - 确认子应用的
mount方法是否在document.head可写状态下执行（例如避开DOMContentLoaded之前） - 调试时直接运行
console.log(document.title)和document.querySelectorAll('meta[name="description"]')，看是否真没写入
Next.js App Router 动态路由下 generateMetadata 读不到 params？
常见错误是把 generateMetadata 写成普通函数，没加 async，或在参数解构时漏掉 params，导致 params.id 是 undefined，最终生成空标题或 fallback 内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 函数必须是
async，且签名严格为：export async function generateMetadata({ params }: { params: { id: string } }) - 路径
app/blog/[id]/page.tsx对应的params是{ id: '123' }，不是{ slug: '123' }，命名必须一致 - 若需异步获取数据（如 fetch 文章标题），应在
generateMetadata内部await，不要提前在组件里取 - 开发时清缓存：
next dev -r，否则旧metadata可能被内存缓存住
