<title>标签必须严格置于<head>内且唯一，放错位置等于无效；浏览器仅识别首个，动态修改须用document.title，构建工具可能覆盖手写内容，SEO需控制长度并转义特殊字符。
title 标签必须放在 <head> 里，放错位置等于没写
浏览器只认 <head> 区域内的第一个 <title>，其他位置写的全无效。常见错误是把 <title>首页</title> 直接塞进 <body> 开头，结果标签页显示“无标题”或直接显示文件名——这不是兼容性问题，是 HTML 解析器根本没把它当标题处理。
排查方法很简单：右键页面 → “查看页面源代码”，搜索 <title>，确认它是否严格位于 <head> 和 </head> 之间。如果找不到，或者在 <body> 里看到它，就得剪切粘贴过去。
- 服务端模板（如 EJS、Django）容易把
<head>拆成多个片段，<title>被漏写或插到<body>开头 - HTML 文件没写
<head>，直接从<body>开始，<title>会被忽略或静默修复（Chrome 可能“帮忙”挪进去，但爬虫不买账）
动态改标题只能用 document.title，别碰 DOM
想在单页应用（SPA）里随路由切换更新标题？别写 document.querySelector('title').textContent = '新标题' —— 这行代码能改 DOM 节点，但浏览器标签页文字完全不变。唯一可靠方式就是直接赋值 document.title。
注意几个边界情况：
立即学习“前端免费学习笔记（深入）”；
- IE6–8 下，
document.title设中文可能乱码，需确保页面声明<meta charset="utf-8">且前后一致 - 修改后不会触发任何事件，也不会影响
history.state，别指望靠它监听变化 - 微信/QQ 内置浏览器支持良好，但分享卡片取的仍是初始 HTML 中的
<title>，JS 后改的仅影响用户当前看到的标签页
构建工具可能悄悄覆盖你写的 <title>
Vite、Webpack 的 HTML 插件（如 html-webpack-plugin）常通过配置项注入 title，比如 title: '我的网站'。这时你手写的 <title>首页</title> 在源码里看着正常，实际构建产物中已被插件生成的内容覆盖——查源码没用，得看最终输出的 index.html 文件。
验证方法：打开打包后的 dist/index.html（或 Vite 的 out/ 目录），直接搜索 <title>，确认内容是否符合预期。如果被覆盖，要么关掉插件的 title 配置，要么改用插件提供的模板变量（如 ）来统一控制。
特殊字符和长度要小心，否则标题显示异常甚至破坏页面
未转义的 & 会变成 &，否则可能被当成实体开头；< 不转义会破坏 HTML 结构，轻则标题显示异常，重则整个页面渲染失败。
安全写法要点：
- 控制在 50 字符以内（含空格），优先保证前 12 字准确表达页面主题
- 中文无需编码，但
&必须写成&，<写成，<code>>写成> - 避免 emoji 和生僻 Unicode 字符，部分旧爬虫或浏览器无法正确索引或显示
最易被忽略的是构建时的覆盖行为和分享场景下 JS 动态改标题的失效——这两处不检查，上线后 SEO 和社交传播就直接掉链子。
