必须唯一且严格置于内,否则浏览器标签页显示异常、seo失效、微信分享抓取错误;写在或重复出现时仅首个多数被识别,js动态插入无效,document.title是唯一可靠修改方式。

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











