N004 私人订制Error Pages



网站的开发即使再小心翼翼也难免会有疏漏,提供一些备选方案可以提升网页的可用性和用户体验。比如图片的alt属性就是在图片丢失的情况下用替换文本来改善阅读体验。

错误页面(error pages)也是一种类似的存在。尽管在站点中出现的频次并不高,可是页面一旦出现错误,它的重要性将在一瞬间体现出来。在介绍错误页面制作方法之前,需要先了解一下状态代码的分类。

HTTP状态代码

当用户通过浏览器向服务器发出某页面的访问请求时,服务器会向用户返回一个HTTP状态码,该状态码提供了关于请求的相关信息。最常见的状态码就是404和503了:

  • 404:请求的页面不存在。经历过诸如论坛删帖等页面离奇失踪事件的同学一定不会陌生
  • 503:服务器暂时不可用。One Piece(安利时刻:鼠绘漫画网)周四更新时服务器瞬间就过载了,那时候最心疼的就是F5

HTTP状态码是很庞大的家族:1xx系列代表临时响应,2xx系列代表成功处理,3xx系列代表已重定向,4xx系列(最庞大)代表请求错误,5xx系列代表服务器错误。完整的状态代码可以参考Google的一篇说明。

制作页面

由于error pages本质上仍然是HTML页面,因此制作过程就是重新写一个...当然不用这么麻烦!重新做不必要的轮子是最大的资源浪费。这里重磅推荐一个1分钟产出报错页面的在线工具:

Better Error Pages

这个网站提供3种风格的模板,3种页面类型(404,503,以及maintanence维护页),以及页面元素和背景颜色的微调控制,基本涵盖了日常报错页面的核心需求。操作过程也极其简单,填写邮箱(供用户报告错误以及工具更新提醒)和正确的域名就OK了。点击几次下一步后,就可以下载已经做好的HTML文件了。下面是我的404页面:

404
404页面

真切的感受一下404页面的动态效果吧(由于域名下不存在的页面会报错404,于是我就瞎写了一个URL):酷炫的展示时间到了

参考文章

  1. Search Console Help from Google, 完整的HTTP状态代码及相关解释

评论