404頁面怎麼設計?首先我們要了解什麼是404頁面,404跟500、200一樣都屬於HTTP狀態代碼(HTTP Status Code),當我們點開一間電商平台,等於用戶端(Client)的瀏覽器發出訪問網頁的請求,在正常情況下,網站的伺服器(Server)就會向使用者呈現網頁,並以代碼表示,通常有以下3種情況:
- 網頁上出現500代碼代表伺服器端出現錯誤而無法連上網站。
- 200代表伺服器正常傳回網站頁面。
- 404意思剛好相反,表示頁面因某些原因失聯,伺服器無法正確傳回官網頁面。
404頁面會降低使用者閱覽體驗,是許多SEO電商網站經營者極力避免的狀況,但其實良好的404頁面就像中繼站的角色,讓使用者能轉向其他適合的頁面!那麼理想的404頁面該怎麼設計?接下來就讓允騰網路行銷整理4個原則,帶你用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頁面設計直截了當說明「頁面連結錯誤」,並於下方置入推薦商品引導使用者前往其他網頁瀏覽,或使用搜尋功能查詢商品資訊。
跟博客來相比,momo購物網站的404頁面設計顯得簡約許多,斗大的404與「很抱歉,這個網頁不存在」提示,搭配桃子吉祥物momo co蹲著畫圈圈的落寞模樣,這麼可愛的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電商網站固定這些區塊,即使使用者在不同頁面,也能隨時點擊品牌介紹、服務項目、聯繫方式等重要資訊,提供更人性化的閱覽體驗。
你可能有興趣:如何做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頁面置入小腦萎縮症的公益廣告,讓網站跟公益的形象結合,給予使用者良好的品牌印象,頁面除了加入協會的聯繫方式與捐款按鈕,也有Dr.A本身的首頁連結、Line諮詢與FaceBook粉絲專頁連結,降低使用者進入頁面後發現不符期待而離開的機率,是相對理想的404頁面設計。
2.蘋果官網:以搜尋欄為主,準確滿足使用者閱覽需求
動線清楚簡明的蘋果官網是許多網站的參考範本,若網頁網址剛好有更改,但未進行301轉址就可能發生頁面失聯的情況,導致使用者點入後出現404頁面。然而蘋果官網以一貫的「少即是多」哲學來設計404頁面,將搜尋欄位置入404頁面中央,讓使用者可改以輸入的方式,搜尋感興趣的頁面內容。
3.可樂旅遊:結合旅遊的品牌形象,提升創意與巧思
有別於其他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名!
你可能有興趣:SEO關鍵字搜尋排名第1頁要怎麼做?7大重點一次搞懂!
發布時間2023/05/08|最近更新:2024/10/04| 2741
亞洲最強SEO電商網站-允騰網路行銷
免費專線:0800-258-456(點擊撥打)
官方LINE@:@eaglesfly(點擊加好友)
FB臉書專頁:允騰網路行銷(點擊前往)
FB臉書私訊:任何問題找小編(點擊私訊)
線上客服:平日週一至週五 09:00-18:00