李明教你制作404页面

当前位置：首页 » 好文分享 » 详情

李明教你制作404页面

什么是404页面

404页面就是当用户输入了错误的链接时，返回的页面。

404页面的目的

告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开。

很多开源系统包括CMS系统、Blog系统等不提供404页面或提供的404页面并未达到SEO的要求，这让网站的权威性大打折扣。
404页面该达到怎幺样的效果才符合SEO要求？

这里我们认识一些SEO时常见的Http状态码：

404：伺服器找不到指定的资源，请求的网页不存在(譬如浏览器请求的网页被删除或者移位，但不排除日后该链结有效的可能性);
410：请求的网页不存在(注意：410表示永久性，而404表示临时性);
200：伺服器成功返回请求的网页;
301：网址永久性重定向
302：网址临时性重定向

在搜索引擎看来最主要的应该是404错误了，404错误是代表网页不存在。当用户进入你域名下一个不存在的页面产生此错误，搜索引擎认为HTTP错误，该页面不存在，如果太多的此类错误将会受到搜索引擎的处罚。

网站如何制作404页面

当有人访问我们网站一个并存在的页面时，就会出现错误，也就是死链结。
大家经常看到以下错误页面：

如果大家访问一个网站出现这种情况，估计会马上关掉这个窗口，搜索引擎同样会对这个网站的印象不好。

这时，我们可以做一个404页面，告诉用户所请求的页面链结错误或不存在，引导用户去往其他页面而不是关闭窗口。

首先，上别的网站找一个比较漂亮的404页面,打开你喜欢李明博客的这个地址：www.域名.com/404.html。打开404页面后，右键–>页面另存为–>404.html,然后把里面的logo和链结改为你自己网站的就可以了

第二步，把改好的页面404.html上传到项目的根目录下，然后修改根目录下的.htaccess文件，在上面增加一行：ErrorDocument404/404.html(注意：直接在虚拟空间上修改，.htaccess的格式乱了，可以在本地修改好之后重新上传了一下)

最后，访问你自己网站不存在的页面，比如www.域名.com/aufhgfhlej(类似这样肯定不存在的)，如果访问后恩能跳转到新上传的404页面，就说明错误页面做好了!

在网站的运行过程中可能会面临很多问题，例如伺服器出错，用户请求的页面不存在，程式配置错误等等一系列的问题。在用户请求浏览网页碰到这些的时候会出现一些系统默认的错误页面，这样对于用户很不友好，同时对于搜索引擎来所更是不友好，更不要将404错误直接转向到网站首页，这将导致首页不被收录。

如果碰到困难，参考本站：错误网页、.htaccess文件。

.htaccess文件內容

RewriteEngine on
ErrorDocument 400 /404.html
ErrorDocument 401 /404.html
ErrorDocument 402 /404.html
ErrorDocument 403 /404.html
ErrorDocument 404 /404.html
ErrorDocument 405 /404.html
ErrorDocument 406 /404.html
ErrorDocument 407 /404.html
ErrorDocument 408 /404.html
ErrorDocument 409 /404.html
ErrorDocument 410 /404.html
ErrorDocument 411 /404.html
ErrorDocument 412 /404.html
ErrorDocument 413 /404.html
ErrorDocument 414 /404.html
ErrorDocument 500 /404.html
ErrorDocument 501 /404.html
ErrorDocument 502 /404.html
ErrorDocument 503 /404.html
ErrorDocument 504 /404.html
ErrorDocument 505 /404.html
order deny,allow

404错误网页內容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎光临李明博客</title>
<style type="text/css">
<!--
.STYLE1 {font-weight: bold}
.STYLE2 {font-weight: bold}
-->
</style>
</head>
<body>
<p class="STYLE1">欢迎光临李明博客www.blogs.hk</p>
<h2 class="STYLE2">1、如果你发现你所浏览的內容跳到当前页面，请重新搜索。 </h2>
<p class="STYLE2">2、通过<a  href="https://www.blogs.hk" kesrc="https://www.blogs.hk">https://www.blogs.hk</a>进行浏览。</p>
<p class="STYLE2">3、李明博客|liming,分享生活，分享健康知识，分享无忧，爱生活，爱自由！</a></p>

感谢您使用本站，如有疑问请<a href="https://www.blogs.hk/guestbook.html" kesrc="//www.blogs.hk/guestbook.html" target="_blank">联系我们</a>。</p>
<li>Copyright ©2012 <a href="https://www.blogs.hk" kesrc="https://www.blogs.hk">李明</a> | <a href="https://www.blogs.hk/m/" kesrc="//www.blogs.hk/m/" target="_blank">手机版</a> | <a href="https://www.blogs.hk/" kesrc="//www.blogs.hk/" target="_blank">电脑版</a> | <a href="https://www.blogs.hk/disclaimer.html" kesrc="//www.blogs.hk/disclaimer.html" target="_blank">免责声明</a></li>
<style type="text/css">
<script src="http://s21.cnzz.com/stat.php?id=4826225&web_id=4826225&show=pic" kesrc="http://s21.cnzz.com/stat.php?id=4826225&web_id=4826225&show=pic" language="JavaScript"></script>
<!--
.STYLE1{
color:#0000FF;
font-weight:bold;
font-size:25px}
.STYLE2{font-size:15px; line-height:25px}
body{
margin-top:88px;
margin-left:455px}
-->
</style>
</body>
</html>

打赏

打赏方式：

支付宝
微信
QQ红包

打开支付宝扫一扫

日期：2012年12月12日 08:52:46 星期三分类：好文分享浏览(64779) 评论(3)
本文地址：https://www.blogs.hk/post-35.html [百度已收录]
声明：本页信息由网友自行发布或来源于网络，真实性、合法性由发布人负责，请仔细甄别！本站只为传递信息，我们不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站删除！

上一篇：淘宝店装修代码分享
下一篇：珍珠奶茶