<title>必须位于<head>内，因浏览器需在渲染前获取页面名称用于标签页、收藏夹和SEO；写在<body>或<html>外会导致兼容性问题、验证失败或被爬虫忽略。
页面标题必须用 <title></title> 写在 <head> 里，其他位置、其他方式都不可靠——这是 SEO 和浏览器行为的硬性前提，不是建议。
为什么 <title> 只能放在 <head> 中
浏览器解析 HTML 是线性的，<title> 的作用是“在渲染前就告诉浏览器这个页面叫什么”。它要被提取用于标签页显示、收藏夹命名、搜索引擎抓取。如果写在 <body> 里，Chrome/Firefox 会自动把它挪进 <head>，但 IE8 等旧浏览器可能直接忽略；爬虫（尤其是静态抓取器）不会做这种修复，会当成无效内容跳过。
- 写在
<html>开头？触发怪异模式，部分浏览器不识别 - 写在
<body>？W3C 验证失败，SEO 工具报“缺失标题”错误 - 多个
<title>？只有第一个生效，其余被丢弃，且 HTML 结构非法
<title> 里能写什么、不能写什么
它只接受纯文本，不解析任何 HTML 标签、JS 表达式或模板语法（比如 {{ title }} 或 <%= title %>）。所有非 ASCII 字符必须是合法 Unicode（中文、emoji、©、— 都可以），但要避开全角空格、零宽字符、未转义的 & 或 。
- ✅ 允许：
产品中心｜XX科技官网、联系我们 ?、隐私政策 — 2026年更新 - ❌ 禁止：
<span>首页</span>、首页 & 产品（应写成首页 & 产品）、首页 {{ version }} - ⚠️ 注意：换行和连续空格会被压缩成单个空格，所以
首页\n\n\n关于我们显示为首页 关于我们
单页应用（SPA）中动态改标题的常见翻车点
React/Vue/Angular 项目常依赖 JS 更新 document.title，但这只是补救手段——初始加载那一刻，爬虫和首屏用户看到的标题，永远只认服务端吐出的那个 <title>。
立即学习“前端免费学习笔记（深入）”；
- 只改
document.title，没同步 SSR 输出的<title>？→ 搜索引擎看到的是空标题或默认值 - 路由切换后立刻设
document.title，但组件还没挂载完？→ Safari 14 之前版本可能丢弃这次修改 - 用
setTimeout延迟设置？→ 不稳定，不同设备/网络下延迟不可控 - 正确做法：服务端渲染时注入真实标题；前端监听
history.pushState或使用框架的onMounted/useEffect钩子，在 DOM 准备就绪后再赋值
标题长度与 SEO 实际影响
搜索结果通常只显示前 50–60 字符（英文）或约 24–30 个汉字。超出部分会被截断，还可能触发“标题堆砌”判定，导致降权。
- 避免：
网站建设｜SEO优化｜网页设计｜建站教程｜免费模板｜响应式 - 推荐：
企业官网建设指南：从需求分析到上线部署（2026版） - 特别注意：CMS 或模板引擎自动生成的标题（如
首页 - {siteName}）容易重复，建议按页面类型加唯一标识词
最易被忽略的一点：favicon.ico 路径是否正确，不影响标题本身，但会影响浏览器标签页的完整呈现——很多开发者调通了 <title> 却忘了配 <link rel="icon" href="/favicon.ico">，导致标签页左侧空白，降低专业感。
