网站404页面设置技巧与404页面设置方法

本文发表于2022-06-11 来自于 SEO 栏目

对于网站建设来说如何找到这方面的平衡点就需要用到404页面。搞定一个404页面对于网站建设者来说并不是一件很难道时候，但是想要设计出来一款自然且十分有用的404页面，还是需要下一番功夫。那么极简SEO就来说说404网页设计技巧。

设置方法
创建一个名为404.html的文件，将下面代码复制进去。
通过.htaccess设置：ErrorDocument 404 /404.html
将文件放到网站根目录下

404页面代码

<!doctype html>

<html>

<head>

<title>404 - 该页面不存在</title>

<style>

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{background-color:#FFF;line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}.auto{width:100%;margin:170px auto;}.container{}.settings{padding-bottom:50px;width:290px;margin:0 auto;}.settings .icon{display:block;width:100%;height:106px;line-height:106px;font-size:130px;text-align:center; margin-left:auto; margin-right:auto;}.settings h4{margin:40px auto 15px auto;font-size:18px;color:#2cb7fd; text-align:center}.settings p{font-size:14px;color:#999;}.settings > center{margin-top:30px;font-size:0; margin-left:auto; margin-right:auto;}.settings > center a{display:inline-block;padding:10px 30px;border:1px solid #2cb7fd;font-size:15px;color:#2cb7fd;text-decoration:none; border-radius:2px;}.settings > center a:first-child{margin-right:20px;color:#fff;background-color:#2cb7fd;}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}50%{opacity:1;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3)}50%{opacity:1;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}.settings{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-animation:bounceIn 600ms linear;-moz-animation:bounceIn 600ms linear;-o-animation:bounceIn 600ms linear;animation:bounceIn 600ms linear}

</style>

</head>

<body>

<h4>很抱歉！没有找到您要访问的页面！</h4>

<a href="javascript:history.back(-1)" title="返回上一页">返回上一页</a>

</center>

</div>

</body>

</html>

如何理解404页面

网站常见HTTP错误，包括502，404等。404对于我们来说特常见，当我们访问某一网站的时候，被网站告知你所访问的页面不存在的时候，服务器就会返回404代码，或者网站出现改版，链接地址改变也会出现404代码。对于404代码很容易造成用户留存率降低，直接影响到用户访问网站，结果就是影响用户体验，造成网站排名下降和用户流失。因此，我们使用404页面降低这种损失和增加用户体验，设计出优秀的404页面，对于抓住用户的真实需求，会给网站带来明显的提升。

千万不要使用服务器自带的404页面

对于SEO优化和网站运营来说，由于对404页面很不重视，就采用服务器自带的404页面，虽然这种一劳永逸，而且也是不叫省事，但是对于网站本身来说却没有任何的好处。因此，我们在设置404的时候，就需要重新设计出来一个属于网站本身的404页面。而且，在优化和保持页面功能上将用户引导到必要的地方，解决用户的困惑和问题，这是一个现代404页面的使命。

增加404页面用户体验

404页面设计出来，目的就是引导用户到网站其他地方，查找用户感兴趣的内容。因此，再设计404页面中添加内容链接，最好是相关内容的链接。这种方式就是挽回因死链接造成的用户损失。

404页面设计技巧

在设计404页面尽量使用专业术语，应该采用让保持轻松、幽默的氛围吧，毕竟在用户看不到想要看的内容情况下，我们就应该让用户告别紧张情绪，使用使用幽默的文案和图片内容，可以让访客保持愉悦的心情和好奇心，这样用户才有好的心情继续查看网站。

上一篇：下载站怎么优化百度排名才会好

下一篇：alt标签原理详解以及alt标签的作用及优化!

发表评论：

评论记录：

还没有评论，快抢占沙发吧！