title标签直接影响搜索引擎理解和页面搜索流量，空、重复或堆砌关键词会导致降权；应按内容页、列表页、工具页三类场景规范书写，并确保SSR/静态页中动态生成且多语言同步。
title 标签不只影响浏览器标签页显示，它直接决定搜索引擎怎么理解你的页面——没设或乱设，等于主动放弃搜索流量和用户点击。
为什么 <title> 会被搜索引擎反复抓取
搜索引擎爬虫解析 HTML 时，<title> 是首个关键语义信号。它比 <h1> 权重更高，是判断页面主题的首要依据。如果为空、重复、或堆砌关键词（如“SEO_优化_建站_教程_免费”），Google 和百度都会降权或截断显示。
- 空
<title>：页面可能被判定为模板页或低质内容，收录延迟甚至不收录 - 超过 60 字符：移动端常被截成“前端开发入门…”，丢失关键信息
- 全站统一用“公司名称”：每个页面失去独立识别度，搜索点击率下降明显
<title> 该写什么？按场景给三类写法
不是越长越好，也不是越短越好，核心是「让用户一眼知道这是不是他要的页面」。
- 内容页（文章/商品）：
页面主标题 - 网站名（例：React useEffect 闭包陷阱详解 - 前端漫谈） - 列表页（分类/搜索结果）：
关键词+限定词 - 网站名（例：Vue3 组件通信方式 - 前端漫谈） - 工具页/后台页：
功能名 | 当前状态 - 网站名（例：发布文章 | 草稿箱 - 后台系统）
注意：分隔符推荐用短横线 - 或竖线 |，避免用冒号或中文顿号——部分爬虫对 UTF-8 符号解析不稳定。
动态站点怎么安全生成 <title>
服务端渲染（SSR）或静态站点生成（SSG）中，硬编码 <title> 很容易漏掉页面上下文。Vue/React 中常见错误是只在根组件设一次，子路由切换后不更新。
- Vue 项目：用
useHead（VueUse）或router.afterEach+document.title = ...，但后者不保证 SSR 友好 - Next.js：必须用
next/head或generateMetadata（App Router），直接改document.title在首屏不会被搜索引擎抓到 - 纯静态 HTML：确保每个页面的
<title>是独立写的，别靠 JS 注入——爬虫不执行 JS
检查 <title> 是否生效的最快方法
别等上线后再查。本地开发就能验证：
- 右键 → 「查看页面源代码」，搜索
<title>，确认内容已渲染且无 JS 占位符（如{{ title }}） - 用 Lighthouse 扫描，看「Document has a valid title」是否通过
- 在 Chrome 地址栏输入
view-source:https://yoursite.com/page，确认源码里是真实文本，不是空标签或服务端未注入
最容易被忽略的是：多语言站点中，<title> 必须随 lang 属性同步切换，否则西班牙语页面返回英文 title，会触发搜索引擎的地域匹配失败。
