404頁面設計的4個原則-錯誤404頁面

404頁面怎麼設計？首先我們要了解什麼是404頁面，404跟500、200一樣都屬於HTTP狀態代碼（HTTP Status Code），當我們點開一間電商平台，等於用戶端（Client）的瀏覽器發出訪問網頁的請求，在正常情況下，網站的伺服器（Server）就會向使用者呈現網頁，並以代碼表示，通常有以下3種情況：

網頁上出現500代碼代表伺服器端出現錯誤而無法連上網站。
200代表伺服器正常傳回網站頁面。
404意思剛好相反，表示頁面因某些原因失聯，伺服器無法正確傳回官網頁面。

404頁面會降低使用者閱覽體驗，是許多SEO電商網站經營者極力避免的狀況，但其實良好的404頁面就像中繼站的角色，讓使用者能轉向其他適合的頁面！那麼理想的404頁面該怎麼設計？接下來就讓允騰網路行銷整理4個原則，帶你用SEO的思維設計404頁面。

目錄(點擊前往閱讀該段內容)

404頁面怎麼設計？4大原則一次掌握▼
錯誤404頁面也能行銷！3種設計案例帶你認識▼
潛意識行銷當道！【允騰網路行銷】專注細節，為你設計有助於SEO的404頁面▼

404頁面怎麼設計？4大原則一次掌握

【Google Search Console】說明文件指出，404頁面本身雖然不會影響網站排名，但可能不利於Google搜尋引擎辨別網頁結構，因此若是已提交的網址，就建議修正將使用者導向其他適合的頁面，有助於提高停留時間（Dwell Time，使用者在頁面停留的時間），為SEO帶來正向效益。因此404頁面該怎麼設計才能提供給使用者更流暢的閱覽動線，同時兼具SEO成效呢？建議大家掌握以下4大設計原則！

1.清楚說明404頁面出現的原因

網頁出現404頁面並非整個網站癱瘓，而是部分頁面已被刪除，或使用者輸入不正確的網址，因此在設計404頁面時建議清楚說明頁面失聯的原因，讓使用者放心。

Q：如何知道官網上的404頁面有多少頁？

A：想知道自己的SEO電商網站有哪些404頁面，分別是哪些網址以及數量多少，可按照以下路徑了解：

前往【Google Search Console】>從左側欄找到「索引」>網頁>按一下「找不到 (404)」，即可知道受影響的網頁數，也就是官網目前的404頁面有哪些。

Q：如何知道自己的SEO電商網站404頁面怎麼呈現？

A：生成404頁面的原因之一是使用者輸入不正確的網址，若想知道網站的404頁面如何呈現，可在主網域後面輸入404，例如https://icisco.cc/404，可看到允騰網路行銷官網的404頁面明確說明網頁已不存在，而非整個網站無法使用。需要注意的是，並非所有網站伺服器都能客製化404頁面，頁面會直接顯示「找不到該網頁」，使用者看了通常會直接關閉頁面，因此建議為SEO電商網站建立呼應品牌形象的404頁面，將使用者留在網站內，並找到對其而言有價值的資訊。例如，2020年紙本書與電子書市場都穩居龍頭的博客來，404頁面設計直截了當說明「頁面連結錯誤」，並於下方置入推薦商品引導使用者前往其他網頁瀏覽，或使用搜尋功能查詢商品資訊。

博客來404頁面設計-404頁面怎麼設計

跟博客來相比，momo購物網站的404頁面設計顯得簡約許多，斗大的404與「很抱歉，這個網頁不存在」提示，搭配桃子吉祥物momo co蹲著畫圈圈的落寞模樣，這麼可愛的404頁面也讓人會心一笑。

momo網站404頁面怎麼設計-404頁面怎麼設計

不論是博客來或momo，都可看到404頁面一定有個返回首頁的按鈕或連結，這跟首頁的權重有關，位於網站結構最頂層的首頁，就像金字塔的頂端，通常有最多連結，例如從首頁點選精選產品、最新消息、講座文章的分類項目等，幾乎所有網頁都會連結到首頁，連網頁左上方的logo也建議設置首頁的連結。因此404頁面中也最好能導回首頁，並有明確的導覽動線與項目設置，方便使用者搜尋。

2.幫助使用者連到正確的頁面

使用者為什麼會進入404頁面？以一個販售保護殼的網站為例，使用者可能是透過以下管道進入網站而遇到404頁面：

從搜尋結果中的關鍵字廣告點擊到保護殼的產品分類頁，但該網頁被刪除或網址有變而進入404頁面。
某個產品頁新增後有被Google搜尋引擎收錄，但後來被移除，導致使用者進入404頁面。
產品或文章分類網址不正確，例如在瀏覽器網址列後面正常為protective-case（保護殼）卻不小心多了s，而進入代表網頁不存在的404頁面。

