设计直观且用户友好的404页面

我们所有人都在某个时候与404页面进行了互动。

当链接断开，页面被删除或用户错误输入页面地址时，将显示这些页面。但是无论原因是什么，它仍然是一个错误，需要修复。此外，断开的链接会损害您的网站排名，而这不是您所需要的。您网站的SEO方面非常重要，因此您不想因为忽略了404通知而失去流量。

很明显，需要尽快修复404页，但您永远无法真正预测用户何时遇到断开的链接。因此，要准备好将负面的体验变成积极的体验，您需要自定义404页面，并使它们易于使用和直观。

准备学习如何将坏事变成好事？让我们找出来。

自定义您网站的404页面

想象一下，您正在浏览一个包含许多交互式元素的令人难以置信的丰富多彩的网站，并且突然发现空白页面上显示“ 404页面未找到”消息。

有点醒，不是吗？

404页面应该不会让人感到意外，这就是为什么使其设计与网站整体布局相同如此重要的原因。

为此，请使404页面的外观与其他页面的外观相同，包括背景，颜色，字体和其他元素（如果适用）。同样，许多网站都将404页作为一个机会来强调该品牌，并再次提醒用户有关该品牌的信息。

在为您的站点设计404页面时，请注意该消息。精心制作的消息是添加巧妙的双关语或以不显眼的方式提醒用户有关您的产品/服务的好机会。

解释发生了什么

如果我们查看Apache下的默认404页面，则会看到以下内容：

就是这样。用户不知道实际发生了什么以及下一步该怎么做。

因为您关心客户，并且希望消除任何不愉快的经历，所以请提供错误的解释。404的主要原因通常是：

• 用户输入了错误的内容，
• 链接断开，
• 该页面不存在，
• 与服务器的连接断开。

当然，您不必列出所有上述问题。只要确保您的解释是可以理解的。

通过诚实对待问题，您将赢得用户并鼓励他们留在网站上并继续浏览。

创建引人入胜的消息

404页是品牌通过精心制作的信息展示其身份的绝好机会。

最佳404页的示例通常具有以下特征：

• 双关语
• 与网站的产品或服务有关的消息
• 个人诉求
• 对流行文化和可识别事件的引用。

因为默认情况下404页面是一个错误，所以您需要将其转换为完全相反的东西，也就是积极而有趣的体验。

GitHub在设计其404页面方面做得非常出色。它使用了关于开发人员及其对“星球大战”传奇的热爱的刻板印象，并通过使即使没有看过《星球大战》电影的人都可以立即识别视觉元素和页面消息，从而发挥了自己的优势。

提出要采取的行动

号召性文字确实很重要，而且对于404页的设计绝对是必须的。

永远不要让用户留下空白页和零选择。因此，即使发生了类似404的事情，也要提供一种可以带来互利的选择。

404页面上一些最受欢迎的CTA：

• 搜索栏
• 主页
• 顶级产品/服务
• 注册产品或新闻通讯
• 免费试用

注意CTA按钮的设计。它们必须很容易被发现并且不应与背景融合，否则，用户将不会注意到它们。同样，考虑一下CTA按钮消息：与其说“单击此处”之类的陈词滥调，还不如说更具创意的内容（“看看我们得到了什么”）。

添加搜索栏

用户登陆404页面是因为他搜索了某些内容。因此，通过向页面添加搜索栏，为他们提供再次尝试的选项。

您可以通过以下消息来支持它：“似乎找不到您的查询……为什么不重试？”编写正确的CTA的参与率很高，并且可以与图像一起很好地工作。

同样，在搜索栏中添加提示文本。带有文本的条比空白的条具有更好的参与度。

添加出口点

404页上的搜索栏还不够。如果用户不确定自己需要什么怎么办？

添加“首页”或任何其他相关按钮，以将用户从404页导航到潜在的转化。同样，您可以添加“联系我们”按钮以提高可靠性。

一些公司使用404页面作为提醒他们产品和服务的机会，并在页面上放置相应的链接。

显示您的产品/服务

例如，如果您是一家电子商务商店，则可以将您最畅销的产品放在404页上，以使用户有机会发现自己的最佳产品并（希望！）购买它们。

