404页面必须包含语义化HTML结构：title中明确写“404”，h1显示“页面未找到”，配简短说明和返回首页链接；需通过服务器配置返回真实404状态码，而非仅靠HTML；同时添加meta robots="noindex"防止收录，并使用根路径引用资源确保可用。
404页面必须包含哪些HTML结构
浏览器和搜索引擎识别404页，核心不是样式，而是<meta http-equiv="status" content="404">或HTTP状态码本身——但纯静态HTML无法发HTTP头，所以重点落在语义和用户体验上。页面至少要有：<title></title>里写明“404”，<h1></h1>用“Page Not Found”或中文“您访问的页面不存在”，再加一段简短说明和返回入口。
如何让404页真正返回404状态码（而不是200）
光写个HTML文件没用：如果服务器仍返回200 OK，搜索引擎会把它当普通页面收录。必须由服务器配置触发真实状态码：
- Apache：在
.htaccess里加ErrorDocument 404 /404.html，并确保该路径下是真实文件 - Nginx：在server块中写
error_page 404 /404.html;，且/404.html需在root目录下可访问 - Vercel/Netlify等平台：通过
_redirects或vercel.json声明，例如/* /404.html 404
验证是否生效：打开开发者工具→Network标签，刷新一个不存在的路径，看响应状态码是不是404，不是200。
避免常见HTML陷阱
很多手写的404页反而引发新问题：
立即学习“前端免费学习笔记（深入）”；
- 相对路径资源（如
css/style.css）在深层路径下会404——全部改用根路径：/css/style.css - 忘记设置
<meta name="robots" content="noindex">，导致被搜索引擎缓存 - 用JavaScript跳转（如
window.history.back()）失败时无退路——必须提供显式链接：<a href="/">返回首页</a> - 字体、图片等资源未内联或托管在CDN，加载失败后页面只剩文字
一个够用的最小化示例（无CSS/JS依赖）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex"> <title>404 - 页面未找到</title> </head> <body> <h1>您访问的页面不存在</h1> <p>地址可能已更改，或输入有误。</p> <p><a href="/">← 返回首页</a></p> </body> </html>
这个版本不依赖任何外部资源，能跑在任意路径下，且对爬虫友好。复杂交互、动画、品牌视觉可以后续加，但别牺牲基础可用性——毕竟用户已经迷路了，别再让他们多点一次。
