深圳网站开发：制作404页的101课程

很多人都围绕这句话说：“这不是关于目的地。这是关于旅程的。“那些人说实话 - 直到遇到障碍。

错过转弯或指示不佳可能会花费一个小时的旅行时间。当你执行任务时，花在寻找所需内容上的那些时间可能会破坏整个体验。

它并不总是以灾难告终。这种更优化的情况可能发生：你转弯错误，但是在附近的加油站停车后，你会留下超过准确的路线到达你的最终目的地。你还设法从在加油站登记处工作的甜蜜老太太那里得到一个免费的冰淇淋蛋筒，因为她看到你迷路了......并且想要为你加油。

深圳网站开发通常情况下，网站访问者最终可能会被拒绝。这不总是他们的错。他们可以键入错误的URL（常见）或点击断开的链接（我们的错误）。不管是什么原因，你现在已经让那些只想以某种方式与你的网站互动的人感到困惑，现在却不能。你掌握着他们的导航。你可以引导他们回到你希望他们一直走到的地方，或者你可以让他们感到沮丧和在黑暗中。他们需要掉头吗？他们在错误的出口下车吗？只有你可以告诉他们，最好的方法是通过404错误页面。

您的网站的404错误页面可以提供这些方案中的任何一种，以使您的访问者重新回到买家的旅程中。一个黯淡的404页面会刺激您的访问者并将其追逐到竞争网站的手中，以便更好地指导他们寻找他们正在寻找的东西。那个乏味的404页面具有极少的视觉元素的平淡消息。它可能包含相同衬线文本的变体：“此页面不存在。”这就像您的网络用户询问您的路线并告诉他们只是“好吧，您正在寻找的东西不在这里。祝你好运。“没什么。

不幸的是，即使是一些世界上最好的品牌也使用这些404页面。没有导航。没有有趣的文字。没有什么能反映他们的品牌信息。访客在遭遇中比以前更加失望。

但是，有一些404页面超越了。这些页面不是标准404错误页面的白色，而是以更个性化的语气与用户交谈。优秀的404页面就像从友好的脸上获得意想不到的享受。精心制作的404页面可以将您网页的访问者重定向，避免迷失和困惑，让您的网站更加乐于助人。

以亚马逊为例。在2018年的亚马逊日，亚马逊亲自了解了一个体面的404页面的重要性。当然，买家在达到404页面时仍然感到沮丧 - 即使它包括一只小狗。但是，你能想象404页面显得临床，冷酷，没有帮助，会有多烦恼的买家会怎样？

无论你想要采用什么样的音调，或者你想要使用什么样的视觉效果或哪种副本最能吸引你的读者，一个优秀的404页面最重要的是做一件事：让网站访问者没有找到他们需要的东西 - 如果只是为了时刻 - 并将他们引导到他们需要去的地方。

虽然404页面差异很大，但最好的页面似乎做得很好：

1. 支持公司的整体品牌和信息;

2. 通过清晰的导航和支持成功地将网站访问者重定向到页面上的其他位置。

从主题上讲，有几种方法可以完成“完美”的404页面：

1.确定整体音调

如果内容不是你的品牌强项，那么这可能是一场斗争。但是，如果您对品牌的语音和消息有所了解，则可以快速确定可以提供意外情况的位置。访问者在访问404页面时已经会感到失望; 他们没有得到他们想要的东西。您的404页面是一个机会，可以证明您的品牌在人工营销方面有人性，而不是其他地方看到的机器人，冷酷，自动化的消息。简而言之，超越“此页面不可用”及其变体。

无论语气如何，好的404页面就像魔术师一样。最好的魔术师经常承认他们是魔术师; 他们并不假装是他们不是的东西。404页面拥有一个错误页面; 副本和视觉效果经常反映出来。然后，就像任何优秀的魔术师一样，404页将注意力从问题上移开，并将注意力放在其他地方。通常，这是使用与视觉元素匹配的副本完成的。

以下是过去成功使用404页面成功的一些主题/情绪。

讲个笑话

一个笑话（即使是一个老生常谈的话）可以为减轻尴尬或不便而创造奇迹。然而，除非你的品牌建立在原始幽默（即反人类卡片，具有讽刺意味的是没有一个好的404页面）上，否则最好将笑话用在脸颊上，或者说是吝啬而不是太粗鲁。这个来自Modcloth的例子可以提供快速的双关语，但让情绪保持清晰。

