title 标签是页面在搜索引擎和用户眼中的“名字”，必须与 h1 语义一致以确保意图明确；需在 ssr 阶段动态生成，包含关键参数、页码及 locale，长度控制在 50 字符内，结构为“主关键词 | 品牌词”。
title 标签不是装饰，它是页面在搜索引擎和用户眼中的“名字”，写错或漏掉，页面就等于没身份。
为什么 title 和 h1 必须语义一致
Google 把 title 当作页面意图的第一判断依据，h1 是正文里对它的确认。两者不一致（比如 title 写“React Server Components 入门”，h1 却是“欢迎来到我的技术博客”），系统会标记为“意图模糊”，直接降低 E-E-A-T 评估分——这不是警告，是事实性降权。
-
title出现在搜索结果、浏览器标签页、微信/钉钉链接预览中，是用户决定点不点你的第一信号 -
h1必须在 DOM 初始 HTML 中存在，不能靠useEffect或onMounted动态插入；否则爬虫看到的是空或默认值 - Next.js 用户必须用
generateMetadata，Vue/Nuxt 必须用useSeoMeta，确保 SSR 阶段就输出正确值 - CMS 模板里硬编码
<title>关于我们</title>是高危操作，应改为<title>{{ page.title }} | {{ site.name }}</title>
动态页面中 title 容易漏掉的参数
SPA 路由切换时，title 不只是改 document.title，还必须同步暴露给爬虫和 AI 工具。漏掉 locale 或 query 参数，会导致多语言页或带筛选条件的页生成重复或错位的 title。
- Next.js 的
generateMetadata必须显式接收并透传params和searchParams，否则静态生成阶段无法区分不同查询态 - 带分页的列表页，
title应包含当前页码，如“前端工具集 - 第2页”，而非统一写“前端工具集” - 国际化站点必须在
generateMetadata中读取locale并注入翻译，不能只靠客户端 JS 切换
title 长度与关键词位置的实际影响
超过 60 字符会被截断，但关键不在“能不能塞下”，而在“前 30 字是否锁定核心意图”。Google 优先索引开头部分，尾部堆砌关键词反而触发低质判定。
- 理想结构：
主关键词 | 品牌词，例如HTML title 标签 SEO 写法 | 前端性能实验室 - 避免“首页 | 关于我们 | 联系我们 | 产品中心”这类模板化写法，每个页面
title必须唯一且不可替代 - 电商商品页不要写“购买XXX”，而要写“XXX（型号）｜参数｜价格｜品牌”，让 AI 和爬虫一眼识别实体
- 移动端预览更窄，建议控制在 50 字符内，用
curl -s URL | grep '<title>'</title>实测渲染效果
真正难的不是写对 title，而是每次新增页面时，先问自己：这个标题删掉后，用户或 AI 是否还能准确还原这页的核心主题？如果答案是否定的，那它还没到上线标准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
