必须真实返回HTTP 404状态码，否则搜索引擎误收录为普通页面；需用curl -I或DevTools验证响应头，GitHub Pages等平台仅识别根目录小写404.html，HTML须语义化、内联CSS、禁用JS跳转与外部资源。
必须返回真实 404 Not Found 状态码，否则搜索引擎会把它当普通页面收录——这是所有 SEO 前提，其余全是补救。
服务器必须返回真实 404 状态码，不能是 200 或 302
本地双击打开 404.html 永远是 200，毫无意义。验证必须走真实 HTTP 请求：
- 用
curl -I https://yoursite.com/xxx，第一行必须是HTTP/1.1 404 Not Found - 在浏览器 DevTools → Network 中看该请求的 Status 列，不是“已加载”，而是明确显示
404 - GitHub Pages、Vercel、Netlify 默认支持，但只认根目录下严格小写的
404.html；写成404.htm、pages/404.html或带 BOM 的文件都会失效 - Apache 用户需在
.htaccess中加ErrorDocument 404 /404.html；Nginx 需在server块中配error_page 404 /404.html;，并确保location = /404.html未被 rewrite 覆盖
<title></title> 和 <h1></h1> 必须直写 “404” 文字
搜索引擎靠标签结构识别错误意图，不解析图片或 JS 渲染内容：
-
<title></title>写成<title>404 - 页面未找到</title>，不能是<title>Oops!</title> -
<h1></h1>必须是纯文本<h1>404 Not Found</h1>，不能用 SVG、Canvas 或 JS 插入 - 主内容必须包裹在
<main></main>里，或加role="main"，让屏幕阅读器跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止 Google 把它当有效页面抓取
链接和搜索框要真实可用，且不依赖 JavaScript
用户平均停留不到 8 秒，任何 JS 失效都会导致卡死或降级失败：
立即学习“前端免费学习笔记（深入）”；
- “返回首页”必须是
<a href="/" rel="nofollow">← 返回首页</a>，不是<button onclick="..."></button> - 搜索框用标准表单：
<form method="GET" action="/search"><input name="q" autofocus required></form>；后端需真实支持/search?q=xxx路由 - 避免
<meta http-equiv="refresh">或setTimeout自动跳转——干扰后退、损害无障碍体验 - 不要加“返回上一页”按钮：外链进来的
document.referrer可能为空或跨域，history.back()会白屏
CSS 必须内联，路径必须用根相对路径
外部资源加载失败时，404 页面会变白屏或只剩文字：
- CSS 全部写进
<style></style>标签，控制在 1KB 以内；禁用<link rel="stylesheet"> - 所有资源（如图标、字体）用根相对路径：
/img/404.svg，不是./img/404.svg—— 因为 404 可能发生在/blog/post/xxx这类深层路径下 - 字体栈写
font-family: -apple-system, sans-serif;，不引入 Web Font；字号用rem或clamp()保证高 DPI 屏可读 - 别加背景图、
@import、阴影或动效——它们会触发额外请求，增加失败概率
最容易被忽略的是日志联动：即使页面再友好，如果服务端没记录原始 Referer 和 request.path，你就永远不知道是内部链接写错、还是爬虫在扫废弃路径。
