最可靠方案是将404.html放根目录并配置服务器返回真实404状态码;Apache用ErrorDocument,Nginx用error_page,Vercel/Netlify自动识别但需命名规范,GitHub Pages仅支持根目录404.html且Jekyll需禁用渲染。

直接放一个 404.html 文件到网站根目录,再确保服务器返回真实 404 Not Found 状态码——这是唯一能被搜索引擎、爬虫和辅助技术识别的方案。其他所有“看起来像404”的做法(比如 JS 跳转、meta 刷新、双击打开)都不算数。
404.html 文件必须放对位置且命名严格规范
静态托管平台只认一个路径和文件名:/404.html,小写、无空格、无 BOM、无重定向别名。
- GitHub Pages、Vercel、Netlify、Cloudflare Pages 都只扫描项目根目录下的
404.html;写成404.htm、pages/404.html、ERROR404.HTML全部失效 - Git 提交前用
git ls-files | grep 404确认文件真在索引里(Windows 记事本可能偷偷加 BOM,导致渲染异常) - Jekyll 用户必须在
404.html开头加 front matter:---\npermalink: /404.html\npublished: false\n---,否则会被当成普通页面生成
服务器必须返回真实 404 状态码,不能是 200 或 302
本地双击打开 404.html 永远看不到效果——file:// 协议根本没有 HTTP 状态码。必须用 HTTP 服务验证。
- 本地测试:运行
npx serve -s .(注意-s会 fallback 到index.html,要测真实 404 得去掉该参数,或手动访问一个不存在路径如/xxx) - 线上验证:用
curl -I https://yoursite.com/nonexistent,第一行必须是HTTP/1.1 404 Not Found - Apache:在
.htaccess中加ErrorDocument 404 /404.html(路径以/开头) - Nginx:在
server块中加error_page 404 /404.html;,并确保location = /404.html可访问、未被rewrite覆盖 - SPA 应用(React/Vue):
location / { try_files $uri $uri/ /index.html; }这类 fallback 规则会吞掉所有 404,必须显式排除/404.html
HTML 结构里这四样不能少
404.html 不是炫技场,而是语义锚点——屏幕阅读器靠它判断上下文,Google 靠它决定是否索引。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记(深入)”;
-
<title>必须含 “404” 字样,例如<title>404 - 页面未找到</title>,否则搜索结果里点进来用户以为进了首页 -
<h1>必须直给事实,如<h1>404 Not Found</h1>,禁用图片/SVG 文本替代,也不要用 JS 动态插入 - 主内容区必须用
<main>包裹,或加role="main",让辅助技术跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">,防止被搜索引擎误收录为普通页面
CSS 和跳转必须零依赖、高可用
404 是异常路径,任何外部资源加载失败都可能导致页面空白或不可操作。
- CSS 最好内联进
<style>,控制在 1KB 内;避免外链styles.css失败后只剩白屏 - 所有按钮用
<a href="/"></a>,不是<button onclick="location.href='/'">—— 禁用 JS 时仍要可用 - 想加“回到上一页”?先判断
document.referrer是否同域且非空,否则按钮href设为#并置灰 - 文字与背景对比度 ≥ 4.5:1(比如
#333配#fff可以,配#eee不行),用 webaim.org/contrastchecker 验证
最容易被忽略的是:状态码永远由服务器决定,HTML 文件只是响应体。哪怕你把页面做得再漂亮,只要服务器没配 error_page 或 ErrorDocument,用户看到的仍是平台默认页,Google 也会把它当普通页面收录。


















