404页面代码教程：从状态码到全平台配置实战
从HTTP状态码到Apache、Nginx、WordPress三大平台，一套代码教程让404页面既诚实又好看。
404页面代码教程的核心只有两件事：状态码正确、页面文件到位。本文讲清404页面代码的三条核心要求，覆盖Apache、Nginx、WordPress三条配置路径，给出可直接复制的404.html模板，并用curl教你验证状态码。代码先行，设计随后，是本教程的全部逻辑。
01404页面的代码基础
404页面是HTTP 404状态码对应的错误页面，指服务器无法提供用户请求的信息时返回的页面。头条引擎力《技术性SEO内容优化》（2026年8月检索）将其归入技术性SEO的基础设施：页面可以没有，但错误响应必须规范。
在HTTP状态码体系中，404属于4xx客户端错误类。dtcpack《HTTP状态码全解》（2026年8月检索）显示，4xx表示"请求有误"，其中404专指"未找到"，与403禁止访问、410永久删除是三种不同语义。
从代码视角看，404页面由三层组成：服务器状态码、页面文件、展示内容。状态码由服务器配置决定，页面文件是一个HTML文档，展示内容是文档里的标题、文案与链接。
404页面的HTML基本结构只有几行：DOCTYPE声明、head区的字符集与标题、body区的提示文案。下面是最小可用的骨架：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面不存在 - 示例站</title>
</head>
<body>
<h1>404</h1>
<p>抱歉，您访问的页面不存在。</p>
</body>
</html>访问流程是单向的：请求进入服务器→服务器找不到资源→返回404状态码→同时输出404.html内容。先有状态码，后有页面，顺序不能颠倒。
独立站一旦域名或页面被错误引用，404页面就是用户与搜索引擎看到的唯一出口。这也是它值得单独写一篇代码教程的原因，详细概念可回看死链含义专题页。
补充一个容易混淆的点：404是"暂时找不到"，410是"永久删除"。dtcpack《HTTP状态码全解》（2026年8月检索）指出，Google对两者同样认可，语义上410更明确，适合内容彻底下线的场景。
与200、301、302对比：200表示正常返回、301表示永久重定向、302表示临时跳转，404只负责"没有这个资源"。状态码选错，搜索引擎对页面的解读就会跑偏。
学习404页面代码，最好的练习场是自己的服务器：本地搭建Apache或Nginx，配好一个404页再反复测试状态码，比看十篇教程都管用，测试命令见第11章。
404状态码的定义出自RFC 7231文档：服务器"没有找到与请求URI匹配的任何内容"dtcpack《HTTP状态码全解》（2026年8月检索）。理解这个定义，就不会把404与403、410混为一谈。
02404页面代码的核心要求
第一要求：返回正确的404状态码，而不是200。guangsuan《404页面自动跳转首页会被谷歌惩罚吗丨5个SEO避坑指南》（2026年8月检索）指出，把所有错误页统一跳转首页，搜索引擎会误判站点存在大量软404，轻则浪费抓取配额，重则触发算法惩罚。
底线来自官方：Google要求已删除的页面必须返回404或410 HTTP状态码Google搜索工作原理官方文档（2026年8月检索）。返回200的"伪404"会被Google视为软404，既不收录也不传递权重。
第二要求：页面文件必须真实存在。php.cn《怎么自定义Apache 4xx/5xx错误响应页面提升生产环境用户体验实战》（2026年8月检索）明确，文件须存在且不小于256字节，推荐统一放在/errors/目录管理。
第三要求：配置路径以/开头，相对于DocumentRoot解析php.cn（2026年8月检索）。路径写错，配置不生效，404页面就不会出现。
Apache的ErrorDocument指令支持三种写法：本地URL（/404.html）、外部URL、纯文本字符串。ionos《How to configure Apache to use custom error pages》（2026年8月检索）推荐优先使用本地URL，便于统一维护页面样式。
256字节的要求来自实践：过小的响应会被部分浏览器与代理服务器用默认错误页替换，导致自定义页面形同虚设php.cn（2026年8月检索）。页面文件应写足内容，而不是凑字节。
判断404配置是否生效还有个土办法：临时把页面文件改名，刷新错误页看是否回到默认样式；再改回文件名验证配置恢复，整个过程不超过一分钟。
独特观点①：404页面代码的第一行不是HTML而是"状态码"——页面再好看，只要返回200，对搜索引擎来说就是伪装，代码教程的第一课永远是状态码正确性。
三条要求可以浓缩成一句自检口令：状态码404、文件在、路径对。配置完成后逐一核对，比上线后再排查省事得多。
03Apache配置自定义404
Apache是使用最广的Web服务器之一，自定义404只需一个ErrorDocument指令。jindouyun《Apache配置中如何设置错误页面》（2026年8月检索）给出了两种落地方案：修改主配置文件，或使用.htaccess文件。
- 在网站根目录创建404.html文件，建议统一放在/errors/404.html。
- 打开Apache主配置文件：Debian/Ubuntu为/etc/apache2/apache2.conf，CentOS为/etc/httpd/conf/httpd.confyisu《Apache配置中如何设置自定义错误页面》（2026年8月检索）。
- 在配置文件中添加ErrorDocument 404 /404.html指令。
- 保存文件，重启Apache服务使配置生效。
- 用curl -I验证状态码（方法见第11章）。
# /etc/apache2/apache2.conf（Debian/Ubuntu）
# 或 /etc/httpd/conf/httpd.conf（CentOS）
ErrorDocument 404 /404.html
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html路径必须以/开头，相对于DocumentRoot解析；文件小于256字节时，Apache可能不会输出自定义内容php.cn（2026年8月检索）。
.htaccess 方式（虚拟主机场景）
虚拟主机或托管环境下无法修改主配置文件时，用.htaccess快速启用php.cn（2026年8月检索），前提是站点已开启AllowOverride。
# 网站根目录下的 .htaccess 文件
ErrorDocument 404 /404.html
ErrorDocument 403 /403.htmlionos《How to configure Apache to use custom error pages》（2026年8月检索）补充：自定义错误页除404外，还可覆盖403、500等常见状态码，页面样式应与主站保持一致。
重启命令：Debian/Ubuntu用systemctl restart apache2，CentOS用systemctl restart httpd；改动.htaccess则无需重启。
配置前可用apachectl -t检查语法，语法错误会导致服务拒绝启动，这是Apache运维的固定动作。
共享主机普遍默认开启AllowOverride All；若.htaccess方式不生效，先检查虚拟主机配置里的AllowOverride值，这是该方式最常见的失效原因ionos（2026年8月检索）。
Apache错误页还支持按目录生效：在子目录放.htaccess只对该目录及其子目录的404生效，适合多站点共用一台服务器的场景，配置隔离更清晰。
04Nginx配置自定义404
Nginx配置自定义404的核心是一条error_page指令。DigitalOcean《How To Configure Nginx Custom Error Pages》（2026年8月检索）建议把错误页放在站点根目录，并用location精确匹配，避免递归循环。
- 在站点根目录创建404.html文件，如/var/www/example/404.html。
- 打开站点配置文件，如/etc/nginx/sites-available/example.com。
- 在server块内添加error_page 404 /404.html;指令。
- 用location = /404.html { internal; }精确匹配该文件。
- 执行nginx -t测试配置语法。
- 执行systemctl reload nginx重载配置。
server {
listen 80;
server_name example.com;
root /var/www/example;
error_page 404 /404.html;
location = /404.html {
internal;
}
}error_page后的URL以/开头，指向站点根目录下的文件；internal标记可防止用户绕过错误场景直接访问该文件DigitalOcean（2026年8月检索）。
error_page 404 /404.html;中的404可写成多个状态码，如error_page 403 404 /404.html;，一条指令覆盖多个错误，配置更精简DigitalOcean（2026年8月检索）。
Nginx没有.htaccess的等价物，配置文件是唯一入口yisu《Nginx配置错误页面》（2026年8月检索），这与Apache的托管场景差异最大。
每次修改配置后必须先跑nginx -t，语法错误会导致Nginx拒绝启动。测试通过后reload即可，无需重启进程。
配置完成后访问一个不存在的URL，应看到自定义页面且响应头为404状态码，验证方法见第11章。
反向代理场景下，Nginx默认不接管后端返回的404，需在location中开启proxy_intercept_errors on，error_page才会生效yisu《Nginx配置错误页面》（2026年8月检索）。
error_page既可用URL，也可用命名location（如error_page 404 = @fallback;）实现更复杂的兜底逻辑，但普通站点用URL方式已足够，越简单越不易出错。
05WordPress 404页面
WordPress把404页面内置在主题里：只要主题目录存在404.php，请求不存在的URL时WP会自动加载它，无需任何服务器配置。
- 进入主题目录wp-content/themes/你的主题/，新建或覆盖404.php。
- 复制首页的get_header()与get_footer()，保持全站视觉一致。
- 中间写入提示文案、搜索框与返回首页链接。
- 保存后访问任意不存在的URL预览效果。
<?php get_header(); ?>
<div class="page-404">
<h1>404 - 页面不存在</h1>
<p>您访问的页面可能已被删除或地址有误。</p>
<a href="<?php echo home_url('/'); ?>">返回首页</a>
<?php get_search_form(); ?>
</div>
<?php get_footer(); ?>WordPress返回404状态码是自动的，主题只需负责展示；前提是不要用重定向插件把所有404跳走，那会制造软404guangsuan（2026年8月检索）。
使用子主题时，子主题目录下的404.php优先于父主题，覆盖直接放在子主题即可，无需改动父主题文件。
页面构建器类主题（如Elementor、Divi）通常自带404模板编辑入口，可在后台"模板"菜单中直接可视化修改。
缓存插件（如WP Super Cache、W3 Total Cache）可能把404缓存成200，启用后务必用curl复查状态码。
需要更精细控制时，可用template_redirect钩子在PHP中自定义404响应，但钩子内必须调用status_header(404)保持状态码正确，否则又会退回软404。
WordPress多站点（Multisite）场景下，各子站共用主题的404.php；如需按站点区分，可在404.php内用get_current_blog_id()判断站点ID，再输出不同文案。
404.php的文件名不能改动，主题切换后旧主题的404.php即失效；用子主题时，父主题更新不会覆盖子主题里的404.php，这是官方推荐子主题的原因之一。
06静态站/其他平台404
纯静态站与代码托管平台的404实现最接近：一个404.html文件加上服务器指向。下表是主流平台的实现方式对比：
| 平台 | 404实现位置 | 是否需要服务器配置 |
|---|---|---|
| Apache | ErrorDocument 404 /404.html指令 | 是（配置文件或.htaccess） |
| Nginx | error_page 404 /404.html;指令 | 是（nginx配置文件） |
| WordPress | 主题目录404.php模板 | 否 |
| Shopify | templates/404.liquid文件 | 否 |
| GitHub Pages | 仓库根目录404.html | 否 |
GitHub Pages对根目录的404.html是默认支持的，无需任何配置；Netlify、Vercel同理，把404.html放进发布目录即可。
Shopify主题自带404页面，路径为templates/404.liquid，可在Shopify后台"在线商店→代码编辑器"中修改，无需服务器配置。
其他常见CMS的404实现路径各有不同：Magento在后台配置404页面CMS页；Wix在站点设置中替换404页；OpenCart修改catalog/controller/error/not_found.php。
对象存储与CDN场景（如阿里云OSS、腾讯云COS）同样支持自定义404页：在存储桶的"自定义错误页面"里指定404.html即可。
部署404.html前先确认根路径：GitHub Pages与Netlify都要求文件放在发布根目录；若站点按子目录部署，需把404文件放到对应目录或按平台规则调整。
Shopify的404.liquid由Dawn等默认主题提供，二开时注意liquid语法：{{ '404' | t }}这类本地化写法可自动适配多语言店铺，无需为每个语言写一个模板。
07404页面HTML代码模板
下面是一份可直接复制使用的404.html完整代码，包含标题、提示文案、搜索框与返回首页链接，注释标注了每部分的作用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 关键第1行：告诉搜索引擎不要收录本错误页 -->
<meta name="robots" content="noindex,follow">
<title>404 页面未找到 - 示例站</title>
<style>
body{font-family:system-ui,sans-serif;text-align:center;
padding:80px 20px;background:#fff}
h1{font-size:72px;color:#333;margin:0}
p{color:#666;font-size:16px}
.btn{display:inline-block;margin-top:20px;padding:12px 24px;
background:#07C160;color:#fff;border-radius:8px;
text-decoration:none}
input[type=text]{padding:10px;width:240px;border:1px solid #ccc;
border-radius:6px}
</style>
</head>
<body>
<h1>404</h1>
<!-- 提示文案：告诉用户发生了什么 -->
<p>抱歉，您访问的页面不存在或已被移除。</p>
<!-- 搜索框：帮用户找回内容 -->
<form action="/search" method="get">
<input type="text" name="q" placeholder="输入关键词搜索">
<button type="submit">搜索</button>
</form>
<!-- 返回首页链接：留住用户 -->
<p><a class="btn" href="/">返回首页</a></p>
</body>
</html>模板要点一：<meta name="robots" content="noindex,follow">告诉搜索引擎不收录本页，但继续抓取页内链接。
模板要点二：搜索框form用GET方式提交，action指向站内搜索地址，既服务用户，也方便搜索引擎理解站点结构。
模板要点三：返回首页链接使用站内相对路径，避免把用户引导到外部网站。
独特观点②：404页面的代码哲学是"少即是多"——纯HTML+内联CSS的轻量404页（2KB内——CSDN ask）比堆满脚本的重404页更符合SEO与用户体验双重要求。
体积是硬指标：纯HTML加内联CSS的轻量404页控制在2KB以内CSDN ask（2026年8月检索），比堆满JavaScript的重页面加载更快、更稳、更利于爬虫读取。
本模板聚焦功能完整；想要视觉更出彩的404页面代码，见好看代码专题页。
使用模板时替换三处占位内容：title里的站名、提示文案的语种与语气、搜索框的action地址；其余结构可直接沿用，无需改动。
模板未引入任何外部资源（字体、图片、脚本），加载不依赖第三方：即使主站CDN故障，404页也能正常渲染，这是"少即是多"在代码层的落地。
把模板另存为404.html前，先在本机用浏览器打开预览，确认无乱码；文件编码务必保存为UTF-8，否则中文提示在部分服务器上会显示为乱码。
模板里h1直接写"404"两个字，是为了让用户一眼确认"页面不存在"；提示文案与搜索框放在h1之后，爬虫也能顺着标题理解页面语义。
08404页面SEO要素
状态码正确是底线。返回200的404页面对Google是软404guangsuan（2026年8月检索），页面再精致也不会进入索引，还会拖累全站信任度。
页内导航链接引导爬虫回到站内：返回首页、站内搜索、热门栏目，都是给爬虫指路的结构化出口。
避免404页面被索引：在head区加入noindex指令，同时禁止搜索引擎收录搜索框的参数URL。
<meta name="robots" content="noindex,follow">
<!-- 服务器端等价写法（响应头） -->
X-Robots-Tag: noindex, follow页面响应速度同样要快：404页超过3秒加载，用户会直接关掉浏览器，爬虫也会降低对该站的抓取频率。
一个被反复验证的事实：多数用户遭遇404后会在10秒内离开dtcpack《HTTP状态码全解》（2026年8月检索），页内链接是留住他们的唯一代码手段。
404页的title建议写成"404 页面未找到 - 站名"格式，既交代状态又保留品牌词；h1只写"404"或提示文案，不堆砌关键词。
404页面不需要设置canonical标签：它本身就是错误响应页，加canonical反而可能让搜索引擎困惑头条引擎力《技术性SEO内容优化》（2026年8月检索）。noindex才是正确的索引控制手段。
Googlebot对404页面的抓取频率会自然下降，这是正常现象，不代表站点被惩罚；真正要警惕的是覆盖率报告中突然暴增的404条目Google搜索工作原理官方文档（2026年8月检索）。
404页面的链接尽量使用内链且文案明确："返回首页""热门文章"这类锚文本既服务用户，也让爬虫理解页面出口结构，堆砌关键词的锚文本反而多余。
404页面也可以顺便做品牌输出：在页面底部放一句品牌slogan或联系入口，把一次错误访问变成一次品牌记忆，代码上只是多一行文字。
404页面还要适配移动端：Google早已采用移动端优先索引，错误页在手机上的布局混乱同样会拉低体验评分，模板里的text-align:center已做基础适配。
设计层面的规范（配色、文案、转化引导）见页面设计专题页，本文聚焦代码层。
09404代码常见错误
以下四个错误是404页面代码最常见的事故现场，每个都用红色警告标出：
四条错误的共同点：都发生在"配置完就结束"的侥幸心理上。多花两分钟验证，能省下几个月的心病。
还有两个隐蔽陷阱：CDN把404缓存成200、伪静态rewrite规则把404重写回首页，两者都会让状态码失真，需在测试环节重点排查。
以上错误都可被工具提前拦截：Screaming Frog与Xenu能直接输出每条URL的状态码，把404清单与配置对照检查，一次就能定位问题源头，操作见扫描工具专题页。
真实案例：某独立站上线半年后关键词集体下滑，排查发现CDN把所有404缓存成200长达三个月，等于给搜索引擎输送了大量软404，修复CDN规则后两个月才恢复。教训：状态码必须层层验证。
- 配置后立即用curl -I验证状态码为404
- 确认页面文件存在且不小于256字节
- 测试多个不存在的URL路径
- 检查GSC覆盖率报告确认无软404
10404页面测试与验证
配置完成不等于配置正确，验证环节才是代码教程的收尾。三步验证法如下：
- 用curl查看HTTP响应头，确认状态码为404。
- 浏览器访问不存在的URL，确认自定义页面正常渲染。
- 在Google Search Console覆盖率报告中核对URL状态。
# 只取响应头，看状态码
curl -I https://www.example.com/不存在的页面
# 只看状态码数字
curl -o /dev/null -s -w "%{http_code}\n" https://www.example.com/不存在的页面HTTP/2 404
server: nginx
date: Sun, 02 Aug 2026 10:00:00 GMT
content-type: text/html
content-length: 1024
...curl -I只取响应头；想同时看页面内容，去掉-I改用curl -s。看到HTTP/2 404或HTTP/1.1 404即代表配置成功。
浏览器测试注意清除缓存：部分CDN或浏览器会把404缓存成200，使用无痕窗口更可靠。
GSC覆盖率报告会分类显示"找不到（404）"条目头条引擎力（2026年8月检索），正常数量的404无需处理，异常暴增才需要排查。
在线检测工具（如httpstatus.iodtcpack（2026年8月检索））输入URL即可看到完整状态码与响应头，适合不会用命令行的场景。
验证通过后建议把curl命令写进上线检查清单：每次改版、换服务器、迁移域名后重跑一遍，确保404配置没有被新环境覆盖。
生产环境建议同时监控access.log日志：按状态码聚合统计，404占比异常升高往往意味着URL改版或外链失效，与扫描工具互为印证。
线上验证时优先测试三层路径：根路径下的随机URL、深层目录下的随机URL、带查询参数的URL，三层都返回404，配置才算完整覆盖。
GSC的"网页索引编制"报告支持按404筛选并导出清单，配合服务器日志交叉比对，能区分"真实404"与"软404"，是大型站点验证的进阶动作。
11常见问题 FAQ
Q404页面代码怎么写？
先保证状态码正确：Apache用ErrorDocument 404 /404.html，Nginx用error_page 404 /404.html，WordPress用主题404.php。页面文件用纯HTML编写，包含标题、提示文案、搜索框与返回首页链接，完整模板见本文第7章。
Q404页面怎么设置？
三步：创建404.html文件→在服务器配置中指向该文件→用curl -I验证返回404状态码。WordPress等CMS直接编辑主题模板即可，无需服务器配置。
Qnginx 404页面怎么配置？
在server块内添加error_page 404 /404.html;，再用location = /404.html { internal; }精确匹配，保存后执行nginx -t测试语法，最后systemctl reload nginx重载。配置详见本文第5章。
Qapache 404页面怎么配置？
在apache2.conf或httpd.conf中写入ErrorDocument 404 /404.html，路径以/开头、相对于DocumentRoot，文件须存在且不小于256字节；虚拟主机场景可在.htaccess中写同一指令。配置详见本文第4章。
Qwordpress 404页面怎么做？
在主题目录wp-content/themes/你的主题/下新建或覆盖404.php，使用get_header()与get_footer()保持全站一致，中间写入提示文案、搜索框与返回首页链接。WordPress自动返回404状态码。
Q404页面返回什么状态码？
必须返回HTTP 404 Not Found。Google官方要求已删除的页面返回404或410；返回200的页面会被判定为软404，浪费抓取配额并可能触发惩罚guangsuan（2026年8月检索）。用curl -I可查看响应头。
Q404页面文件要多大？
Apache要求页面文件不小于256字节，否则可能被默认错误页替换php.cn（2026年8月检索）；从SEO与性能角度，纯HTML加内联CSS的轻量404页控制在2KB内最理想。
Q404页面可以放统计代码吗？
可以。GA4或百度统计代码可正常添加，用于观察404页的访问量与来源；但统计代码建议异步加载，不要拖慢错误页的响应速度。
12内链导读
本专题共8个页面，围绕独立站死链接404形成完整知识闭环，从本页出发继续探索：
独立站死链接404总览：定义、影响、处理与检测全景。
→死链含义死链的类型、成因与软死链的判别标准。
→检测工具主流死链检测工具清单与选型建议。
→清除死链301与410的选择、分诊与处理落地。
→扫描工具全站扫描的参数配置与报告解读。
→好看代码视觉更出彩的404页面代码案例。
→页面设计404页面的配色、文案与转化设计规范。
代码教程解决"404页面怎么写"；好看代码解决"怎么写更好看"；页面设计解决"怎么设计更留人"，三页连读效果最佳。
配置过程中发现死链，先看检测工具，再按清除死链的方法处理，链路完整。
首页汇聚全部8个页面的入口与专题全景，适合第一次访问的读者从首页开始；本页的好看代码与页面设计则是代码教程的自然延伸。
收藏本页即可随时回查配置代码：把本文的Apache、Nginx、WordPress三段代码存入自己的代码片段库，下次建站直接调用，能省下重复搜索的时间。
13结语
404页面代码教程到此结束。记住核心顺序：状态码在前，文件在后，设计最后。三者齐备，404页面才真正合格。
404页面的第一行代码永远是状态码——这一行写错，后面全是徒劳。这也是本教程反复强调"先诚实、后好看"的原因。
本文配置方法与数据参考php.cn、DigitalOcean、ionos、jindouyun、yisu、guangsuan、dtcpack、头条引擎力等资料多来源（2026年8月检索），配置前建议以各平台官方文档为准。
一套规范的404页面代码，是独立站SEO里投入产出比最高的优化之一：一个文件、一行配置、一次验证，就能同时守住用户信任与搜索引擎信任两道关口。
本专题其余页面继续补全404知识版图：死链含义讲认知、检测工具讲发现、清除死链讲处理、扫描工具讲监控，代码教程只是其中的技术一环。
本文观点仅代表本站：配置参数以Apache与Nginx官方文档为准，各版本间指令略有差异，升级服务器前请先查阅对应版本手册。
本站由谷歌SEO优化师远哥主理（抖音号 77859932487，8年谷歌SEO优化经验，700+粉丝、40+作品，口号"不给广告商赚1分钱"）。关于404页面代码教程的更多内容，请继续阅读死链含义、清除死链等专题页；也欢迎添加下方微信，免费获取完整知识库数据包。