ウェブサーバが表示するエラーページを、独自の内容に変更したい!

味気ないデフォルトのエラーページ

味気ないデフォルトのエラーページ

存在しないページをブラウザで表示させようとすると「404 Not Found」エラーが表示されます。ユーザ認証に失敗した際には「401 Authorization Required」などと表示されますし、CGIの実行で問題が発生した際には「500 Internal Server Error」などと表示されます。これらのエラーページは、デフォルトでは右図のように大変味気ないものです。


 
これらのエラーページに表示される内容は、自分で作成した独自の内容に変更できます。例えば、All Aboutサイト内でも、下図のように「404 Not Found」エラーページを独自の内容に変更して表示しています。

「404 Not Found」エラーページを独自のデザインにカスタマイズしている例

「404 Not Found」エラーページを独自のデザインにカスタマイズしている例


上図のように、ウェブサーバが表示する各種エラーページをカスタマイズする方法は、とても簡単です。エラーページとして表示させたいHTMLを別途作成しておき、ウェブサーバの設定記述ファイルである「.htaccess」ファイルにその場所を記述するだけです。


 

エラーページを独自の内容にカスタマイズしておくメリット

ナビゲーションを掲載してアクセス者を逃さない、Apple.comの「404 Not Found」ページ

ナビゲーションを掲載してアクセス者を逃さない、Apple.comの「404 Not Found」ページ

右図は、Apple社サイトの「404 Not Found」エラーページです。エラーが発生した事実の表示だけでなく、サイト内の各コンテンツへ移動するために必要なナビゲーションも一緒に掲載されていて、とても使いやすくなっています。

デフォルトの味気ないエラーページが表示されると、閲覧者は前のページに戻る以外に方法がありません。もし、検索サイトや外部サイトからのリンクをたどってエラーが表示された場合は、サイトの閲覧を諦めてしまうかも知れません。

しかし、このようにエラーページ内に適切なナビゲーション機能が用意されていると、閲覧者はそれらのリンクを使って閲覧を継続できます。つまり、せっかく訪れてくれたアクセス者を逃さずに済むわけです。ぜひ、自サイト専用に独自のエラーページを用意してみて下さい。


 

独自に作成したエラーページを表示できる設定ファイル「.htaccess」

サーバの設定を記述する特殊なファイル「.htaccess」

サーバの設定を記述する特殊なファイル「.htaccess」

「404 Not Found」などの各種エラーページをカスタマイズする(=独自に作成したエラーページと置き換える)には、右図のような「.htaccess」という特殊なファイルを使います。

この「.htaccess」ファイルは、ウェブサーバの設定を記述できるテキスト形式のファイルです。エラーページをカスタマイズするほかにも、認証機能を設定したり、自動転送を設定したり、様々な用途に使えます。詳しくは、記事「.htaccessファイルの書き方と設置方法」で解説していますので、ご参照下さい。

この「.htaccess」ファイル内に、エラーページの置き換え先ファイル名を記述することで、独自のエラーページを表示できます。

カスタマイズできるエラーページの種類

デフォルトのエラーページ群

デフォルトのエラーページ群

独自の内容にカスタマイズできるエラーページは、ページが見つからなかった場合の「404 Not Found」だけではありません。たくさんの種類がありますが、よく見かけるエラーには例えば以下のようなものがあるでしょう。これらにも、それぞれ独自のエラーページを用意できます。

  • 401 Unauthorized (認証に失敗)
  • 403 Forbidden (アクセス禁止)
  • 404 Not Found (見つからない)
  • 500 Internal Server Error (サーバ内部のエラー)
  • 503 Service Unavailable (過負荷などで利用不可)

今回は、各種エラーページを独自の内容に変更するための操作方法をご紹介致します。ぜひ、分かりやすいエラーページを作ってみて下さい。

【この記事の目次】
1. エラーページを独自の内容にする「.htaccess」ファイルを作成 (p.2)
2. 各種エラーページの種類と、独自ページに書いておくと便利な内容 (p.3)
3. 「.htaccess」ファイルのアップロード先、IEの簡易表示を回避する方法 (p.4)
4. うまくいかない場合の原因と解決方法 (p.5)