网页标题必须写在<head>内且唯一有效，副标题应通过语义化HTML（如<header>包裹<h1>与<p class="subtitle">）或CSS伪元素实现，禁用<h2>硬凑和废弃的<hgroup>，<title>仅支持纯文本并需转义特殊字符。
网页标题必须用 <title> 写在 <head> 里，副标题不能用标题标签硬凑，得靠语义组合或 CSS 控制。
网页标题写错位置等于没写
浏览器只认 <head> 里的第一个 <title>，写在 <body> 开头、中间、结尾——全无效。Chrome 可能“帮忙”挪进 <head>，但爬虫和微信内置浏览器直接忽略，结果就是书签显示“index.html”，SEO 彻底失效。
- 检查最终生成的 HTML 文件（不是源码模板），确认
<title>真在<head>内且未被构建工具覆盖 - 服务端模板（如 EJS、Django）容易把
<head>拆开，<title>被塞到<body>里，肉眼难发现 - 别用
document.querySelector('title').textContent = 'xxx'动态改——这改不了标签页文字，唯一有效的是document.title = 'xxx'
副标题不能套用 <h2> 就完事
把副标题写成 <h2> 表面看着像，实际破坏文档大纲：它会被当成独立章节标题，屏幕阅读器会朗读为“二级标题”，而它本意只是对 <h1> 的补充说明。
- 推荐方案：用
<header>包住<h1>和一个带class="subtitle"的<p>，例如：<header> <h1>我的项目</h1> <p class="subtitle">一个专注性能优化的前端库</p> </header>
- 避免用已废弃的
<hgroup>，虽然部分浏览器还支持，但 W3C 已移除，验证器报错，SSR 渲染可能出问题 - 如果副标题纯属视觉装饰（比如破折号后加一行小字），用 CSS
::after伪元素更轻量，不污染 DOM
<title> 里不能写 HTML 或变量语法
<title> 只接受纯文本。写 <strong>首页</strong>，标签页就真显示那串字符；写 {{ title }} 或 <%= name %>，没服务端渲染时用户看到的就是字面量。
立即学习“前端免费学习笔记（深入）”；
- 特殊字符必须转义：
&写成&，写成 <code>，否则可能截断甚至破坏整个 HTML 解析 - 中文、emoji 可以用，但长度控制在 50 字符内——移动端标签栏通常只显示前 12 个汉字
- Vite/Webpack 的 HTML 插件默认会覆盖手写的
<title>，要自定义得查插件配置里的title或templateParameters字段
动态改标题时漏掉 SSR 或爬虫就白忙
单页应用路由切换后调 document.title，用户看到新标题，但搜索引擎和微信分享卡片仍取初始 HTML 里的 <title> 内容。
- 服务端必须输出正确的初始
<title>，这是 SEO 和分享的基础 - 前端路由更新时，除了
document.title，还得确保首屏 HTML 已含语义化标题内容（比如 SSR 渲染的<h1>） - 微信/QQ 内置浏览器不读 JS 改的标题，分享卡片永远基于初始 HTML，这点极易被忽略
