自定義 404 錯誤頁面:保存損壞網頁的最佳“未找到頁面”示例

已發表: 2018-07-07

我們都經歷了比我們想要的更多的經歷。 當您點擊鏈接以期打開一個新網頁時,這種感覺足以吸引您的注意力,結果卻被可怕的 404 錯誤擊中。

頁。 不是。 成立。

哦親愛的哦親愛的。 如果您是用戶,您會立即感到沮喪或失望。 如果您是網站所有者,當您發現鏈接或頁面已損壞時,總是會感到尷尬和困惑——“但它昨天奏效了!”

然而,在中斷中,當涉及到 404 錯誤頁面時,通常有一些隱藏的寶石。 一些網站沒有跟隨羊,而是花時間將他們的 404 頁面變成使用大量樂趣或附加信息的藉口——如果你問我的話,這非常聰明!

想要將更多精選的最佳設計直接發送到您的收件箱?
註冊DesignRush 每日劑量!

這些自定義錯誤頁面為其他設計師提供了完美的靈感。 當然,最好的情況是完美無瑕的網站設計,每次都可以完美運行。 然而,事情發生了,主題出錯,網絡服務器故障和頁面中斷。 因此,在您的網站上定製品牌信息以減輕打擊並讓您的訪問者在出現混亂後再次光顧是必不可少的。 一些 404 頁面非常有趣,以至於人們不斷故意攻擊它們,甚至與他們的朋友分享!

為什麼需要 404 錯誤網頁?

當“斷開的鏈接”或不准確的 URL 將用戶帶到無法訪問的網頁時,就會發生 404 頁面錯誤。

有時,當其他人或在線企業通過斷開的鏈接以數字方式提及您的品牌時,會出現 404 錯誤。 通常在這些情況下,404 頁面源於有人在鏈接中打錯字,例如在 URL 末尾添加一個額外的字母。 實際上,在 45.9% 的情況下,人們偶然發現 404 頁面是因為打字錯誤、電子郵件中的舊鏈接或舊書籤保存了已刪除頁面的鏈接。

然而,最常見的 404 頁面事件之一是,當網站管理員在整個網站(以及整個 Internet)中仍有其他鏈接指向現已禁用的頁面時,網站管理員會完全刪除該頁面。 在這些情況下,您應該記住拒絕鏈接。 這意味著您要打破聯繫並告訴搜索引擎這些鏈接已損壞,而不是讓他們自己了解並將人們指向您的錯誤頁面。

當您想要移動或刪除內容時,您需要重定向頁面——這就是 301、307 和 308 重定向的用途。 301/308 重定向是一種永久性重定向——每當有人訪問前一個頁面時,他們將立即被重定向到新頁面。

但是,302/307 重定向是暫時的。 網站管理員使用它們有幾個原因。

信不信由你,搜索引擎可以將人們帶到 404 頁。 例如,當您正確地進行重定向時,人們應該登陸您現在指向他們的頁面。 但有時,搜索引擎需要幾天(或更長時間)才能抓取頁面並實際記錄您所做的所有更改。 在這麼短的時間內,他們可能仍會將人們帶到錯誤的 404 頁面。

在其他時候,網站上可能存在導致鏈接失效的錯誤。 在這種情況下,您需要向程序員和開發人員尋求幫助。 畢竟,一項調查發現 17.5% 的網站鏈接失效。

如何監控 404 頁面

您應該始終監控任何潛在的 404 頁面,並在它們出現後立即嘗試修復它們。 幸運的是,有一些工具可以幫助您找到損壞的鏈接並進行處理。 其中包括 Screaming Frog、Dead Link Checker 以及可能最受歡迎的 Google 自己的網站管理員工具。

創建有效的 404 錯誤網頁

有一件事幾乎可以肯定——即使您在網站上做的一切都正確,您總會不時地擁有 404 個頁面。 但好消息是,您可以通過拒絕鏈接、持續監控頁面、運行網站檢查器等來最大化用戶體驗並最小化其外觀。

