404页面需明确告知问题、降低挫败感并提供3种以上可信跳转选项。用<main role="alert">语义化结构呈现用户可理解的场景描述，补充简短原因，提供首页、上一页（条件显示）、热门栏目等返回选项，并聚焦搜索框；禁用自动跳转与弹窗；服务端必须返回真实404状态码。
死链接触发404状态时，不能只放一句“页面未找到”，而要主动帮用户重建路径。核心是：明确告知问题、降低挫败感、提供3种以上可信跳转选项，并确保搜索引擎能正确识别这是错误页而非有效内容。
用语义化结构讲清发生了什么
在 <main role="alert"> 中放置标题和说明文案，比如“您访问的页面可能已被移除或重命名”。避免模糊表述如“出错了”或“无法加载”。屏幕阅读器会立即播报 role="alert" 内容，所以第一句话必须包含关键信息——不是“404”，而是用户能理解的场景描述。正文补充一句简短原因：“该链接可能已过期、拼写有误，或内容已调整位置。”
提供上下文相关的返回选项
不要只放一个“返回首页”按钮。建议并列呈现：
- 返回首页（location.href = "/"）
- 回到上一页（仅当 document.referrer 属于本站且非空时显示）
- 查看最新文章或热门栏目（跳转至 /blog 或 /topics）
- 聚焦到站内搜索框（document.getElementById('search').focus()）
所有按钮使用 onclick 触发，不依赖 history.pushState，兼容 iOS Safari 等对 popstate 不敏感的环境。
立即学习“前端免费学习笔记（深入）”；
视觉与交互缓解用户情绪
用轻量动效替代沉重提示：比如一个缓慢旋转的 SVG “404” 数字，或背景中几颗缓慢飘落的粒子（Canvas 实现，仅现代浏览器启用）。文字颜色对比度不低于 4.5:1，确保可读性。避免自动跳转、倒计时或弹窗，这些会打断用户控制感。底部可加一行小字：“需要帮助？联系客服”，保持出口开放。
务必让服务端返回真实 404 状态码
如果 Nginx 配置了 error_page 404 /404.html 却返回 200 OK，搜索引擎会把死链当作正常页面持续索引。正确做法是在 location 块中加 internal;，并确认响应头含 Status: 404 Not Found。本地验证用：curl -I https://yoursite.com/nonexistent，看第一行是否为 404。静态站点如 Vite 或 Hugo 也需对应配置服务器行为，不能仅靠前端渲染一个“长得像404”的页面。
