SEO 網站優化

[SEO教學]ASP.NET客製化404頁面是否符合SEO設計?

awoo Intelligence

2013-07-12

(更新日期: 2023-12-28)

在這個SEO逐漸在企業中抬頭的時代，也越來越多企業重視易用性體驗以及搜尋引擎友善度的部分，其中404頁面同時就兼顧了易用性體驗以及搜尋引擎友善度，在開始介紹404頁面該怎麼設計之前，我們先來看看兩大搜尋引擎對於404頁面的看法。

圖一：IIS預設404頁面

從Google所提供的網站管理員工具之中，我們可以看到404的定義如下：

404 網頁是指使用者嘗試連結您網站上不存在的網頁 (因為他們按一下無效連結、已刪除網頁，或輸入了拼字錯誤的網址) 時所看到的網頁。會稱之為 404 網頁，是因為網頁伺服器在回應找不到的網頁的要求時，會傳回 HTTP 狀態碼 404，表示找不到網頁。雖然標準 404 網頁會依您的 ISP 而有所不同，但通常都不會為使用者提供任何實用資訊，因此大部分使用者可能會離開您的網站。

Google網站管理員工具完整介紹

從Bing所提供的網站管理員工具之中，我們可以看到404的定義如下：

你所看到的404頁面是，當你點擊一個壞掉的連結。頁面往往總是顯示了一條相當簡短的訊息，例如”找不到頁面(Page not found)”。404頁面的設計為的是告知用戶他們點擊的連結或資源不正確或不再可用，以及指引訪客回到網站上的其他內容。

Bing網站管理員工具完整介紹

客製化404頁面規範如下：

明確告訴您的訪客，找不到頁面的原因。如：網頁已被移除or無效的網址。
確認您的 404 網頁與您網站版型一致或是風格相同。
新增連結至您最熱門文章、商品以及回首頁的連結。
提供網站管理員聯絡資訊，以便網站管理員即時找出訪客到達該頁原因。
確保404頁面在伺服器是返回404狀態碼。
為訪客提供替代方案。如：搜尋框、相關產品、回首頁or產品頁連結
請使用網址變更工具通知 Google 您網站的相關遷移事宜。

以下提供幾個好用工具，可協助驗證404頁面是否回傳正確404狀態碼

Redirect Checker：http://www.internetofficer.com/seo-tool/redirect-check/
View HTTP Request and Response Header：http://web-sniffer.net/
Redirect Detective：http://redirectdetective.com/
Live HTTP Headers(for Chrome)：https://chrome.google.com/webstore/detail/live-http-headers/iaiioopjkcekapmldfgbebdclcnpgnlo
Redirect Path(for Chrome)：https://chrome.google.com/webstore/detail/redirect-path/aomidfkchockcldhbkggjokdkkebmdll

圖二：良好的客製化404頁面範例

ASP.NET客製化404頁面該如何撰寫

I.在預設情況下，ASP.NET是使用的web.config來處理404錯誤，

<customErrors defaultRedirect="GenericError.htm" mode="On">
 <error statusCode="404" redirect="404.html"/>
</customErrors>

然而，這種方法會出現一個問題，那就是Http Responsec會先回傳302暫時性轉址狀態碼後，在回傳一次200(OK)碼，這種設計方式對於搜尋引擎是不夠友善的。

ASP.NET客製化404解決方案1

讓我們先修改web.config的設定來處理404錯誤。

<customErrors defaultRedirect="GenericError.htm" mode="On">
 <error statusCode="404" redirect="404.aspx"/>
</customErrors>

緊接著讓我們在404頁面內的Page_Load事件下添加此段程式碼

protected void Page_Load(object sender, EventArgs e)
 {
  Response.StatusCode = 404;
 }

現在，我們測試後可以發現，雖然已回傳404狀態碼，但是還是會先經過一次的302暫時性轉址，所以這樣的方法對於搜尋引擎還不夠友善。

ASP.NET客製化404解決方案2

讓我們先把web.config的404設定語法先註解掉。

<!--<customErrors defaultRedirect="GenericError.htm" mode="On">
 <error statusCode="404" redirect="404.html"/>
</customErrors>-->

緊接著在Global.asax新增以下代碼，來處理404錯誤

protected void Application_Error(object sender, EventArgs e)
{
Exception ex = Server.GetLastError();
if (ex is HttpException)
  {
  if (((HttpException)(ex)).GetHttpCode() == 404)
  Server.Transfer("~/404.html");
  }
  // Code that runs when an unhandled error occurs
  Server.Transfer("~/GenericError.htm");
}

現在讓我們再次測試，可以發現到只有回傳404狀態碼，這樣的設計就能完全符合客製化404頁面的設計。