當錯誤發生時,我們應該從中吸取教訓。 使用 Google Analytics 等網站分析程序來提高網站性能。 跟踪人們登陸您的 404 頁面時的行為。 然後,充分利用這些數據。

例如,如果他們在 404 頁面返回主頁後採取的下一步是,您可以放置​​一個清晰可見的按鈕,將他們引導到您的設計中。 或者,如果他們想在出現 404 錯誤後訪問聯繫頁面,請在那裡鏈接,讓他們的生活更輕鬆。

跟踪消費者行為和信息,了解哪些內容對您的網站有效,以及您的消費者喜歡和不喜歡什麼。 什麼更好? 此類事情無需猜測——有關您網站訪問者的數字和具體數據將不言自明。

您想立即復制的最佳 404 錯誤頁面設計

在瀏覽互聯網以查找錯誤後(聽起來很奇怪),有幾個 404 頁面脫穎而出。 看一看——也許其中一些會激發您自己的品牌設計!

1. 映射出的 404 錯誤頁面:BluePath

BluePath 與其客戶合作“創建和實施自動化分析策略”,幫助用戶遠離電子表格。 雖然這本身就很棒,但他們也花時間整理了這個古怪的 404 錯誤頁面。

該頁面實際上顯示了一張地圖(由於您“離開地圖”導航的愚蠢行為,您沒有在地圖上)。 頁面上的副本還說:

“這張 [地圖] 顯示了亞特蘭大過去幾年報告的所有犯罪行為。 為什麼? 因為你還沒有僱用我們是犯罪!”

打得好,藍道。 打的好。

2. Snarky 404 頁面錯誤:澳大利亞人

澳大利亞領先的國家新聞品牌《澳大利亞人報》擁有一系列全國和全球新聞和商業報導。 然而,就像我們其他人一樣,他們很容易受到偶爾的錯誤的影響。 在這種情況下,他們的 404 錯誤頁面。

但與其屈服於經典的“找不到頁面”,《澳大利亞人報》選擇利用該頁面作為對幾位澳大利亞政客進行狡猾挖掘的機會(奇怪的是,唐納德·特朗普和一塊煤也上榜了)。 每個政治家都有一個與他們相關的名言以及他們對斷開鏈接的想法。

3.遊戲化404錯誤頁面:Kualo

好的。 這可能是互聯網歷史上最好的 404 錯誤頁面。 Kualo 決定將他們的斷鍊之家變成一款太空入侵者遊戲供用戶玩。 遊戲化是將失望的網絡瀏覽者轉變為非常滿意的內容消費者的好方法。

另外,用戶可以故意回到這個頁面只是為了玩經典遊戲。 由於搜索引擎可以看到所有內容(你好,老大哥……),因此它們還會跟踪用戶在頁面上的時間。 有道理——如果你在一個頁面上花了很多時間,那就意味著你真的很喜歡這個內容。 如果您是回頭客,並且不斷回來,搜索引擎將繪製您的旅程並以更好的排名獎勵網站!

什麼更好? 您不僅有機會在 Kualo 的網站上玩這款很棒的遊戲,而且您實際上有這樣做的動力! 如果您摧毀 1,000 名入侵者,您將獲得他們託管的折扣。 總的來說,這確實是一個了不起的設計,純粹因為這個頁面,我花了額外的一個小時來寫這篇文章。 向誇洛致敬。

PS可以打敗我們的高分?

4. 古怪的 404 錯誤頁面:無用的網絡索引

無用的網絡索引 - 以其非常合適的名稱 - 決定在其 404 錯誤頁面設計中為我們提供備受喜愛的貓鼬。 您在頁面上停留的時間越長,到達的貓鼬就越多,以至於大約 10 秒後屏幕上至少有 8 隻貓鼬。

您幾乎為那些顯然正在努力尋找您的網頁的貓鼬感到難過!

