标签是页面在搜索引擎、浏览器标签页、分享预览和AI摘要中唯一被直接读取展示的“身份卡”，决定点击率、爬虫理解度与AI引用权；须每页唯一、50–60字符、关键词前置、避免堆砌与全大写，并确保服务端动态生成。
<title></title> 标签不是装饰，是页面在搜索引擎、浏览器标签页、分享预览和 AI 摘要中唯一能被直接读取并展示的“身份卡”。它不参与页面渲染，但决定用户会不会点进来、爬虫认不认得清主题、AI 引用时给不给你署名。
为什么写错会导致流量直接流失
常见错误现象：<title>首页 - 公司名称</title>、<title>SEO优化|HTML教程|前端入门</title>、所有列表页共用同一段文字、SPA 首屏返回的是 <title>Loading...</title>。
根本问题在于：搜索引擎（尤其是 Google）会把这种标题当作低信息密度或模板化内容处理；用户在 SERP 里看到模糊、重复、无主语的标题，点击率直接打五折；AI 系统引用时可能跳过你的页面，或抓取到错误上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每页
<title></title>必须唯一，动态生成——CMS 模板里别硬写死，用{{ page.title }} | {{ site.name }}这类变量 - 控制在 50–60 字符（含空格），超长会被截断；移动端尤其敏感，建议用 Semrush 模拟器 实测
- 核心关键词前置，比如商品页写
<title>无线蓝牙耳机｜主动降噪｜Sony WH-1000XM5</title>，而不是<title>Sony 官网｜无线蓝牙耳机｜WH-1000XM5</title> - 避免全大写、堆砌符号（如 »、•）、冗余后缀（如统一加 “- 官方网站”）
SPA 页面的怎么才能被爬虫和 AI 看见
纯客户端渲染（React/Vue）下，初始 HTML 中的 <title></title> 往往是占位符。旧版 Googlebot 和多数 AI 抓取器不会等 JS 执行完，导致看到的是空值或错误值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Next.js 用户优先用
generateMetadataAPI，确保服务端已输出正确<title></title>和<meta name="description"> - Nuxt 3 用户用
useSeoMeta，不要在onMounted里改document.title - 若必须客户端更新，至少 fallback 一个有意义的默认值，例如按路由路径生成：
/blog/seo-title → <title>SEO title 写法指南 | 博客</title> - 验证方式：右键「查看网页源代码」，搜索
<title></title>，确认内容不是 JS 插入的
title 和 meta description 的配合逻辑
<meta name="description"> 不影响排名，但它是你在搜索结果里的“广告文案”。Google 经常直接把它当摘要展示，而它和 <title></title> 是用户决策仅有的两个文本依据。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 长度控制在 120–155 字符，开头嵌入主关键词，用自然语言讲清“这页能解决什么”
- 避免复制正文第一段、留空、堆砌关键词、写“欢迎访问…”这类无效话术
- 不同页面类型差异化处理：首页强调定位，详情页强调解决方案，404 页明确告知状态并引导回退
- 服务端渲染时，务必确保
<meta name="description">和<title></title>同步动态生成，不能一个动态一个写死
最易被忽略的一点：很多团队花大力气优化 H1 和内容关键词，却让 <title></title> 仍由 CMS 默认模板控制，甚至多个子站共用一套 title 规则。这不是细节问题，是整张网页对外暴露的第一句自我介绍——说错了，后面再准确也没人听。
