當網址字串有誤時，伺服器會傳回 404 錯誤訊息，表示網址頁面找不到。為了不讓訪客流失，這些錯誤網址是在什麼原因下產生、如何設計 404 頁面，都是值得站長們深入研究的主題。本文將會分析 404 頁面的相關事宜，並抽絲剝繭找出 404 頁面的最佳設計方式，及提供達成這種設計的小工具，想直接安裝請跳至「四、安裝 Google 自訂搜尋」，下面範例網頁會前往 "http://www.wfublog.com/404" 這個不存在的 404 錯誤頁面：
<< 請注意！本系列文章含會員加值文章內容，需點數兌換 >>
一、訪客看到 404 頁面的反應
雖然本篇主要談的是應用層面，不過基礎知識還是需要帶過一下，建議先參考百度的這篇「404頁面」，從原理、錯誤原因、到 SEO 等面向都整理地很詳盡，是身為站長必須了解的內容。
然而，這些知識訪客不需要知道、可能也不想知道。那麼，當訪客看到網頁出現了 404 錯誤時，他們會有什麼反應呢？這感覺就像是走進了一條死巷子，大概會覺得運氣很衰，稍微確定一下真的沒有出路、也沒什麼路標指示後，結果八成是自認倒楣、摸摸鼻子退回巷口，繼續往別處尋找目標吧！
如果熟客看到 404 錯誤，他們會知道如何回到首頁，知道怎麼找到標籤列表、文章列表，或使用搜尋框，來找出需要的文章。但是多數第一次造訪網站的讀者不熟悉這一切，他們需要有完整、詳盡的路標，才不會迷路。
更甚者，當沒有 404 錯誤頁面提示時，很多訪客會認為，這個網站是不是搬家了？是不是已經沒有在維護了？除了轉身離開，對網站形象也是一種受損。
相信看到這裡，站長們可以了解，只要沒有設計 404 頁面，將會錯失這些潛在訪客的流量。也許百分比不大(其實也很難知道大不大)，不過以經營生意的角度來看，很少老闆嫌客人太多而往外推吧？
二、錯誤網址的來源及修正方式
讓我們來看看 404 錯誤的結果多不多吧！如果網站登錄過「Google網站管理員工具」，請選擇你的網站 →「檢索」→「檢索錯誤」，這裡可查詢所有的頁面錯誤。
以桌面版為例，「桌面」→「找不到」，這裡列出的就是 404 錯誤頁面，如下圖：
點進其中一個錯誤網址 →「連結來源」，可看出這個錯誤網址是從何處連過來的：
如果是自己網站的內部連結，那麼事情好辦，到該網頁找找看，是不是自己有哪個連結輸入(或複製貼上時)出錯，然後更正其可。
如果出問題的連結是從是外部網站而來，就像上圖的例子，那麼可以在 Blogger 後台 → 設定 → 搜尋偏好設定 → 編輯「自訂重新導向網址」：
如上圖分別填入外部連結、及正確的連結，以後這個外部連過來的錯誤網址，就能自動導向正確網頁，而不會流失這個訪客了。
三、404 頁面的設計
在 Blogger 後台設定「自訂重新導向網址」可解決外部 404 錯誤的問題，不過這招並非萬靈丹，因為：
- 這是事後補救措施
- 必須常常上「Google 網站管理員」查詢
- 某些自動抓取內容的外部網站，程式有問題時，會不斷地製造出有問題的外部連結，導致永遠修補不完。
所以外部 404 錯誤，如果能透過 404 頁面就解決是再好不過。
1. 基礎 404 頁面設計
一個不錯的 404 頁面需要包含的要素，這篇「如何處理網頁中出現的404頁面」提到的有：
- 指向上一級子目錄的鏈結
- 網站地圖頁面
- 網站查詢的建議和搜索框
當然還可自行增加其他選項，例如「首頁」、「文章分類列表」之類。
有了這樣的 404 頁面，至少不會讓訪客猜測這個網站是不是倒了、或搬家了。而且設計良好的 404 頁面能給予訪客類似「客服」的感覺，對於能提供客服的公司，相信顧客會認為這個企業有一定的規模，能給予更多的信賴感。
2. 美觀有趣的 404 頁面設計
有了基礎工程後，有時間的話可以再來進行美化的工作，提昇網站的形象。可參考專業的 404 頁面設計，例如
「404 頁面：為網路上的旅人準備的小驚喜」、「50個有趣的創意404頁面設計」。
3. 最佳 404 頁面設計
以上的 404 概念，能為建立網站建立一定的形象，提供訪客某些指引，讓他們在錯誤頁面時，知道怎麼去搜尋出想要的文章。實際上，相信多數訪客是沒耐心的，只要沒立即看到答案，很少願意根據路標指示，去慢慢自己爬向正確的目的地。
因此 WFU 心目中最理想、最友善的 404 頁面，能夠在錯誤頁面出現時，自動從錯誤網址判斷，最接近的文章網址是哪一篇，然後將建議結果給予訪客，這樣就可以確定 100% 不會流失客源了。
四、準備動作──安裝 Google 自訂搜尋
為了達到理想中的 404 功能，這個工具必須擁有自動搜尋的功能。值得高興的是，「Google 自訂搜尋」提供 API 能執行這個任務，我們可將錯誤網址處理一下，丟給 API 搜尋，就能找到最接近的文章網址出來。
1. 安裝 CSE
CSE 就是「Google 自訂搜尋」的縮寫，現在可以開始將這樣的功能實做到 Blogger 上。
無論是否曾在部落格安裝過 Google 自訂搜尋，都必須先參考這篇「安裝 Google 自訂搜尋」的流程，來申請安裝 CSE，並注意以下兩點：
- 在「外觀和風格」→「版面配置」→ 請選擇「只顯示結果」
- 如果部落格曾安裝過 CSE 的話，這次重新申請時，雖然搜尋的是同一個網站，不過網站名稱可另外取，如上圖紅色底線(取名為 "404 error")。
2. 取得 CSE 搜尋引擎 ID
安裝的過程中，可取得 CSE 的搜尋引擎 ID，請記得自己的字串，下一篇會用到。
如果部落格已經使用了官方的「搜尋」小工具，其實這跟 CSE 兩者是一模一樣的工具，但官方搜尋小工具沒有任何自訂版面的功能，所以如果有空的話，改為安裝 CSE 會比較好。
五、搜尋效果展示
先來看看「Google 自訂搜尋」的威力，以下取幾個從前面「Google 網站管理員」發現的錯誤網址，來當作 404 頁面的範例：
1. http://www.wfublog.com/2012/04/ff7-weapon-4.html.
2. http://www.wfublog.com/2012/11/recent-%E2%80%8Bcomment-avatar-title.html
3. http://www.wfublog.com/2014/04/how-to-choose-a-domain-name-sop.htmlhttp://www.wfublog.com/2014/04/how-to-choose-a-domain-name-sop.html
第 1 個錯誤網址是因為最後多了一個句點 "."；而 2、3 的錯誤網址都是由不明因素所產生，在「Google 網站管理員」裡面有許多類似的案例。不過 404 頁面使用 CSE 後，這三個範例所建議的搜尋結果，第一個都是正確的網址，可看出這個 404 頁面的強大威力。
看完範例、並完成以上準備動作後，下一篇將說明如何安裝程式碼，達成本文所提到的概念──友善的 404 頁面最佳設計：
Google 自訂搜尋相關文章：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。