<title>标签是页面进入搜索引擎索引队列的准入凭证，必须在服务端响应的HTML中包含真实、唯一、静态文本，空值、占位符、JS动态设置或位置错误均导致拒收或降权。
title标签不是“页面名字”补丁，而是搜索引擎和浏览器识别页面身份的第一道硬门槛。没写对，页面大概率进不了索引队列——不是排名低，是根本搜不到。
为什么查看源代码里的title才是唯一可信依据
浏览器标签页显示正常 ≠ SEO 有效。很多 SPA 页面在用户眼里标题已更新，但右键「查看网页源代码」搜到的仍是<title>Loading</title>或<title>{{ page.title }}</title>。旧版 Googlebot、Perplexity、Claude Web 等 AI 抓取器不执行 JS，只读初始 HTML。这意味着：你改了 document.title，但爬虫看到的还是空值。
- Next.js 必须用
generateMetadataAPI，useEffect改document.title无效 - Nuxt 3 必须用
useSeoMeta，onMounted里操作属于“事后补救”，对爬虫无意义 - CMS 模板里硬编码
<title>首页 - XX公司</title>→ 所有页面标题雷同，触发模板化降权 - 纯静态页也要人工校验分页、筛选页、带 query 参数的 URL，它们最容易漏掉动态变量
title长度与关键词位置怎么影响实际展示
Google 搜索结果（SERP）桌面端通常截断在 50–60 字符（含空格），移动端更严，常在 50 字左右就加省略号。但真正致命的是关键词被截掉——比如把<title>Sony WH-1000XM5 无线降噪耳机|官网旗舰店</title>写成<title>官网旗舰店|无线蓝牙耳机|主动降噪|30小时续航|APP控制|多点触控…</title>，用户只看到“官网旗舰店|无线蓝牙耳机|主动降噪|…”，主卖点全丢。
- 优先保「主词 + 实体 + 差异点」结构，例如：
<title>无线蓝牙耳机|主动降噪|Sony WH-1000XM5</title> - 分隔符只用
-或|，避免»、•、中文顿号，部分爬虫解析失败 - 品牌名放末尾，除非是强搜索词（如
Chrome 浏览器下载） - 列表页必须带区分信息，如
<title>Vue3 组件通信方式 - 第2页 | 前端漫谈</title>
服务端输出 vs 客户端修改：哪些写法根本不算数
title必须是 <head> 的直接子元素，且初始 HTML 响应体中就得含真实文本。以下操作看似生效，实则对 SEO 零贡献：
立即学习“前端免费学习笔记（深入）”；
-
document.querySelector('title').textContent = '新标题'—— DOM 变了，标签页不更新 -
document.head.appendChild(newTitleEl)—— 新增的<title>不被识别为文档标题 - 在 EJS/Django 模板里把
<head>拆成多个 include 片段，导致<title>实际落在<body>中 —— W3C 验证失败，微信/QQ 内置浏览器不读取 - Vite +
html-webpack-plugin覆盖手写<title>—— 最终生成的index.html才是真相，不是源码
最易被忽略的验证动作：本地开发阶段就打开 view-source:https://localhost:3000/page 直看服务端吐出的内容。如果源码里没真实文本，上线后补救已经晚了——不是效果打折，是压根没被收录过。
