<title>必须唯一且严格置于<head>内，否则浏览器标签页显示异常、SEO失效、微信分享抓取错误；写在<body>或重复出现时仅首个多数被识别，JS动态插入无效，document.title是唯一可靠修改方式。
网页标题文字必须用 <title> 标签写在 <head> 里，且只能有一个；放错位置、重复写、或靠 JS 插入新标签，都会导致浏览器标签页显示异常、SEO 失效、微信分享抓取错误。
为什么 <title> 必须放在 <head> 里
HTML 解析器只在 <head> 区域内识别 <title> 并提取为页面标题。写在 <body> 开头？Chrome 可能“帮忙”挪进去，但 Safari WebView、旧版 IE 会直接忽略——标签页显示“无标题”或文件名，爬虫压根不认。
常见错误包括：
-
<title>首页</title>被模板系统（如 EJS 的<% include('head.ejs') %>）意外插到<body>开头 - 手写 HTML 漏了
<head>，直接从<body>开始，<title>被当成普通文本渲染 - 构建工具（如 Vite）启用了
html-webpack-plugin或vite-plugin-html的title配置，覆盖了你写的静态<title>，但你还在源码里改——查源码没用，得看最终生成的dist/index.html
document.title 是唯一可靠的动态修改方式
单页应用（SPA）路由切换时，别写 document.querySelector('title').textContent = '新标题'——DOM 节点能改，但浏览器标签页文字完全不变。
正确做法只有这一种：
- 直接赋值：
document.title = '用户中心 - 我的网站' - 不要试图用
innerHTML、appendChild或创建新<title>标签插入 DOM - IE6–8 下设中文需确保
<meta charset="utf-8">已声明，否则乱码 - 注意：修改后不会触发任何事件，也不影响
history.state，别指望监听变化
微信/QQ 内置浏览器显示的是初始 HTML 中的 <title>，JS 后改的只影响当前标签页。
字符长度、转义与 SEO 实际限制
搜索引擎通常只展示前 50–60 字符，移动端标签栏更窄——12 个汉字就可能被截断。更关键的是特殊字符处理：
-
&必须写成&，否则被当成实体开头，导致标题截断甚至 HTML 解析失败 和 <code>>必须写成<和>，否则破坏 HTML 结构- 中文无需编码，但 emoji 和生僻 Unicode 字符部分旧爬虫无法索引，建议避免
- 分隔符统一用
-、|或_，别混用；空格不如短横线利于 SEO
最常被忽略的一点：服务端吐出的 HTML 中 <title> 必须含真实内容。如果依赖客户端 JS 补全，首屏就是空标题——SEO 和微信分享卡片都抓错。
多个 <title> 标签会发生什么
HTML5 明确规定只能有一个 <title>。写了多个？浏览器只取第一个，其余静默丢弃，连控制台警告都没有。
典型场景：
- Django/EJS 模板中父模板和子模板都写了
<title>，{% block title %}没覆盖好 - SPA 应用里用 JS 动态插入新
<title>，却忘了移除旧的 - 复制粘贴带隐藏 BOM 或注释，导致解析器误判结构
记住：标题不是纯展示字段，它参与页面唯一性判定、PWA 安装横幅文案生成。一旦为空或滞后，整个导航上下文就可能断裂。
