2014年6月1日

404 錯誤頁面的友善設計__(1) 安裝 Google 自訂搜尋

404 錯誤頁面的友善設計__(1) 安裝 Google 自訂搜尋

Wayne Fu 0 A+
當網址字串有誤時,伺服器會傳回 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 自訂搜尋相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP