静态网页的404.html必须放在根目录且命名为404.html，GitHub Pages自动支持但限于绑定路径，Netlify/Vercel需配置重定向规则，页面需兼顾SEO与离线可用性。

静态网页没有后端，404 页面不能靠服务器动态返回，但只要文件存在、路径正确、被服务器识别，就能生效——关键不在“怎么写”，而在“放哪”和“怎么让服务器用它”。

你的 404.html 文件必须放在网站根目录

这是最常踩的坑：很多人把 404.html 放在子目录（比如 /pages/404.html）或本地测试时双击打开，结果 404 始终不触发。

• 静态托管服务（如 GitHub Pages、Vercel、Netlify、Cloudflare Pages）默认只认根目录下的 404.html
• 本地用浏览器直接双击打开 file:// 协议，根本不会触发 404（没有 HTTP 状态码概念），必须通过本地服务器预览（如 npx serve 或 VS Code Live Server）
• 文件名必须严格是 404.html，不是 error404.html、404.htm 或带大小写混用（某些服务器区分大小写）

GitHub Pages 自动支持，但有隐藏限制

GitHub Pages 不需要额外配置，只要根目录有 404.html 就会自动接管所有 404 请求——但仅限于你绑定的域名或 github.io 子路径下。

• 如果你用的是项目站点（username.github.io/repo），404.html 只对 /repo/xxx 路径有效；访问 /other 这类非本项目路径，仍会跳 GitHub 默认 404
• 自定义域名下，404.html 生效；但若 DNS 解析异常或证书错误，用户根本到不了页面，自然也看不到你的 404.html
• 页面内链接建议用相对路径（如 ./index.html），避免硬编码 https://yoursite.com/ 导致离线失效

Netlify / Vercel 需要明确声明重定向规则

这些平台默认不自动 fallback 到 404.html，尤其当使用了前端路由（如 React Router）时，必须显式配置 404 行为。

立即学习“前端免费学习笔记（深入）”；

• Netlify：在根目录加 _redirects 文件，内容写一行：

  / * /404.html 404

• Vercel：在根目录加 vercel.json，写

  {
    "rewrites": [{ "source": "/(.*)", "destination": "/404.html" }]
  }

  ——但注意这会覆盖所有 404，包括真实缺失的资源（如图片、CSS），更稳妥的是只重写 HTML 路由：

  {"rewrites": [{ "source": "/(.+)", "destination": "/404.html" }]}

  ，再配合 cleanUrls: true
• 如果用了 index.html 的 history 模式路由，别把 404.html 当作兜底页来处理所有路径，否则真实 404 资源请求也会返回 HTML，导致控制台报错却没提示

HTML 内容本身要兼顾可用性与 SEO

404.html 是纯静态文件，但用户可能从搜索引擎点进来，也可能输错 URL，页面得自己“说清状况”。

• 必须包含 ，否则搜索引擎可能误判为首页重复
• 加一个明确的

  Page not found

  ，别只靠 CSS 隐藏文字或用图片替代
• 提供至少一个有效导航：回到首页的链接（Go home）、搜索框（前端 JS 实现，不依赖后端）、或 Sitemap 链接
• 避免在 404.html 中加载外部 JS/CSS（如统计脚本、CDN 字体），否则网络异常时页面可能白屏或样式崩溃

真正难的不是写个好看的 404.html，而是确保它在各种部署环境里被正确识别——不同平台对“404 响应”的解释逻辑差异很大，同一份代码在 GitHub Pages 上好使，在 Netlify 上可能完全不触发，问题往往出在重定向配置或路径约定上。

# css  # react  # html  # js  # 前端  # git  # json  # go  # html5  # github  # seo  # 编码  # 浏览器  # 后端 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 浅谈javascript alert和confirm的美化  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  微信小程序 闭包写法详细介绍  网站制作软件有哪些,制图软件有哪些？  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  Laravel的辅助函数有哪些_Laravel常用Helpers函数提高开发效率  在线制作视频网站免费,都有哪些好的动漫网站？  创业网站制作流程,创业网站可靠吗？  北京网站制作的公司有哪些,北京白云观官方网站？  linux写shell需要注意的问题(必看)  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  如何撰写建站申请书？关键要点有哪些？  如何用搬瓦工VPS快速搭建个人网站？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  javascript基于原型链的继承及call和apply函数用法分析  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  油猴 教程,油猴搜脚本为什么会网页无法显示？  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  如何快速搭建自助建站会员专属系统？  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  Laravel如何使用withoutEvents方法临时禁用模型事件  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  EditPlus中的正则表达式 实战(1)  如何获取PHP WAP自助建站系统源码？  如何用好域名打造高点击率的自主建站？  JS经典正则表达式笔试题汇总  长沙企业网站制作哪家好,长沙水业集团官方网站？  简历没回改：利用AI润色让你的文字更专业  七夕网站制作视频,七夕大促活动怎么报名？  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  高端云建站费用究竟需要多少预算？  敲碗10年！Mac系列传将迎来「触控与联网」双革新  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  iOS正则表达式验证手机号、邮箱、身份证号等  微信小程序 scroll-view组件实现列表页实例代码  如何将凡科建站内容保存为本地文件？  Internet Explorer官网直接进入 IE浏览器在线体验版网址  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验