必须让服务器真实返回404状态码，否则搜索引擎误判页面有效、用户无法看到自定义提示；需用curl验证HTTP/2 404响应，GitHub Pages要求根目录小写404.html，Vercel须配置errorPages，本地须HTTP服务测试，HTML结构须含<h1>404</h1>并提供分层可点击导航。
必须让服务器真实返回 404 状态码，否则所有优化都白做——搜索引擎会当页面正常存在，用户刷新也看不到你写的“页面找不到了”。
确认服务器真返回了 404 状态码
很多静态托管服务（比如 GitHub Pages、Vercel）默认把 404.html 当普通页面返回 200，这是最常被忽略的底层错误。
- 用
curl -I https://yoursite.com/xxx检查响应头，必须看到HTTP/2 404，而不是HTTP/2 200 - GitHub Pages：文件名必须是
404.html，且放在仓库根目录；子路径如/a/404.html不生效 - Vercel：不能靠
rewrites实现，得用errorPages配置或确保构建时生成了404.html并启用staticPageGeneration - 本地开发时，
file://协议下永远拿不到真实状态码，必须走 HTTP 服务测试（如npx serve）
用纯 HTML + CSS 写内容，别依赖 JS
JS 渲染的 404 页面在离线、禁用 JS 或首屏加载失败时就是空白页，等于没做。
- 主标题用
<h1>404</h1>，副标题用<p>页面找不到了</p>，避免只写英文Not Found - 用户刚访问的路径从
location.pathname读取，直接塞进<code>标签展示，帮助核对拼写 - 搜索框用原生
<form action="/search" method="GET"><input name="q"></form>，不绑submit事件 - 图标/主视觉优先用内联 SVG，避免外部资源加载失败导致留白
引导必须分层、可点击、不跳转失败
“返回上一页”按钮在从外站直接进入 404 时大概率触发 history.back() 失败；“回到首页”又解决不了用户原本想看的内容。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 第一层：明确显示当前请求路径（
location.pathname），加粗或高亮 - 第二层：3–4 个真实存在的高频链接，比如
/posts、/products、/help，全部用绝对路径，不用./或../ - 第三层：站内搜索表单，
action必须指向后端已实现的/search路由，别调 Algolia 或 Google Custom Search - 所有链接加
rel="noreferrer"，防止 Referer 泄漏；禁止用meta http-equiv="refresh"或 JSwindow.location自动跳转
服务端要记录原始请求信息
再友好的页面，如果服务端日志里没存 Referer 和完整 path，就无法区分是内部链接写错、还是爬虫扫废链。
- NGINX 日志格式中确保包含
$request_uri和$http_referer - Apache 的
CustomLog同理，别只记%r（请求行），漏掉来源 - 如果用了 CDN，需确认它是否透传原始
Referer；部分 CDN 默认清空，得手动配置 - 前端埋点无意义——404 请求根本不会执行 JS，所有日志必须在服务端响应前写入
最容易被跳过的是服务端日志字段和静态托管平台的状态码验证，这两项不做，其余设计全在给搜索引擎和缓存系统演戏。
