页面标题必须唯一且置于内；内容为空或含空格将导致标签页显示文件名、SEO失效；动态修改须用document.title而非DOM操作；SPA需手动更新，构建工具配置可能覆盖模板中的。

HTML里

页面标题必须放在里面，而且只能有一个；写在里或者多个<title></title>标签，浏览器会忽略后面那些，或只取第一个。

• 常见错误：把<title>我的网站</title>直接丢在开头，结果地址栏、标签页、搜索引擎都看不到
• 正确位置：标签内部，通常紧贴<meta charset="utf-8">之后
• 注意：服务端模板（如PHP、Jinja）里如果被拆开或动态拼接，容易漏掉<title></title>或重复插入

title内容为空或纯空格会怎样

浏览器不会报错，但实际效果等同于没设标题——标签页显示文件名（如index.html），SEO直接失效，微信/钉钉内嵌打开时也常显示“未知页面”。

• 典型现象：本地双击打开HTML文件，标签页显示“无标题文档”或路径名
• 排查方法：右键 → “查看页面源代码”，确认<title></title>标签内有可见文本，且不含 或全角空格
• 生成环境尤其要注意：CMS或前端框架（如Vue SSR）若未正确注入标题，<title></title>可能被渲染为空字符串

动态改title用document.title还是操作DOM

直接赋值document.title就行，别去querySelector('title').textContent = ...——后者在多数浏览器里不生效，因为<title></title>是特殊节点，DOM操作不触发更新。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 正确写法：document.title = '新标题';
• 错误写法：document.querySelector('title').textContent = '新标题';（页面标题不变）
• 注意兼容性：所有现代浏览器都支持document.title读写，包括微信内置浏览器；但IE6–8下不能用document.title设置含Unicode的标题（比如中文），需确保页面编码声明一致

SEO和分享场景下title要避开哪些坑

标题不是越长越好，也不是越花哨越有用。搜索引擎通常只展示前50–60个字符，微信/QQ分享卡片则依赖<title></title>，但会截断过长内容并自动补省略号。

• 避免堆砌关键词：<title>Java教程_Java入门_Java编程_Java开发_免费学Java</title>会被判定为低质
• 不要用符号代替分隔：用|或-比»、•更稳妥，部分爬虫对Unicode分隔符解析异常
• 单页应用（SPA）必须手动更新：router.afterEach或useEffect里调用document.title，否则返回按钮、收藏后打开仍是初始标题

最常被忽略的一点：构建工具（如Vite、Webpack）的HTML插件默认会注入<title></title>，如果你在模板里写了，又在插件配置里又配了title字段，最终以插件配置为准——这时候看源码里的<title></title>其实是假的，得查构建后的产物文件。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！