<title>标签必须放在<head>里且为直接子元素，否则SEO失效、浏览器标签显示异常；动态修改须用document.title，服务端HTML中必须含静态真实文本，长度50–60字符，关键词前置，分隔符统一用-或|。
title 标签必须放在 里，否则无效
浏览器只认 <head> 区域内的第一个 <title>，写在 <body> 里、<html> 外、甚至 <head> 里但嵌套在其他标签中（比如 <div><title>首页</title></div>），都会被忽略。Chrome 可能“自动修复”并显示标题，但爬虫、微信/QQ 内置浏览器、SEO 工具一律不认。
常见出错点：
- 服务端模板（EJS/Django）把
<head>拆成多个片段，<title>被错插到<body>开头 - HTML 文件漏写
<head>，直接从<body>开始，<title>被静默丢弃 - 构建工具（如 Vite 的
vite-plugin-html或 Webpack 的html-webpack-plugin）通过配置项注入title，覆盖了你手写的<title>—— 查源码没用，得看最终生成的index.html
动态改标题只能用 document.title，别碰 DOM
document.title = '新标题' 是唯一可靠方式。其他操作看似生效，实则对浏览器标签页完全无效：
-
document.querySelector('title').textContent = '新标题'→ DOM 节点变了，标签页不动 -
document.head.appendChild(newTitleEl)→ 新增的<title>不被识别为文档标题，浏览器只取第一个 -
document.head.innerHTML += '<title>新标题</title>'→ 同样无效，且可能破坏原有结构
注意边界：
立即学习“前端免费学习笔记（深入）”；
- IE6–8 下设中文需确保页面有
<meta charset="utf-8">，否则乱码 - 微信/QQ 分享卡片取的是初始 HTML 中的
<title>，JS 后改的仅影响当前用户看到的标签页 - 修改后不触发任何事件，无法监听变化
SEO 生效的前提：源码里得有真实静态文本
右键「查看网页源代码」搜 <title>，看到的必须是纯文本，不能含模板语法或占位符：
- ❌
<title>{{ page.title }} | Site</title> - ❌
<title>Loading</title> - ✅
<title>Sony WH-1000XM5 降噪耳机 | 无线蓝牙</title>
长度和字符也关键：
- 控制在 50–60 字符内（含空格），Google 搜索结果通常只展示前 50 字
- & 必须写成
&， 必须写成<和>，否则破坏 HTML 结构 - 避免 emoji、全角空格、零宽字符——部分旧爬虫和 WebView 无法索引
- 关键词前置，比如商品页写
<title>Sony WH-1000XM5 降噪耳机 | 无线蓝牙</title>，而不是<title>官网 | Sony | WH-1000XM5</title>
h1 到 h6 不是视觉样式工具，而是语义层级
用 <h3> 替代加粗段落？屏幕阅读器会读作“标题三级”，用户听到一串“标题三级、标题三级”，根本分不清哪是副标题、哪是强调句。
真正该怎么做：
- 纯视觉强调：用
<strong>+ CSS 控制粗细/颜色 - 语义强调（重要内容）：用
<strong>，别套标题标签 - 需要结构化副标题：确保上面有
<h1>或<h2>，再用<h2>或<h3> - CSS 可以重置所有
<h1>–<h6>的样式，但语义层级一旦写进 HTML 就不可逆——辅助技术只读 HTML 结构，不看你 CSS 是否隐藏或缩放
最常被忽略的一点：单页应用路由切换时，document.title 改了，但服务端初始 HTML 的 <title> 还是占位符，Googlebot 看不到真实内容。Next.js 得用 generateMetadata API，Nuxt 3 得用 useSeoMeta，纯客户端项目至少 fallback 一个有意义的默认值。
