We use cookies to ensure that we give you the best experience on our website.

如何在 Blogger 中添加自定义专业 404 错误页面

您想在您的 Blogger 博客上添加自定义 404 错误页面吗？ 当用户尝试打开博客上不存在的页面（例如损坏的链接、已删除的网页或用户输入错误的 URL）时，就会出现 404 错误。


Blogger博客默认的404错误页面看起来不太专业。 它只是显示一条错误消息：“抱歉，您在此博客中查找的页面不存在。”。

Blogger 还可以选择自定义 404 错误页面。 您可以使用 HTML 和 CSS 更改此错误消息的外观并使其更加专业。

本教程将指导您如何在 Blogger 博客上添加自定义 404 错误页面。 稍后，我们将讨论如何更改 404 错误页面的标题并阻止它们在 Google 中建立索引。

在 Blogger 中添加自定义 404 错误页面的好处

以下是在 Blogger 博客上添加自定义 404 错误页面的一些好处 –

  • 更专业– 自定义 404 错误页面将为您的博客带来专业感。 它使用 HTML 和 CSS 精心设计。
  • 更加人性化– 自定义 404 错误页面将指导用户下一步可以做什么。 有三个选项可供选择：用户可以返回上一页、通过联系页面与您联系或访问主页以进一步探索该网站。
  • 搜索引擎优化– 我们将使用机器人元标记阻止您博客的 404 错误页面，以防止它们在 Google 和其他搜索引擎中建立索引。

您可以在此处查看 404 错误页面的实时预览：

以下是在 Blogger 博客上添加自定义 404 错误页面的分步指南 –

  1. 首先，登录您的 Blogger 仪表板。
  2. 去设置 > 搜索首选项。
  3. 在“错误和重定向”下，单击“错误和重定向”旁边的编辑链接未找到自定义页面选项。
  4. 现在将以下代码复制并粘贴到文本编辑器中：
    <style>
#main-wrapper {width: 100%;}
#sidebar-wrapper, .blog-pager {display: none !important;}
#content-wrapper {width:99%!important;}
.status-msg-wrap {font-size: 100%; margin-top: 20px; position: static; width: 100%;}
.status-msg-border {display:none}
.status-msg-body {padding: none; position: static; text-align: inherit; width: 100%; z-index: auto;}
.status-msg-wrap a {padding: none; text-decoration: inherit;}
#TB-404-error-box{background: url(https://4.bp.blogspot.com/-Ho6Pgtu9hKQ/UChVnm_3tBI/AAAAAAAAHU8/jkoB4Wq6GfM/s640/404.png) no-repeat scroll 20% 115% rgb(255, 255, 255); margin: 0px 0px; padding: 15px 20px 50px 20px; height: 470px;}
</style>
<div id="TB-404-error-box">
<div align="center">
<span style="color: red; font-size: 57px;"><strong>Oops!</strong></span></div>
<br />
<span style="color: black;">Seems like you either clicked a <b>Broken Link</b> or a <b>page that no longer exists</b>. Kindly do one of the followings:</span><br />
<ol style="line-height: 25px;">
<li><span style="font-size: large;"><a href="javascript:history.go(-1)">« Go back</a> </span></li>
<li><span style="font-size: large;">Report the problem to us by <a href="your-blog-contact-page">contacting here</a> (<em>This will help us serve you even better</em>) </span></li>
<li><span style="font-size: large;"><a href="your-blog-url">Go to Homepage</a> and read other interesting tutorials.</span></li>
</ol>
<br />
<div align="center">
<span style="color: #08c500; font-size: 120px;"><strong>404</strong></span></div>
<div align="center">
<span style="color: #eb0f0f; font-size: 20px;">Page Not Found!</span></div>
</div>

    注意：更换你的博客网址以及您博客的网址和您的博客联系页面与您的博客联系页面的 URL。

  5. 最后，点击“保存更改“ 按钮。
  • 另请阅读：

如何更改 Blogger 中 404 错误页面的标题

网页的标题作为标题显示在搜索引擎结果页面 (SERP) 和社交媒体上。 它也出现在浏览器的选项卡中。

默认情况下，Blogger 会在 404 错误页面上将您的博客名称显示为标题。 如果您想更改它，请按照以下步骤操作 –

  1. 登录您的 Blogger 控制面板并转至模板 > 编辑 HTML。
  2. 单击模板编辑器中的任意位置，然后按 CTRL+F 快捷键打开搜索框。
  3. 现在搜索<title>标记并用以下代码替换旧的标题代码：
    <b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/></title>
<b:else/>
<title>404 Error | <data:blog.title/></title>
</b:if>
</b:if>
  4. 最后，点击“保存主题”按钮保存更改。

如何防止 Google 在 Blogger 中索引 404 错误页面

要防止 Google 和其他搜索引擎对您博客的 404 错误页面建立索引，只需添加 noindex robots 元标记即可。 请遵循此分步指南 –

  1. 再次登录您的 Blogger 仪表板并转到模板 > 编辑 HTML。
  2. 现在找到<head>标记并在其下方添加以下代码：
    <b:if cond='data:blog.pageType == "error_page"'>
<meta content='noindex,noarchive' name='robots'/>
<b:else/>
  3. 之后，点击“保存主题“ 按钮。 就是这样。

我们希望您发现本指南有助于自定义 Blogger 博客的 404 错误页面。 如果您遇到任何问题，请在评论部分告诉我们。

内容营销人员兼创始人@Geek Instructor。凭借十多年的经验，我撰写了 1500 多篇涵盖广泛主题的文章。 我热衷于与他人分享我的技术知识。 就我个人而言，我喜欢旅行和制作 YouTube 视频。

Also Read