為避免讓目的明確的使用者進入404頁面，建議事先將失聯的頁面做好轉址，按照Google搜尋引擎爬蟲的爬取速度，通常權重較高的網站新增內容後，1週~1個月內會被Google收錄，權重越高，最快當天就會被收錄、出現在搜尋結果中。如果某一個網頁網址後來更改、甚至頁面刪除，那麼使用者在搜尋結果或點擊廣告進入網站，該頁面會是404，但若有轉址處理，使用者點擊後就能自動轉向到新網址。目前常見的轉址方式包含301與302，以下簡單比較：

Q：301與302轉址有哪些不同？

轉址類型
類型	301轉址	302轉址
英文	Moved Permanently	Found
定義	網址已「永久」改為另一個網址，要求用戶端下次連結至另一個正確的網址（重新導向）	網址已「暫時」跳轉
優點	會連同舊網址的權重與流量一併轉址到新網址，告知搜尋引擎不必爬取舊網址的內容，而是改為爬取新網址	只會將流量轉至新網址，權重不會移動，搜尋引擎也會持續爬取舊網址的頁面，舊網址排名及權重不會受到影響
適用情況	網站結構改變，例如在一個專賣育兒用品的網站新增孕婦裝服務項目，變成育兒用品與孕婦裝都位於產品的項目底下，網址就會從「https://example/child-care/products」改為「https://example/products/child-care」，屬於永久性的搬遷，須進行301轉址	網站A/B測試（A/B test），若想測試哪一種版本的首頁網頁停留間越長，可開發2種版本的首頁，分別為https://www.example.com/a、https://www.example.com/b，使用者點入後瀏覽器就進行302跳轉，自動分流到不同的首頁，根據使用者在哪一個版本的首頁停留時間越長，判斷哪一個成效更好

Q：404頁面最好有哪些項目？

A：404頁面設計最好包含導向首頁的連結按紐，或粉絲專頁、line諮詢連結等平台，方便使用者擁有多樣化的聯繫管道，這些聯絡資料可以如同下圖，整合在網頁下方的Footer（頁尾）中。此外，為了方便使用者直接搜尋感興趣的主題或產品，建議將搜尋欄與導覽列置入Header（頁眉）中，直接固定在網頁上方。在SEO電商網站固定這些區塊，即使使用者在不同頁面，也能隨時點擊品牌介紹、服務項目、聯繫方式等重要資訊，提供更人性化的閱覽體驗。

Header與Footer意思-404頁面怎麼設計

你可能有興趣：如何做Landing Page？7個建議一定要知道。

3.延長使用者於網站的停留時間

網站停留時間（Dwell Time）是什麼？它是Google判斷網站權重的考量點之一，使用者點擊進入網站後，停留約多久才回到搜尋結果頁面，這段時間即為網站停留時間。一般來說，內容行銷（Content Marketing）做得越完善，使用者待在網站的時間越長，越容易被Google認為網站提供符合使用者搜尋意圖、有價值的資訊，因此提高權重與排名。許多人看到404頁面的第一反應是關掉，花許多時間與心力好不容易建立起口碑，並爭取第一頁排名，如果使用者因為404頁面設計不良而離開網站就相當可惜！除了上段提到的，加入按鈕或連結導向首頁，也建議置入影片或像博客來新增推薦產品，延長使用者在網站的停留時間。

補充知識：成功的404頁面能夠降低使用者心理上的不安與排斥，更能做到順暢的引導，提供使用者新的指引甚至是轉換的機會，若頁面失效無可避免，則須利用404頁面將網頁價值最大化。

(1)如何知道SEO電商網站有哪些404頁面

透過【Google Search Console】可了解網站目前有哪些404頁面、網址與數量，只要透過以下步驟即可查詢：

Step1.在左側欄位「產生索引」項目下方找到網頁。
Step2.查看「網頁未編入索引的原因」項目，點選「找不到 (404)」。
Step3.可看到「受影響的網頁數」有多少。

若想查詢特定網址下方的頁面有哪些404頁面，例如想知道哪些產品頁失聯，可按照以下步驟操作。

Step1.於「示例」項目左側點按篩選的圖示（類似倒三角形）。
Step2.點選「網址」。
Step3.選擇「包含」，後方輸入網址，例如https://example/product（產品列表頁）或是https://example/article（文章列表頁）。

建議透過網站的301轉址功能，將網址轉到更新的網址。例如逢甲女裝推薦-CHACHA網站中一個失效的頁面網址，為「https://www.chachagood.com/commodity/clothes/long-sleeve/checkerboard-flat-hood123」，這個網址點擊後會自動導向女裝上衣分類（https://www.chachagood.com/commodity/clothes/long-sleeve），讓來客有其他女裝推薦款可挑選，提供友善的瀏覽體驗。

