标签必须服务端输出真实唯一文本，否则页面无法进入索引队列；需右键查看源代码验证，next.js用generatemetadata，nuxt3用useseometa，禁用js动态设置。
<title></title> 标签必须在服务端就输出真实、唯一、无占位符的文本，否则 Googlebot 和多数 AI 抓取器会直接跳过或降权——这不是“可能影响”，而是页面进不了索引队列的第一道关卡。
为什么 <title></title> 空或动态写就等于没写
搜索引擎解析 HTML 时，<title></title> 是首个强语义信号，权重远高于 <h1></h1> 或 meta name="description"。它不是“辅助信息”，而是页面能否被识别为有效内容的硬门槛。
-
<title></title>、<title>Loading</title>、<title>{{ page.title }}</title>→ 源码里没真实文本，爬虫视作无效页 - 纯客户端渲染（React/Vue）中用
document.title = 'xxx'→ 只改 DOM，初始 HTML 仍是占位值，旧版 Googlebot 不执行 JS，根本看不到你写的标题 - Next.js 项目只靠
useEffect(() => { document.title = ... })→ Lighthouse 会报 “Document has a valid title” 失败，且 SERP 展示为空白或截断
怎么写才不被截断、不被降权
移动端搜索结果只显示前 50–60 字符（含空格），超长必被截成“前端开发入门…”；关键词堆砌或全大写会被判定为低质信号。
- 核心关键词前置：
<title>React useEffect 闭包陷阱详解 - 前端漫谈</title>✅，而非<title>前端漫谈 - React useEffect 闭包陷阱详解</title>❌ - 分隔符用
-或|，别用»、•、中文顿号——部分爬虫对 UTF-8 符号解析不稳定 - 避免全站统一后缀，如每页都加
- 官方网站，Google 易标记为模板化低质内容 - 首页别写
<title>首页</title>，而要写<title>HTML title 标签 SEO 写法 | 前端实操指南</title>，与内容页主题一致
不同框架下怎么确保服务端吐出正确值
关键不是“能不能改”，而是“HTML 初始响应体里有没有”。右键「查看网页源代码」搜 <title></title>，看到的必须是静态文本，不是 JS 插入的。
- Next.js：必须用
generateMetadataAPI，getStaticProps + Head已废弃，useEffect改document.title无效 - Nuxt 3：用
useSeoMeta，不是onMounted里改document.title - CMS 模板：禁用硬编码
<title>关于我们</title>，改用变量如<title>{{ page.title }} | {{ site.name }}</title> - 纯静态页：直接写死，但需人工校验每页是否唯一，尤其注意分页、筛选页、带参数的 URL
最容易被忽略的点：验证必须在本地开发阶段做，不是上线后再查。view-source:https://yoursite.com/page 这个地址能直看服务端吐出的内容，比浏览器标签页上看到的更真实——因为后者可能是 JS 后续覆盖的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