变得聪明

它可能不是完全有趣的，但它是在到达您的页面后不久引起访问者注意的东西。它可能有点时髦，讽刺，甚至出乎意料。这个来自暴雪娱乐娱乐公司的404页面在翻译脚本方面做得非常出色，无论是视觉效果还是副本。

要友好

Prime示例将是LEGO Shop的404页面，其中包含友好的客户服务代表（尽管是乐高代表）。友好可以来自温馨的设计或温暖的副本。归根结底，任何事情都会达到高潮，“哦，嘿，我们真的很抱歉。让我们试着解决它。“

“如果贵公司的品牌在客户服务和客户服务方面表现出色，那么采取真正友好的态度最适合传承品牌信息。如果是这种情况，请将您的404页面视为访客服务窗口的扩展名。“

整合互动

人们喜欢点击某些内容，特别是如果他们正在使用桌面上的404页面。如果他们与您的网站互动，那就更好了！在404页面上进行交互的最佳在线示例之一来自Kualo。网站托管服务提供商将其404页面游戏化为Space Invaders的娱乐内容，并且能够在您升级时获得额外的生命。更令人印象深刻的是，Kualo实际上为其托管提供折扣，以达到用户达到的特定阈值点数。

发人深省

是的，您的404页甚至可以是教育性的！404页面可以提供资源和指向您网站上其他有用位置的链接。这是一个意想不到的分心，可以轻松地让客人接受更多信息。国家公共广播电台（NPR）做得非常好。媒体出版社提供了一系列具有一个主要相似性的特征：故事是关于已经消失的事物。

专题/流行文化基础

谨慎使用这个，因为如果你要成为热门话题，你将有很大的机会改变你的404信息。流行文化参考动作快速; 如果你不小心，你花了太多时间开发一个在两周内无关紧要的404页面。（对于任何目标市场都是千禧一代或更年轻的组织来说，这是一个重大罪。）上面的Spotify 404页面最近经历了一个跟上趋势的转变。在快速播放Kanye West的“808 and Heartbreak”之前，404页面的主题是Justin Bieber的“抱歉”。

2.制作视觉元素以匹配那个音调

一旦您了解了404页面的正确音调，视觉效果就是这个过程中重要的下一步。视觉通常是人们首先注意到的404页面的第一个元素 - 因此，它是该页面所需音调的第一个表示。

静态视觉效果有助于强调页面副本。添加光动画通常可以与文本协作以进一步传达消息或音调。例如，Imgur的404页面通过使其角色的眼睛跟随访问者的光标来使其插图生动。

视觉元素之间的互动让人们有机会做沮丧的互联网用户喜欢做的事情 - 点击一切，试图让有用的东西发生。

3.定位导航选项

你知道你希望你的企业达到什么基调。您已经了解了用于呈现该音调的视觉效果。您的网站访问者会认为这很棒，很有趣 - 但只是片刻。您的网站仍然必须让他们找到他们想要的东西。清晰的导航是指导您丢失的网站访问者实现其目标的下一个重要步骤。一个可爱但缺乏良好导航设计的404页面就像那个善良但又给你世界上最糟糕方向的甜蜜老头。

“在用404页面给人留下良好的第一印象后，下一步应该是让网站访问者离开它并到达他们想要的位置。应该总是有明确的迹象表明接下来应该去哪里。“

例如，Shutterstock的404页面提供了三种不同的选项。访问者可以返回上一页，如果他们点击了错误的链接，这将非常有用。他们可以返回主页进行更多的导航硬重启，或者他们从搜索引擎进来并发现链接断开，但他们还没有准备好放弃网站并想环顾四周。最后一个选择是报告问题。如果有人一直在搜索你的网站几分钟，并且他们知道他们正在寻找什么，他们可以报告他们可能已经找到了问题。至少，它会让您的网络访问者参与您的公司，您的开发团队会获得有关您网站可访问性的反馈。

除了清晰的导航，这些其他基于导航的元素可以帮助您的访客更多：

• 聊天机器人/实时聊天：机器人经常收到两种方式之一。用户要么发现它们非常烦人或相对有帮助。在登陆页面的一秒钟内弹出的机器人通常会导致访问者完全点击网站，因为机器人似乎是侵入性的。但是，您的网站只需添加“点击聊天”选项即可使用漫游器。这将邀请失去的访问者，他们希望您的帮助与机器人互动，而不是机器人做出可能令人烦恼的第一步。

