404错误是“Not Found”(未找到)的HTTP状态码,当用户访问服务器上不存在的URL时触发,一个友好的自定义404页面可以极大地提升用户体验,而不是显示默认的生硬错误提示。
设置404页面主要分为两个步骤:
1、创建自定义404页面:设计一个友好的HTML页面。
2、配置Web服务器:告诉服务器当出现404错误时,使用你创建的页面进行响应。
下面我将针对最主流的两种Web服务器(Nginx 和 Apache)以及通过CDN/对象存储的方式,分别说明如何配置。
你需要设计一个HTML页面,这个页面应该友好地告知用户页面不存在,并提供导航、搜索或返回首页的选项。
创建一个名为404.html
的文件,并将其上传到你的网站根目录(例如/usr/share/nginx/html/
或/var/www/html/
)。
可以很简单:
<!DOCTYPE html> <html> <head> <title>页面找不到啦 - 我的网站</title> </head> <body> <h1>抱歉!您访问的页面不存在</h1> <p>可能是地址输入错误,或者页面已被移除。</p> <a href="/">返回首页</a> <!-- 还可以添加搜索框、网站地图链接等 --> </body> </html>
1、找到配置文件:
Nginx的配置文件通常位于/etc/nginx/nginx.conf
,或者更常见的做法是在/etc/nginx/conf.d/
或/etc/nginx/sites-enabled/
目录下有一个针对你网站的配置文件(如your-site.conf
)。
2、编辑配置文件:
使用文本编辑器(如vim
或nano
)打开对应的配置文件,在server { ... }
块中,添加或修改error_page
指令。
server { listen 80; server_name yourdomain.com; # 你的域名 root /usr/share/nginx/html; # 你的网站根目录 index index.html index.htm; # 自定义错误页面配置 error_page 404 /404.html; location = /404.html { internal; # 表示这个位置只能由内部请求访问,用户不能直接访问 } # ... 其他配置 ... }
error_page 404 /404.html;
:这行代码告诉Nginx,当发生404错误时,返回网站根目录下的404.html
文件给用户。
location = /404.html { internal; }
:这是一个安全性和最佳实践,它确保用户不能通过直接访问http://yourdomain.com/404.html
来看到你的404页面,只有在真正发生错误时才会显示。
3、检查配置并重启Nginx:
- 测试配置文件语法是否正确:
sudo nginx -t
- 如果测试成功,重新加载Nginx以使配置生效:
sudo systemctl reload nginx # 或者 # sudo service nginx reload
1、找到配置文件:
Apache的配置文件通常位于/etc/apache2/apache2.conf
或/etc/httpd/httpd.conf
,对于站点特定的配置,通常在/etc/apache2/sites-enabled/000-default.conf
或类似文件中。
2、编辑配置文件:
在<VirtualHost *:80> ... </VirtualHost>
块中,使用ErrorDocument
指令进行配置。
<VirtualHost *:80> ServerName yourdomain.com # 你的域名 DocumentRoot /var/www/html # 你的网站根目录 # 自定义错误页面配置 ErrorDocument 404 /404.html # ... 其他配置 ... </VirtualHost>
ErrorDocument 404 /404.html
:这行代码告诉Apache,当发生404错误时,返回网站根目录下的404.html
文件。
3、检查配置并重启Apache:
- 检查配置语法(可选):
sudo apache2ctl configtest
- 重启Apache服务以使配置生效:
sudo systemctl reload apache2 # 或者 # sudo service apache2 reload
场景三:使用CDN或对象存储(如阿里云OSS、腾讯云COS)
如果你的网站是纯静态的,并且直接托管在CDN或对象存储上,配置则更为简单,通常不需要操作云主机。
1、创建404页面:同样,先准备好404.html
文件,并上传到你的存储桶(Bucket)的根目录。
2、在控制台配置:
阿里云OSS:进入Bucket ->基础设置 ->静态页面 ->错误页面,设置“404”指向的页面为404.html
。
腾讯云COS:进入Bucket ->基础配置 ->错误文档,设置“错误文档”为404.html
。
其他CDN(如Cloudflare):在CDN的控制台中,通常也有设置自定义错误页面的选项。
这种方式下,当访问不存在的文件时,CDN或OSS会自动返回你设置的404.html
页面。
完成配置后,一定要进行测试:
1、 打开浏览器,访问你网站上一个肯定不存在的页面,例如http://yourdomain.com/this-page-does-not-exist.html
。
2、 检查是否显示了你自定义的404页面。
3、 使用浏览器开发者工具(按F12),切换到Network(网络)标签页,重新访问那个不存在的页面,查看响应的HTTP状态码应该是404,而不是200,这一点非常重要,因为如果错误配置(例如通过重定向),可能会返回200状态码,这对SEO不友好。
确保返回正确的HTTP状态码如上所述,自定义页面必须伴随着404状态码,而不是200,这样搜索引擎才知道这个页面不存在,不会将其编入索引。
提供有帮助的内容在404页面上放置网站Logo、主导航链接、搜索框,帮助用户找到他们想要的内容。
设置几秒后自动跳转可以使用HTML的<meta>
标签或JavaScript设置5秒后自动跳转回首页。
通过以上步骤,你就可以轻松地为你的云主机上的网站设置一个友好且专业的自定义404页面了。
文章摘自:https://idc.huochengrm.cn/zj/14463.html
评论