title标签直接影响搜索引擎理解和页面搜索流量，空、重复或堆砌关键词会导致降权；应按内容页、列表页、工具页三类场景规范书写，并确保ssr/静态页中动态生成且多语言同步。

title 标签不只影响浏览器标签页显示，它直接决定搜索引擎怎么理解你的页面——没设或乱设，等于主动放弃搜索流量和用户点击。

为什么 <title></title> 会被搜索引擎反复抓取

搜索引擎爬虫解析 HTML 时，<title></title> 是首个关键语义信号。它比 <h1></h1> 权重更高，是判断页面主题的首要依据。如果为空、重复、或堆砌关键词（如“SEO_优化_建站_教程_免费”），Google 和百度都会降权或截断显示。

• 空 <title></title>：页面可能被判定为模板页或低质内容，收录延迟甚至不收录
• 超过 60 字符：移动端常被截成“前端开发入门…”，丢失关键信息
• 全站统一用“公司名称”：每个页面失去独立识别度，搜索点击率下降明显

<title></title> 该写什么？按场景给三类写法

不是越长越好，也不是越短越好，核心是「让用户一眼知道这是不是他要的页面」。

• 内容页（文章/商品）：页面主标题 - 网站名（例：React useEffect 闭包陷阱详解 - 前端漫谈）
• 列表页（分类/搜索结果）：关键词+限定词 - 网站名（例：Vue3 组件通信方式 - 前端漫谈）
• 工具页/后台页：功能名 | 当前状态 - 网站名（例：发布文章 | 草稿箱 - 后台系统）

注意：分隔符推荐用短横线 - 或竖线 |，避免用冒号或中文顿号——部分爬虫对 UTF-8 符号解析不稳定。

动态站点怎么安全生成 <title></title>

服务端渲染（SSR）或静态站点生成（SSG）中，硬编码 <title></title> 很容易漏掉页面上下文。Vue/React 中常见错误是只在根组件设一次，子路由切换后不更新。

• Vue 项目：用 useHead（VueUse）或 router.afterEach + document.title = ...，但后者不保证 SSR 友好
• Next.js：必须用 next/head 或 generateMetadata（App Router），直接改 document.title 在首屏不会被搜索引擎抓到
• 纯静态 HTML：确保每个页面的 <title></title> 是独立写的，别靠 JS 注入——爬虫不执行 JS

检查 <title></title> 是否生效的最快方法

别等上线后再查。本地开发就能验证：

• 右键 → 「查看页面源代码」，搜索 <title></title>，确认内容已渲染且无 JS 占位符（如 {{ title }}）
• 用 Lighthouse 扫描，看「Document has a valid title」是否通过
• 在 Chrome 地址栏输入 view-source:https://yoursite.com/page，确认源码里是真实文本，不是空标签或服务端未注入

最容易被忽略的是：多语言站点中，<title></title> 必须随 lang 属性同步切换，否则西班牙语页面返回英文 title，会触发搜索引擎的地域匹配失败。