至于其他站点，请确保您可以为用户提供有价值的东西。它可以是产品的免费试用版，提供课程注册的优惠或网站有用区域的指南。

好玩

正如我们上面已经说过的，404页面是一种负面体验，因为用户没有获得预期的结果。要解决此问题，请使页面具有交互性或向页面添加一个有趣的元素。

即使您将自己定位为高度专业的品牌，幽默也不会受到伤害。同样，许多公司在其404页面上添加游戏化和视频，以吸引用户并保持娱乐性。

跟踪404错误

404错误与用户无关。但是，跟踪它并确定错误原因和用户的旅程是您的任务。

选择用于404错误跟踪的工具时，需要牢记一些注意事项。

考虑所有404错误源

404错误可能不一定在您的网站上–客户可以打开旧的新闻通讯并点击链接，或者该链接可能会出现在Google的搜索结果中。

因此，当您选择错误监控工具时，请仔细检查该工具是否在所有地方搜索404错误，以便您可以全部解决。

报告404错误费用

作为网站所有者，您可能需要做一百万件事，而修复404错误可能不在您的清单之列。

这就是为什么您需要一个可以让您知道404错误造成的损失的工具的原因。而且我们在这里不是在谈论金钱，这可能是转换损失，跳出率增加，用户流失的百分比。

一旦您看到404错误如何影响您的业务，就可以更加轻松地确定任务的优先级并将404错误移至列表上方或下方。

持续监控

404错误不是定期发生的事情。您可能会做得非常好，然后突然间，用户得到404。

因此，您的跟踪工具应不断监控404错误，并在发现错误时立即通知您。通过这种方式，您将能够及时修复它，并消除其他用户跌破404页面的风险。

跟踪工具的类型

有多种类型的可用跟踪工具可帮助您查明404错误并成功解决。

抓取工具

诸如Sfroging Frog之类的抓取工具非常适合快速扫描您的网站并检查其是否有损坏的链接。

这些工具会分析您网站的链接，并让您知道哪些链接已损坏以及错误的根源。此外，爬网工具通常易于管理和安装。

此类工具的最大缺陷是它们仅分析您网站上的链接，还记得我们所说的高级分析的重要性吗？同样，爬网工具不会告诉您404错误的代价，而只是帮助您识别它。

爬网工具绝对有用，您应该定期部署它，以确保商店一切正常。但是，请不要忘记执行常规和高级分析，以确保您不会发现其他错误。

反向链接工具

与爬网工具不同，反向链接工具侧重于外部资源，这些外部资源将用户引导到您网站上断开的链接。

Moz的Link Explorer是帮助您找到将用户带到您的网站的工具之一。这种分析对您的SEO确实很有帮助，因为您可以消除404链接并提高网站排名。

但是同样，与爬网工具一样，反向链接跟踪工具仅涵盖识别断开链接的一个方面。如果要查找所有404错误链接，包括旧新闻通讯或社交媒体中的链接，则需要进行更全面的分析。

使用Google Analytics（分析）进行跟踪

跟踪404页错误的最常见，最有效的方法之一就是使用Google Analytics（分析）。

为此，您需要复制以下代码：

<script>  
   // Create Tracker - Send to GA
   // Replace UA-11111111-11 with your own Tracking ID
 ga('create', 'UA-11111111-11');
   ga('send', {
     hitType: 'event',
     eventCategory: '404 Response',
     eventAction: window.location.href,
     eventLabel: document.referrer
});
</script>

并将其添加到404错误页面/模板。只要记住在代码中粘贴您的Google帐户的ID即可。

之后，您将能够看到导致404错误的确切网址，以及从何处获取它们。

最后：解决问题！

事故将会发生，这是事实。最好事先准备好外观良好的404页面，而不要在生气的用户等待时疯狂地解决问题。

但是，404是错误，需要修复。根据错误的优先级，您可以重定向链接，还原页面或更正源链接。同样，请执行以下操作：

• 引入自动和常规的404报告，以关注404页面并及时进行修复，
• 在404上设置实时通知，
• 执行审核以识别任何断开的链接。

总而言之，用户友好的404页面应该为用户带来价值，在整体网站设计方面保持一致，并有助于浏览网站。遵循这些规则，您将保留用户，同时提高转化率。