當然,遊戲化為您的業務創造了奇蹟,但結合遠程連接到 404 主題的視頻也是一種很好的策略。 人們可能會一直看它直到最後,這是增加在網頁上花費的時間並提高整體指標的另一種好方法,即使出現 404 頁面也是如此。

5. 圖解 404 錯誤頁面:樂高

如果您是樂高迷,您會喜歡他們的 404 錯誤頁面設計。 正如一些公司已經強調的那樣,404 頁面實際上是使用錯誤頁面向訪問者重申您的品牌或產品的絕佳藉口。

樂高實際上以使用各種策略來增加他們的客戶群而聞名,並且永遠不會錯過提醒人們他們相關的機會。 他們有一系列動畫電影、視頻遊戲、附加內容等等。 樂高適合所有年齡段的人,從嬰兒樂高得寶積木到讓成年人建造最著名地標複製品的建築師盒子。

我們沒想到他們的 404 頁面會更少。 在這種情況下,樂高的 404 頁面非常具有說明性:將您單擊的鏈接連接到網頁的“電纜”壞了,一些可憐的傢伙偶然發現了它,嚇壞了!

6. Punny 404 錯誤頁面:Blue Daniel

作為其作品集的一部分,Daniel Karcher 選擇使用 404 錯誤頁面進一步展示他的技能。 他選擇了地鐵場景,廣告牌廣告使用雙關語和文字遊戲來營造幽默感。

在他的錯誤消息中,您會注意到對電影“The Missing”和電視節目“Lost”的引用。 後者覆蓋塗鴉,詢問用戶“你迷路了嗎?”

由於您顯然在此 404 頁面上迷失了方向,因此您有機會返回主級別。 聰明的!

7. 冒險的 404 錯誤頁面:阿聯酋航空

正如文章開頭提到的,一些公司結合幽默和有用信息來創建 404 錯誤頁面,感覺更像是實際網站的一部分,而不是損壞的部分或鏈接。

阿聯酋航空就是一個典型的例子,他們將諷刺笑話與指向他們最常訪問的頁面的鏈接結合在一起。 他們說:“抱歉,我們已經走遍全球,但似乎找不到這個頁面。” 暗示由於它們無處不在,您正在尋找的頁面幾乎肯定不存在 - 哦!

考慮到 73.7% 的訪問 404 頁面的人會立即離開網站,因此通過提供指向最常訪問頁面的鏈接來讓訪問者留在您的網站上是一個很好的策略。

當人們沒有找到他們想要的東西時,他們就會失去信任。 反過來,搜索引擎會失去信任。 可以這麼說,您不希望任何人對您的業務失去信任。 找到一種方法來改變鏈接斷開等糟糕情況可以幫助您維護您的業務,甚至給您的網站訪問者留下深刻印象。

8. 最小的 404 錯誤頁面:CSS 技巧

對於 Web 開發或編碼網站來說,出現 404 錯誤可能會非常尷尬。 我的意思是,他們的工作是確保這些事情終究不會發生——不是嗎?

無論如何,CSS Tricks 的團隊設法將一個可能令人尷尬的錯誤變成了一個設計精美的 404 頁面。 頁面中心的樣式就像一張撕破的紙,後面是應該構成您要訪問的頁面的代碼。

9.自嘲的404錯誤頁面:Cloud Sigma

我們可以了解 Cloud Sigma 對他們的 404 錯誤頁面所做的事情。 我們總是說,當有疑問時,只需使用狗或貓的照片來緩解潛在的不良情況。 在這種情況下,該站點提供了一張嘗試使用計算機的貓(對不起,他們的初級開發人員)的圖片。 來得正是時候。 你忍不住笑了!

但最重要的是,Cloud Sigma 站點錯誤還為您提供了一種返回其主頁的清晰方法。 如果您不希望人們完全離開網站,請確保返回主頁總是很容易,只需點擊一下即可。

10. 非常規 404 錯誤頁面:LimpFish

