标签必须严格置于内且为直接子元素，不可动态插入；长度控制在50–60字符内，核心关键词前置，避免堆砌；确保UTF-8编码及正确声明。
页面标题必须用 <title></title> 标签写在 里，且只能有一个；搜索引擎只认这个，其他地方写的都不算数。
title 标签放错位置导致 SEO 失效
常见错误是把 <title></title> 写在 里，或者放在 外面。浏览器会“容错”渲染，但搜索引擎爬虫直接忽略——你看到页面标题显示正常，不代表它被收录为有效标题。
- 必须严格嵌套在
内部，且是其直接子元素 - 不能用 JavaScript 动态插入（如
document.title = 'xxx'）来替代静态<title></title>，首屏 HTML 源码里没有，SEO 就没基础 - 服务端渲染（SSR）或静态站点生成（如 Hugo、Jekyll）时，确保模板中
<title></title>是硬编码或通过可靠变量注入，而非依赖客户端 JS 补全
title 内容长度与关键词顺序影响点击率
Google 通常只显示前 50–60 个字符（含空格），超出部分会被截断。但长度不是唯一变量：关键词越靠前，匹配用户搜索意图的概率越高，尤其对品牌词+核心业务组合（如“React 路由配置 | 官方文档”比“官方文档 | React 路由配置”更易被点中）。
- 优先把最核心的关键词（用户最可能搜的短语）放在开头，比如
<title>Vue 3 响应式原理 - 深入浅出</title> - 避免堆砌关键词，如
<title>Vue Vue3 前端开发 响应式 前端框架</title>，会被视为 spam，降低可信度 - 品牌名建议放末尾，除非品牌本身是强搜索词（如“Chrome 浏览器下载”）
- 动态页面注意避免重复 title，比如分页列表页要带页码：
<title>文章列表 - 第2页 | MySite</title>
特殊字符和编码问题让标题显示异常
中文、符号（如竖线 |、破折号 —、emoji）如果未正确声明编码或被误转义，会导致标题在标签页里显示为乱码、方块，甚至触发浏览器解析错误。
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 文件保存为 UTF-8 编码，且
中有<meta charset="utf-8"> - 避免在
<title></title>中直接写 HTML 实体（如 - 服务器返回的 HTTP Header 中
Content-Type必须包含charset=utf-8，否则即使写了meta也可能失效 - CMS 或模板引擎自动转义时，确认
<title></title>内容未被双重转义（例如把&变成&）
title 标签看着简单，但它卡在 HTML 解析最早期阶段，一旦出错，后续所有 SEO 努力都缺了地基。最容易被忽略的是：你本地测试时一切正常，不代表爬虫看到的也一样——务必用 curl -s URL | grep "<title>"</title> 或查看网页源码（不是开发者工具 Elements 面板）确认最终输出。
