直接赋值document.title是修改网页标题的唯一可靠方式，兼容所有现代浏览器；禁用innerHTML或textContent更新title标签，避免兼容性问题与SEO失效。
title属性直接赋值就能改，但别用innerHTML
HTML的<title>标签内容不能用innerHTML或textContent安全更新——某些浏览器（尤其是旧版Safari和部分Android WebView）会忽略这种写法，页面标题根本不变化。正确方式是直接给document.title赋字符串值，这是DOM规范定义的标准接口，兼容性好、无副作用。
常见错误写法：document.querySelector('title').innerHTML = '新标题'
这在Chrome里可能“碰巧”生效，但不是可靠行为，也不符合规范。
单页应用路由切换时title更新要防抖
React/Vue等框架中，频繁触发history.pushState或router.beforeEach时，如果每次导航都立刻执行document.title = xxx，可能遇到竞态问题：后触发的路由钩子覆盖了前一个标题，用户看到的是错误标题。尤其在异步获取页面元数据（如文章标题）时更明显。
- 推荐加一层简单防抖：用
setTimeout清除上一次未执行的赋值 - 或者更稳妥地，在路由守卫中确保只在当前路由真正激活后才更新
document.title - 避免在
useEffect或mounted里不加条件地反复设置，除非你明确需要轮播标题
SEO友好型更新要配合meta description同步
仅改document.title对搜索引擎爬虫无效——它们不执行JavaScript，只读取初始HTML中的<title>和<meta name="description">。如果你做的是SSR或静态生成站点，动态更新title只是用户体验优化；如果是纯客户端渲染（CSR），那搜索引擎看到的永远是入口页的原始title。
实操建议：
- 静态站点：用构建时模板（如Vuepress/Jekyll）注入真实title
- CSR项目：至少同步更新<meta name="description">的content属性，保持语义一致
- 不要依赖document.title作为SEO唯一来源
特殊字符和编码问题容易被忽略
中文、emoji或带空格的标题直接赋值给document.title一般没问题，但若标题来自用户输入或API返回，需注意：
- 某些后端API可能返回HTML实体（如 、），直接赋值会导致页面显示乱码<br>
- 浏览器不会自动解码这些实体，得手动处理，例如：<code>document.title = title.replace(/&/g, '&').replace(/</g, '')
- 更安全的做法是用临时div元素解析：const el = document.createElement('div'); el.innerHTML = rawTitle; document.title = el.textContent
这个细节常被跳过，结果线上出现“欢迎来到首页 | MyApp”这类标题。
立即学习“Java免费学习笔记（深入）”；
