标签必须且只能位于内，是html规范强制要求的直接子元素；写错位置、多个、用js插入或dom操作均会导致标签页显示异常、seo失效及爬虫忽略。
必须写在 里，且只能有一个；写错位置、多个、用 JS 插入或 DOM 操作，浏览器标签页可能显示为空或文件名，SEO 直接失效。
title 标签只能放在
浏览器解析 HTML 是线性的，<title></title> 必须在渲染前被识别，才能用于标签页显示、收藏夹命名和搜索引擎抓取。它不是“建议放这里”，而是 HTML 规范强制要求的直接子元素。
- 写在
开头？W3C 验证失败，爬虫（尤其是静态抓取器）直接跳过，微信/QQ 内置浏览器也无视 - 写在
外或开头？可能触发怪异模式，IE8 等旧浏览器不识别 - 服务端模板（如 EJS、Django）中
被拆成多个片段？<title></title>容易漏写或错插到里 - 构建工具（Vite、Webpack）启用了
html-webpack-plugin？你手写的<title></title>可能被插件生成的内容覆盖——得看最终输出的index.html，不是源码
动态改标题必须用 document.title
单页应用（SPA）路由切换时，不能靠 DOM 操作更新标题，document.title = '新标题' 是唯一可靠方式。其他写法看似生效，实则无效。
-
document.querySelector('title').textContent = '新标题'—— DOM 节点内容变了，但浏览器标签页文字完全不变 -
document.head.appendChild(newTitleEl)—— 新增的<title></title>不被浏览器识别为文档标题，只取第一个 - IE6–8 下设中文标题乱码？确保页面有
<meta charset="utf-8">且 HTTP 响应头Content-Type包含charset=utf-8 - 微信/QQ 分享卡片取的是初始 HTML 中的
<title></title>，JS 后改的仅影响当前用户看到的标签页
<title></title> 内容限制与常见陷阱
它只接受纯文本，不解析任何 HTML 标签、JS 表达式或模板语法。所有非 ASCII 字符必须是合法 Unicode，但需避开全角空格、零宽字符、未转义的 & 或 。
-
&必须写成&，否则会被当成实体开头，导致截断或解析失败 和 <code>>必须写成和 <code>>，否则破坏 HTML 结构- 长度建议控制在 50 字符以内（含空格），Google 搜索结果通常只展示前 50–60 字符，移动端标签栏更窄
- 避免 emoji 和生僻 Unicode 字符，部分旧爬虫或 WebView 无法正确索引或显示
- CMS 或 SSR 场景下，若
<title></title>被模板引擎双重转义（比如把&变成&），标题会原样显示为字面量
服务端渲染（SSR）和构建工具中的实际校验点
首屏 HTML 源码里没有有效的 <title></title>，等于 SEO 彻底归零。很多问题不是代码写错了，而是没看到最终产物。
- 用浏览器“查看网页源代码”（不是开发者工具的 Elements 面板），确认
<title></title>是否真实存在、位置是否正确、内容是否被意外清空 - Vite 用户检查
vite.config.ts中是否有html.title配置；Webpack 用户查html-webpack-plugin的templateParameters或title字段 - Django/EJS 等模板系统，确认父模板和子模板没有重复定义
<title></title>，{% block title %}是否被正确覆盖 - Vue/React SSR 应用，检查服务端入口是否注入了真实标题，而不是依赖客户端 JS 补全
最常被忽略的一点：<title></title> 不只是展示字段，它参与页面唯一性判定、history.state 关联、PWA 安装横幅文案生成。一旦为空或滞后，整个导航上下文就可能断裂——而这种问题，在本地开发时往往根本看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
