<title>标签是页面进入搜索引擎索引队列的准入凭证，而非仅有助于SEO；必须服务端输出真实唯一文本，空值、占位符或JS动态设置均导致拒收或降权。
<title> 标签不是“有助于 SEO”，而是页面进搜索引擎索引队列的准入凭证——没它、写错、动态生成，页面大概率不被收录。
为什么空 <title> 或 <title>Loading</title> 直接导致拒收
Googlebot 和主流 AI 抓取器解析 HTML 时，<title> 是第一个强语义信号，权重远高于 <h1> 或 meta name="description"。它不参与渲染，但决定页面是否被识别为有效内容。
-
<title></title>或<title>{{ title }}</title>→ 源码无真实文本，爬虫视作模板页，延迟收录或直接跳过 -
<title>Loading</title>→ SPA 首屏常见错误，旧版 Googlebot 不执行 JS，看到的就是这个 - 全站统一写
<title>某某公司官网</title>→ 每个页面失去独立识别度，Google 标记为低信息密度
Next.js 里 document.title = 'xxx' 为什么无效
客户端 JS 修改只改 DOM，初始 HTML 响应体里仍是占位值。Lighthouse 会报 “Document has a valid title” 失败，SERP 展示为空白或截断。
- 必须用
generateMetadataAPI，服务端返回时就含真实<title> -
getStaticProps + Head已废弃，别再用 -
useEffect(() => { document.title = ... })只对用户可见，对爬虫无效
移动端标题超 60 字符的实际后果
Google 移动端 SERP 通常只显示前 50–60 字符（含空格），超出部分一律截断为省略号，核心信息丢失。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<title>HTML title 标签 SEO 写法详解：从基础规范到 Next.js 动态生成最佳实践</title>→ 显示为 “HTML title 标签 SEO 写法详解…” - 推荐结构：主关键词前置 + 分隔符 + 网站名，如
<title>React useEffect 闭包陷阱详解 - 前端漫谈</title> - 分隔符只用
-或|，避免»、中文顿号等 UTF-8 符号，部分爬虫解析异常
验证 <title> 是否真生效，别信浏览器标签页
浏览器标签页显示正常 ≠ 搜索引擎看到正常。关键看服务端吐出的原始 HTML。
- 右键 →「查看网页源代码」，搜索
<title>，确认内容是静态文本，不是 JS 插入或模板语法 - 在地址栏输入
view-source:https://yoursite.com/page，直看响应体 - 用 Lighthouse 扫描，检查「Document has a valid title」是否通过
- CMS 或 SSR 模板中，
{{ page.title }}必须有 fallback，比如路由路径转义：/blog/seo-title→<title>SEO title 写法指南 | 博客</title>
最容易被忽略的点：验证必须在本地开发阶段做，而不是上线后才发现源码里还是 <title>{{ title }}</title>。一旦爬虫已抓取错误版本，重新收录周期可能长达数周。
