如何设定网页标题_title标签定义浏览器选项卡显示的文字
作者：袖梨
2026-06-08
title标签必须位于<head>内且唯一，放错位置会被解析器忽略；动态修改须用document.title；构建工具可能覆盖手写title；SEO需控制长度并转义特殊字符。
title 标签必须写在 <head> 里，放错位置浏览器直接忽略——这不是兼容性问题，是 HTML 解析器根本没把它当标题处理。
title 标签必须放在 <head> 内，且只能有一个
浏览器只识别 <head> 区域内的第一个 <title>，其余全部静默丢弃。常见错误包括：
- 把
<title>首页</title>写在<body>开头，标签页显示“无标题”或文件名 - 服务端模板（如 EJS、Django）中
<head>被拆成多个片段，<title>漏写或插到<body>里 - HTML 文件没写
<head>，直接从<body>开始，<title>被忽略或由浏览器“帮忙”修复（Chrome 可能挪，但爬虫不认）
动态改标题只能用 document.title，别碰 DOM
单页应用（SPA）里路由切换时，别写 document.querySelector('title').textContent = '新标题'——这行代码能改 DOM 节点，但浏览器标签页文字完全不变。
- 唯一可靠方式是直接赋值：
document.title = '用户中心 - 我的网站' - IE6–8 下设中文可能乱码，需确保页面声明
<meta charset="utf-8">且前后一致 - 修改后不会触发任何事件，也不会影响
history.state，别指望靠它监听变化 - 微信/QQ 内置浏览器支持良好，但分享卡片取的仍是初始 HTML 中的
<title>，JS 后改的仅影响当前标签页
构建工具（如 Vite、Webpack）可能覆盖手写 title
Vite 的 vite-plugin-html、Webpack 的 html-webpack-plugin 常通过配置项注入 title，比如 title: '我的网站'。这时你源码里写的 <title>首页</title> 看着正常，实际构建产物中已被插件生成的内容覆盖。
- 排查方法：不要查源码，直接打开最终输出的
index.html文件看<title>内容 - 检查构建配置是否启用了
title或templateParameters相关字段 - 若需自定义，优先用插件提供的
inject: true+templateParameters注入变量，而不是硬写静态<title>
字符长度、转义与 SEO 兼容性不能只看“能显示”
搜索引擎通常只展示前 50–60 个字符，移动端标签栏更窄，12 个汉字就可能被截断。更麻烦的是特殊字符：
- 未转义的
&会被当成实体开头，应写成& -
<和>不转义会破坏 HTML 结构，轻则标题显示异常，重则整个页面渲染失败，必须写成和 <code>> - 中文无需编码，但 emoji 和生僻 Unicode 字符部分旧爬虫无法索引，建议避免
- 分隔符统一用
-、|或_，别混用；空格不如短横线利于 SEO
真实项目里最容易被忽略的，是构建工具和 SSR 渲染层对 title 的双重干预——前端 JS 改了 document.title，但服务端吐出的 HTML 里还是旧值，导致首屏 SEO 失效、微信分享卡片抓取错误。这种问题必须两端对齐，不能只盯一个环节。