最後,Limpfish 使用了一個古怪的 404 錯誤頁面版本,再次讓每個用戶的臉上都洋溢著笑容。 當然,當我第一次看到這個時我有點困惑,因為它似乎是約會廣告和真正的技術相關請求的組合......我不確定哪個更明顯。 但如果你仔細想想,除了斷開的鏈接,還有誰需要好的匹配呢?

然而,考慮到我們是在互聯網上運營,報紙效應增加了一點諷刺意味。 最終目標是成功——他們讓我們微笑和輕笑,我們沒有在登陸 404 頁面後立即離開網站。

關於 404 頁面的知識

通過在 404 頁面添加與您的品牌標識相匹配的有趣、好玩、友好或遊戲化的方面,您可以讓訪問者留在您的網站上,甚至進一步促進您的業務。 一個值得注意的例子是遊戲化,確實需要額外花錢,但這是一項降低跳出率的明智投資。

除了我們在上面的行動中看到的有用的 404 頁面和策略之外,我們還準備了一份應該做和不應該做的清單,可以幫助您將事故轉化為機會——尤其是因為人們總是會時不時地打錯字,而你無法控制。 但是,如果他們碰巧出現在損壞的頁面上,您可能會影響他們的體驗。

在創建自己的有用 404 頁面時,請記住以下幾點:

  • 說實話。 就像我們說的,會有 404 頁,有時它們甚至不是你的錯。 無論如何,一定要解釋發生了什麼,並提供修復這種情況的方法,並幫助人們找到他們正在尋找的東西。
  • 不要錯過機會。 添加一些幽默和品牌個性,這樣人們就不會感到沮喪 – 或者根本不會離開。
  • 吸引用戶。 如果您的預算可以支持,讓他們玩遊戲。 如果沒有,有幾種方法可以提高參與度。 添加可愛的視頻、插圖或動畫。 盡量減輕這種情況——如果一切都失敗了,可愛的動物圖片和視頻也可以。
  • 阻止他們離開。 每個離開的網站訪問者都錯失了將潛在客戶轉化為客戶的機會。 您可以將相關鏈接添加到訪問量最大的頁面或在 404 頁面上嵌入搜索功能,以便他們可以瀏覽您的網站。
  • 添加激勵。 如果您找到他們的 404 頁面,一些品牌會提供獎勵。 這樣,您甚至可以收集更多潛在客戶。 例如,您可以提供時事通訊註冊、電子書或案例研究等免費內容等。
  • 沒有廣告。 嗯,不是傳統意義上的。 如果網站上有錯誤,並且人們登陸它,不要試圖過度銷售或讓他們認為您可能是故意離開 404 頁面。
  • 快速加載。 如果人們確實登陸了一個損壞的頁面,您不希望他們永遠等待才能找到答案。 建議您網站上的所有其他頁面也具有良好的加載速度。 跳出率隨著等待時間每增加一秒而增加。
  • 不要使用複雜的技術術語。 目標是盡量讓用戶留在您的網站上,而不是用複雜的術語和不必要的術語將他們趕得更遠。
  • 不要忘記監控損壞的鏈接並儘快修復它們。

找不到頁面...但結論是

每個站點的 404 錯誤頁面設計都會將事故轉化為進一步建立品牌忠誠度的機會。 通過創造力、出色的設計和一些敏銳的智慧,您的網站設計也不必擔心錯誤——它只是公司產品的延伸。

我們的最後一個提示:為您全力以赴 404 頁面,因為在登陸 404 頁面後離開的人中有 73% 代表了 74% 的潛在客戶流失。 這些都是你的潛在客戶,而自定義 404 頁面可能會讓他們留下來並瀏覽更多。 這與您是否應該擁有自定義 404 頁面無關。 問題是,你能負擔得起擁有嗎?

想要您自己的自定義 404 錯誤頁面以確保更好的用戶體驗? DesignRush 列出了一些頂級數字代理商,他們可以為您的企業創建品牌網頁和成熟的網站。

想要更多鼓舞人心的設計嗎? 註冊我們的通訊!