雅泽SEO

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

雅泽SEO

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

设置方法

  1. 创建一个名为404.html的文件,将下面代码复制进去。

  2. 通过.htaccess设置:ErrorDocument 404 /404.html

  3. 将文件放到网站根目录下

404页面代码

<!doctype html>

<html>

<head>

<meta charset="utf-8"/>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8"><meta name="applicable-device"content="mobile">

<meta name="viewport"content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,minimal-ui"/>

<meta name="format-detection"content="telephone=no"/>

<meta name="format-detection"content="email=no"/>

<meta name="author"content="MayiCMS"/>

<meta name="format-detection"content="address=no;">

<meta name="apple-mobile-web-app-capable"content="yes"/>

<meta name="apple-mobile-web-app-status-bar-style"content="default"/>

<meta name="renderer"content="webkit">

<meta http-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

<meta http-equiv="Cache-Control"content="no-siteapp"/>


<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>

<div class="auto">

<div class="container">

<div class="settings">

<i class="icon">404</i>

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

<center> 

<a href="/" title="返回首页">返回首页</a> 

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

</center>

</div>

</div>

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

发表评论