但要注意的是，301轉址不建議全數轉向首頁，因轉址後這些網頁內容都一樣（已導向首頁，所以呈現首頁的內容），Google搜尋引擎爬取時會發現有許多重複頁面，產生重複索引的情況，導致網站排名降低，這是將失效網頁重新導向的注意事項。

4.使用正面語句鼓勵使用者跳轉

為什麼404頁面需要正面用語？直接告知使用者頁面失效、請他們點選其他頁面不就好了嗎？這跟潛意識（Unconscious）有關，允騰網路行銷非常重視「潛意識行銷」，根據佛洛伊德的冰山理論（Iceberg Theory of Consciousness），人的意識就像冰山上露出的一小截，海面底下的龐大冰山是潛意識，比起意識，潛意識主宰我們的生活，因此設計404頁面時建議避免說「此頁面有誤、您輸入的網址錯誤」，而是用正面語句撰寫404頁面，為使用者說明出現404頁面的原因，例如「若您無法連上選取頁面，我們獻上最誠摯的歉意」，讓使用者感受到網站經營者對他們的重視。

補充說明：正面肯定用語應用在404頁面有其必要性，為避免使用者恐懼錯誤心理，也加深對網站的信任，故將連結失效利用肯定語句解釋為一件普通事件，讓使用者更安心。

錯誤404頁面也能行銷！3種設計案例帶你認識

現在我們知道即使是代表網頁失聯的404頁面，只要好好引導使用者，引導使用者前往適合的頁面，依然能帶來良好的行銷效果。那麼有哪些404頁面設計可以參考呢？現在就讓允騰網路行銷為大家介紹兼具美觀與實用的404頁面設計範例！

1.Dr.A：置入公益宣傳影片與捐款管道，賦予404頁面意義

Dr.A錯誤404頁面-錯誤404頁面

Dr.A官網的404頁面置入小腦萎縮症的公益廣告，讓網站跟公益的形象結合，給予使用者良好的品牌印象，頁面除了加入協會的聯繫方式與捐款按鈕，也有Dr.A本身的首頁連結、Line諮詢與FaceBook粉絲專頁連結，降低使用者進入頁面後發現不符期待而離開的機率，是相對理想的404頁面設計。

2.蘋果官網：以搜尋欄為主，準確滿足使用者閱覽需求

蘋果官網404頁面-錯誤404頁面

動線清楚簡明的蘋果官網是許多網站的參考範本，若網頁網址剛好有更改，但未進行301轉址就可能發生頁面失聯的情況，導致使用者點入後出現404頁面。然而蘋果官網以一貫的「少即是多」哲學來設計404頁面，將搜尋欄位置入404頁面中央，讓使用者可改以輸入的方式，搜尋感興趣的頁面內容。

3.可樂旅遊：結合旅遊的品牌形象，提升創意與巧思

可樂旅遊錯誤404頁面-錯誤404頁面

有別於其他SEO電商網站直接在失效的網頁放上大大的404作為區別，可樂旅遊的404頁面寫著「這裡是撒哈拉沙漠」，提醒各位旅行者正途經撒哈拉沙漠，但撒哈拉沙漠不是終點，因為使用者可以點選其他有興趣的頁面繼續瀏覽。可樂旅遊的404頁面除了使用地名比喻網頁失聯，也列出遇到404頁面的3個原因，讓使用者能採取行動，初步排除這些原因：

找不到造訪頁面。
輸入的網址不正確。
網路訊號問題。

潛意識行銷當道！【允騰網路行銷】專注細節，為你設計有助於SEO的404頁面

你的404頁面可以客製化！雖然404狀態代碼用意是告知用戶端「這個網頁不存在」，但只要將動線規劃完善，置入搜尋欄、首頁，甚至推薦產品等，方便使用者直接點選其他連結，404頁面也能提高使用者在網站的時間，降低跳出率（Bounce Rate），達到良好的SEO成效！上段內容也列舉不同電商的404頁面設計，例如博客來置入推薦產品、momo購物網直接告知頁面不存在，設計上加入專屬元素等，都是值得參考的頁面設計！若想為自己的SEO電商網站量身訂做適合的404頁面，歡迎交給擁有超過12年網路行銷經驗的【允騰網路行銷】，幫助超過100家以上企業從0開始到年營收破千萬，深入研究潛意識的重要，人類行為是在95%的潛意識中進行，意識層面僅佔5%（哈佛大學杰拉德・札爾特曼教授的95：5法則），比起肉眼所能見的，我們認為「看不見的更關鍵」，因此從頁面的用詞、顏色、動線流暢度，允騰網路行銷都用心專注每一個細節，做好行銷，讓客戶的營收更有感！我們也知道成功並非一蹴可幾，堅持透過正當、正直的管道，滿足Google搜尋引擎的原理與偏好，導入SEO策略，讓網站在搜尋結果頁面搶佔更靠前的排名，「逐步」躍升至第1頁第1名！