• 搜索栏：此元素可为具有大量页面和信息的网站创建奇迹。搜索栏还可以提供常见问题的答案或重定向到常见问题解答。

最后一个导航说明 - 确保这些导航策略在移动设备上与在桌面设备上一样高效。像对待任何其他页面一样对待您的404页面。为了使其成功，它应该可以轻松导航到各种用户，特别是在移动优先的世界中。

虽然404页面的外观很重要，但理想情况下，您绝不希望任何人在您的网站上找到它。了解您网站上最常见的404错误可以让您深入了解如何减少这些问题。

如何使用Google Analytics跟踪404事件

您需要开始跟踪的内容

提供的代码将在Google Analytics中报告404个事件，因此您必须拥有一个正在运行的帐户才能利用本教程。您还需要访问您网站的404模板，并且（这很重要）404页面必须保留键入/单击页面的URL结构。这意味着您的404活动不能仅重定向到您的404页面。您必须使用引发错误的确切URL动态地提供404模板。大多数Web服务器服务（例如Apache）允许您使用各种重写规则来执行此操作。

使用GOOGLE ANALYTICS跟踪404错误

使用Google Analytics，跟踪明确的404错误非常简单明了。只需确保您的主要Google Analytics跟踪脚本已就位，然后将以下代码添加到404错误页面/模板中：

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

您需要更换特定Google Analytics帐户的ID。之后，该脚本通过向Google Analytics发送“事件”来工作。该类别为“404 Response”，该操作使用JavaScript传递引发错误的URL，标签使用JavaScript传递用户所在的上一个URL。通过所有这些数据，您可以看到哪些URL导致404个事件以及人们访问这些URL的位置。

使用GOOGLE跟踪代码管理器跟踪404错误

越来越多的网络管理员决定迁移到Google跟踪代码管理器。该工具使他们能够通过单个容器嵌入整个脚本。如果您有来自多个提供商的大量跟踪脚本，它尤其有用。要通过跟踪代码管理器开始跟踪404，首先要创建一个名为“页面标题变量”的“变量”。此变量类型是“JavaScript”变量，变量名称是“document.title”：

基本上，我们正在创建一个检查页面给定标题的变量。我们将如何检查我们是否在404页面上。

然后创建一个名为“404页面标题触发器”的“触发器”。类型为“页面视图”，当“页面标题变量”包含“404 - 未找到页面”或者404页面标题显示为“页面标题”时，触发器将触发在浏览器中。

最后，您需要创建一个名为“404事件标记”的“标记”。标记类型为“Universal Analytics”，包含以下组件：

变量，触发器和标记都可以将相关数据直接传递给Google Analytics。

404事件报告

无论您的跟踪方法（通过跟踪代码管理器还是直接事件信标），您的报告在Google Analytics中都应该相同。在“行为”下，您会看到一个名为“事件”的项目。在这里，您将看到所有报告的404事件。“事件操作”和“事件标签”维度将为您提供有关哪些URL引发404错误及其引用来源的相关数据。

有了这个，您现在可以定期监控404错误并采取必要的步骤来最小化它们的发生。通过这样做，您可以优化推荐来源并提供最佳用户体验，使转化和参与保持正确的路径。

如何处理您的Google Analytics结果

既然您知道如何监控这些404错误，那么开发人员应该做些什么呢？跟踪404次事件的关键是寻找导致这些错误的模式。这些数据可以帮助您确定用户意图，让您了解用户的需求。理想情况下，您会看到将人们带入404页面的趋势，您可以应用这些知识来相应地调整您的网站。

如果您的网站访问者在搜索页面时遇到困难，请抓住机会创建填充该漏洞的内容。这样人们就可以获得以前从您的网站上看不到的结果。

通过在您网站的设计中进行调整，可以避免404事件。确保页面上的导航清晰，并将用户引导至逻辑终点。修复甚至可以像更改页面上的描述一样简单，为用户绘制更清晰的图片。

把它放在一起

音调，图像和导航 - 这三个元素可以将任何404页面从鬼城变成一个令人愉快的偶然停留的网站访问者。虽然你不希望他们永远留在那里，但你可以确保他们留在你身边很愉快，然后再送他们去。通过定期监控您的404错误，您还可以减轻一些沟渠，标记不佳的标牌以及经常使用户脱轨的坑洼。积极主动并对404错误做出反应最终会改善您网站访问者的旅程和目的地。

深圳网站开发