404页面必须在<title>和<h1>中显式包含“404”字样，确保搜索引擎与屏幕阅读器准确识别错误状态；仅用“页面未找到”或JS动态修改标题将导致语义丢失、索引失败与无障碍访问失效。
404页面的必须显式包含“404”字样
浏览器标签页标题是搜索引擎和屏幕阅读器识别错误页的第一信号。只写“页面未找到”或“哎呀出错了”会导致爬虫忽略状态语义，用户从搜索结果点进来也容易误判为首页。
正确做法是把数字 404 和关键词直接放进 <title> 标签里，且放在最前面或紧邻位置：
<title>404 - 页面未找到</title> <title>404 Not Found | 我的博客</title>
常见错误：
- 用 JavaScript 动态改
document.title—— 爬虫和部分无障碍工具读不到 - 标题里只有 emoji 或图标（如 ?）—— 无语义，不被索引
- 写成
<title>Oops!</title>—— 搜索引擎无法关联到 404 状态
为什么不能依赖服务器自动补全标题
有些 CMS 或静态生成器会尝试在 <head> 里注入通用标题，但 404 页面必须由开发者手动控制。因为：
立即学习“前端免费学习笔记（深入）”；
- 服务器返回 404 状态码时，不会修改 HTML 内容；它只负责发响应头
-
<title>是 HTML 文档的一部分，必须硬编码在404.html文件里 - 若用 Jekyll、Hugo 等生成器，要确保
404.html不被模板 layout 覆盖标题（例如 Jekyll 中需加permalink: /404.html和published: false）
标题内容还要配合 <h1> 保持一致
仅改 <title> 不够，主视觉标题也要同步体现状态。否则屏幕阅读器可能读到标题是“404”，但 <h1> 却是“欢迎光临”，造成逻辑断裂。
推荐结构：
<title>404 - 页面未找到</title> <main> <h1>404 页面未找到</h1> <p>您请求的地址不存在，请检查 URL 或返回首页。</p> </main>
注意点：
- 避免用
<h1>Page Not Found</h1>却配中文<title>—— 多语言站点应统一语言，比如都用中文或都用英文 - 不要在
<h1>里塞跳转按钮或 JS 交互文案（如“点击重试”），核心信息必须静态可读 - 如果用了前端路由（如 React Router），
404.html的<title>仍要写死，不能靠路由组件动态设置
本地测试时标题可能不生效？那是没走 HTTP 流程
双击打开 404.html 文件，浏览器地址栏是 file:// 协议，根本不会触发 404 状态码，<title> 虽然显示了，但毫无意义。
必须起一个本地 HTTP 服务验证：
- Node.js 用户：运行
npx serve -s .，然后访问http://localhost:5000/xxx - Python 用户：用
python3 -m http.server 8000，再手动访问一个不存在路径 - 确认 Network 面板中该请求的响应头含
HTTP/1.1 404 Not Found，且<title>正确渲染
标题不是装饰，它是错误页能否被正确识别的锚点。很多人花时间做动画和 SVG，却漏掉这一行代码，结果整个 404 页面对 SEO 和可访问性来说等于不存在。
