document.title赋值无效主因是框架劫持、seo不生效因爬虫不执行js、ios safari后台冻结导致标题回退、多语言乱码源于utf-8声明缺失；需按场景针对性处理。
document.title 赋值后页面标题没变？检查是否被框架劫持
很多单页应用（SPA）里改 document.title 无效，不是代码写错了，而是路由库（比如 Vue Router、React Router）或 PWA 的 service worker 主动接管了 title 更新逻辑。直接赋值会被后续路由钩子覆盖。
实操建议：
- Vue 项目优先在
beforeRouteUpdate或useRoute+watch中更新document.title - React Router v6 推荐用
useEffect监听location.pathname，再设document.title - 若用了 Workbox，在
registerRoute后手动触发一次document.title = ...可能仍被缓存页覆盖，需在navigationPreload回调中重设
document.title 改变后 SEO 不生效？别指望它影响搜索引擎抓取
document.title 是运行时行为，爬虫（尤其是传统 crawler）通常不执行 JS，也就看不到你动态改的标题。Googlebot 虽支持部分 JS 渲染，但延迟高、覆盖率不稳定。
实操建议：
- 服务端渲染（SSR）或静态生成（SSG）时，确保 HTML 原始
<title></title>标签已含正确内容 - 若必须 CSR，配合
<meta name="og:title">和<meta name="twitter:title">动态同步，至少保障社交分享时显示正确 - 不要依赖
document.title做关键词堆砌——搜索引擎不认这个，还可能被判定为作弊
移动端 iOS Safari 切换标签页后 title 恢复默认？这是浏览器缓存机制
iOS Safari 为节省资源，会在后台标签页冻结 JS 执行，并还原 document.title 到初始值（即 HTML 里写的原始 <title></title>）。用户切回来时，页面可能还没完全恢复，title 看起来“回退”了。
实操建议：
- 监听
visibilitychange事件，在document.visibilityState === 'visible'时重新设置document.title - 避免在
visibilitychange里频繁操作，加个防抖（比如setTimeout延迟 100ms）防止重复触发 - 注意：iOS 15+ 对此行为有所优化，但低版本仍普遍，不能省略兼容处理
多语言站点切换时 document.title 编码乱码？UTF-8 声明必须到位
中文、日文等字符在 document.title 中显示为方块或问号，大概率是 HTML 文件本身未声明 UTF-8，或服务器返回的 Content-Type 缺少 ; charset=utf-8。
实操建议：
- 确认 HTML 头部有
<meta charset="UTF-8">，且放在最前面 - 检查响应头：
curl -I your-page.com看是否含Content-Type: text/html; charset=utf-8 - Node.js / Express 项目记得设
res.set('Content-Type', 'text/html; charset=utf-8') - 如果用模板引擎（如 EJS、Pug），确保变量插值前未被二次编码（例如
你这种实体要解码）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
