标签必须是的直接子元素且唯一，否则导致seo失效、浏览器标签显示异常；动态修改需用document.title，服务端html中必须含静态真实文本，长度50–60字符，关键词前置，分隔符统一用-或|。
title 标签必须写在 里且只能有一个
浏览器解析 HTML 是线性的，<title></title> 必须在渲染前被识别，否则标签页可能显示为空、文件名，或直接被爬虫忽略。W3C 规范强制要求它是 的**直接子元素**。
常见错误包括：
-
<title></title>写在开头 → W3C 验证失败，微信/QQ 内置浏览器不读取 - 服务端模板（如 EJS、Django）把
拆成多个片段，导致<title></title>被错插到中 - 构建工具（Vite、Webpack +
html-webpack-plugin）覆盖了你手写的<title></title>→ 最终输出的index.html才是真相，不是源码
动态改标题只能用 document.title，别碰 DOM
单页应用（React/Vue）路由切换时，document.title = '新标题' 是唯一可靠方式。其他操作看似生效，实则无效。
这些写法都不会更新浏览器标签页文字：
-
document.querySelector('title').textContent = '新标题'—— DOM 节点变了，但标签页不动 -
document.head.appendChild(newTitleEl)—— 新增的<title></title>不被识别为文档标题，浏览器只取第一个 - 在 Vue 的
onMounted或 React 的useEffect里改document.title，但服务端初始 HTML 仍是占位符 → Googlebot 和多数 AI 抓取器看不到真实内容
Next.js 用户必须用 generateMetadata API；Nuxt 3 用户用 useSeoMeta；纯客户端项目至少 fallback 一个有意义的默认值，比如按路径生成：/product/123 → <title>智能手表X1 参数详情 - 品牌商城</title>
SEO 生效的前提：源码里得有真实文本
右键「查看网页源代码」搜 <title></title>，看到的必须是静态、无占位符、无模板语法的纯文本。如果看到 <title>{{ page.title }} | Site</title> 或 <title>Loading</title>，等于 SEO 归零。
关键限制点：
- 长度控制在 50–60 字符（含空格），Google 搜索结果通常只展示前 50 字，移动端更窄
- 核心关键词前置，比如商品页写
<title>Sony WH-1000XM5 降噪耳机 | 无线蓝牙</title>，而不是<title>官网 | Sony | WH-1000XM5</title> - 只接受纯文本：
&必须写成&，和 <code>>必须写成<和>，否则 HTML 解析中断 - 避免 emoji、全角空格、零宽字符——部分旧爬虫和 WebView 无法索引
不同页面类型对应不同标题结构
不是所有页面都适合套用“主词 - 品牌”格式。结构错位会导致点击率下降、AI 引用错乱。
推荐写法：
- 内容页（文章/商品详情）：
<title>主标题 - 网站名</title>，例如<title>React useEffect 闭包陷阱详解 - 前端漫谈</title> - 列表页（分类/搜索结果）：
<title>关键词 + 限定词 - 网站名</title>，例如<title>Vue3 组件通信方式 - 前端漫谈</title> - 工具页/后台页：
<title>功能名 | 当前状态 - 网站名</title>，例如<title>发布文章 | 草稿箱 - 后台系统</title>
分隔符统一用 - 或 |，别用中文顿号、冒号或 » 符号——部分爬虫对 UTF-8 符号解析不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
