欢迎光临
我们一直在努力

花开云(织音)同款超级好看404页面源码

源码介绍

建立一个创造性的和鼓舞人心的404错误页面设计,这有助于使访问者停留在网站上。

源码截图

404 Not Found404页面就是当用户输入了错误的链接时,返回的页面。404页面的目的是:告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用网站其他页面而不是关闭窗口离开。

404对seo的影响:自定义404错误页面是增强用户体验的很好的做法,但在应用过程中往往并未注意到对搜索引擎的影响,譬如:错误的服务器端配置导致返回“404”状态码或自定义404错误页面使用Meta Refresh导致返回“302”状态码。

正确设置的自定义404错误页面,不仅应当能够正确地显示,同时,应该返回“404”错误代码,而不是 “200”或“302”。虽然对访问的用户而言,HTTP状态码究竟是“404”还是“200”来说并没有什么区别,但对搜索引擎这则是相当重要的。

搜索引擎蜘蛛在请求某个URL时得到“404”状态回应时,即知道该URL已经失效,便不再索引该网页,并向数据中心反馈将该URL表示的网页从索引数据库中删除,当然,删除过程有可能需要很长时间;而当搜索引擎得到“200”状态码时,则会认为该url是有效的,便会去索引,并会将其收录到索引数据库,这样的结果便是这两个不同的url具有完全相同的内容:自定义404错误页面的内容,这会导致出现复制网页问题。轻则被搜索引擎降权,重则会K掉网站。

使用方法

一、下载404页面模板免费版。

点击下载404页面模板,然后解压,可以发现有很多404网页模板。挑选一个您最喜欢的页面代码。

二、修改404页面中的素材网址为绝对地址。

为了您的404页面素材正常显示,需要您修改一下素材中的引用网址。例如网页中一个网址为”/404/Main.jpg”那么你应该改成带有网址的

三、将修改好的代码上传到网站中

用FTP软件将网站上传到网站中,并且部署好网页和素材之间的关系。如果有死链接之类的要第一时间解决。

四、在服务器上配置自定义404的路径

这里边可能会遇到两种情况:

1、虚拟主机。一般空间商提供的面板都有自定义404的功能,根据提示设置成自定义的404页面。

五、检查404页面是否能够正常访问

找一个打不开的网址,看看是否会显示自定义的404页面。如果没有返回第四步重新设置,直到看到显示正确为止。

代码:

<!-- 花开云|草根站长的家 www.zwwhl.com QQ群:925274235 --> <!DOCTYPE html> <html lang="zh"> <head> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="bookmark"href="/favicon.ico" /> <title> 404- 花开云</title> <!-- Meta tag Keywords --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8" /> <meta name="keywords" content="" /> <script> addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script> <!-- //Meta tag Keywords --> <!--/Style-CSS --> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <!--//Style-CSS --> <!-- font-awesome-icons --> <link href="css/font-awesome.css" rel="stylesheet"> <!-- //font-awesome-icons --> </head> <body> <section class="w3l-error-61-404"> <!-- /error-61-section --> <div class="error-61-mian"> <div class="wrapper"> <div class="errors-16-top"> <div class="errors-16-info"> <h3> 404 </h3> <p>sorry! 页面找不到了~</p> <a href="https://www.zwwhl.com/"><u><font color= #B0C4DE>解决方法...</font></u></a> <form action="https://www.zwwhl.com/" method="post" class="d-flex error-page-form"> <font style="color:#ffffff;font-size:21px;font-weight:bold;">&nbsp;&nbsp;≧◉◡◉≦&nbsp;&nbsp;亲爱的不要急,来随便逛逛吧:</font></a> <button type="submit"><span class="fa fa-fil" aria-hidden="true">&nbsp;花开云</span></button> </form> <div class="social-coming-icons"> <a href="https://www.zwwhl.com/" title="花开云" class="footer-home"><span class="fa fa-home" aria-hidden="true"></span></a> <a href="https://jq.qq.com/?_wv=1027&k=Bz4U2sLz" title="QQ群" class="footer-qq"><span class="fa fa-qq" aria-hidden="true"></span></a> <a href="https://jq.qq.com/?_wv=1027&k=Bz4U2sLz" title="微信" class="footer-wx"><span class="fa fa-weixin" aria-hidden="true"></span></a> <a href="https://jq.qq.com/?_wv=1027&k=Bz4U2sLz" title="微博" class="footer-wb"><span class="fa fa-weibo" aria-hidden="true"></span></a> </div> </div> </div> <div class="copyright-footer"> <div class="copy-right"> <p>Copyright &copy;2021 <a href="https://www.zwwhl.com/" target="_blank" title="404">花开云.</a> All rights reserved.</p> </div> </div> </div> </div> </section> <!-- //error-61-section --> <audio autoplay="autoplay" src="https://www.zwwhl.com" onended="this.load();"></audio> </body> </html>
  • 海报
海报图正在生成中...
赞(0) 打赏
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。
2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。
3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。
4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
文章名称:《花开云(织音)同款超级好看404页面源码》
文章链接:https://www.456zj.com/29932.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址