Home > サーバ構築Tips > 404 エラーページのカスタマイズ .htaccess

404 エラーページのカスタマイズ .htaccess

.htaccess を使用して サイトにカスタマイズした 404 Error File Not Found ページを表示させる方法をご紹介したいと思います。

404 Error File Not Found とは

多くの方が目にされたことのある 404 Error とは ・・・

ユーザーがサイト上に存在しないページにアクセスした時、そのページが削除されていた、URLが変更されて 301リダイレクト処理されていなかった場合、そもそもURLのスペルを間違えて入力した場合等 存在しないページのリクエストに応答する際、Webサーバは HTTPレスポンスヘッダー ステータス 404 を返します。

その時 表示されるのが 404 Error File Not Found ですのでこのページは 404エラーページ、又は404ページと呼ばれています

404 エラーページのカスタマイズ

通常の 404 ページは ディフォルトで提供されていますが、それこそ 「404エラー ページがありません」等 非常にそっけない表現の物が大半だと思います。

アクセスしたユーザはその時点でブラウザを閉じてしまうか元の検索結果一覧のページに戻ってしまうでしょう。

404 Error ページは HTML で作成する事も可能な為、自分でカスタマイズ可能です。

Google ウエブマスター/サイト所有者ヘルプでは・・・

サーバーへのアクセス権がある場合は、独自の 404 ページを作成することをおすすめします。404 ページをわかりやすくカスタマイズすることにより、探している情報の場所をユーザーに知らせたり、役に立つ他のコンテンツを提供したり、サイト内をさらに探すよう促したりできます。

ユーザーを別のサイトに移動させることなく、探している情報を見つけてもらえるような 404 ページは、次のように作成することをおすすめします。

  • ユーザーに対して、探しているページが見つからないことを明確に伝えます。
  • 親しみやすく魅力的な言葉を使用します。
  • 404 ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。
  • 最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
  • 無効なリンクを報告する方法をユーザーに提供するのも 1 つの方法です。

404 ページをサイトと同じデザインにします に注目

Google の ウエブマスター/サイト所有者ヘルプには 404ページを サイトのその他部分と同じデザイン、ナビゲーションを含んだものが望ましいと しています。

Movable Type のウエブページで404エラーページを作成する

Movable Type のウエブページで 404エラーページを作成すればサイトデザインやナビゲーションは サイトと同一のデザイン、ナビゲーションで作成できます。

タイトルは 「404 ERROR 」等 ユーザーに対して、探しているページが見つからないことを明確に伝える事ができる言葉を選びます。

内容は Google ヘルプにあるように ユーザーを別のサイトに移動させることなく、探している情報を見つけてもらえるような内容にします。

ファイル名は 「404.html」 として保存します。

HTTPレスポンスヘッダー 404 を返すように設定する

再び Google ウエブマスター/所有者ヘルプでは・・・

(注: この記事は、カスタム 404 ページのコンテンツを作成するためのガイドラインです。新しい 404 ページが表示されるようにサーバーを設定する方法については、サーバーまたはウェブ ホスティング サービスのドキュメントを参照してください。この場合も、必ずウェブサーバーからユーザーやスパイダーに 404 ステータス コードを返して、検索エンジンがカスタム 404 ページを誤ってインデックスに登録しないようにする必要があります。)

.htaccess でカスタム404ページを表示させる

さて、作成した カスタム404 エラーページ を 表示させて HTTPレスポンスヘッダーに表示させる為には .htaccess を利用します。

.htaccess を記述する

仮に先ほど作成した 404.html の保管場所が

http://www.example.com/error/404.html

だとすれば .htaccess には 以下のように記述します。

ErrorDocument 404 /error/404.html

.htaccess をサイトに転送する

次に 作成した .htaccess を FTP でサイトのルートに転送します。

HTTP レスポンスヘッダーを確認する

サイトで404エラーページの表示確認

まず、サイトに存在しない URLを入力して 先ほど作成した 404エラーページが表示されるか確認します。

仮に

http://www.example.com/hoge/hoge.html

この時 アドレスバーには 存在しないページのURLがそのまま表示されているのが正解です。

そしてその状態で 画面は 先ほどカスタムした404.html が表示されていればオッケーです。
もし アドレスバーに以下のように

http://www.example.com/error/404.html

404.html が表示されていれば 302リダイレクトになっていますので もう一度 .htaccessの記述を確認して 再アップロードします。

 

HTTP レスポンスヘッダーを確認する

必ず HTTPレスポンスヘッダーが 404 ステータスを返しているか確認します。

以下のサイトで HTTPレスポンスヘッダーを確認します
http://web-sniffer.net/

HTTP(S)-URL: http://www.example.com/hoge/hoge.html

と入力して Submit を押します

しばらくすると 以下のレスポンスヘッダーが確認できます。

HTTP Response Header

Name Value Delim
HTTP Status Code: HTTP/1.1 404 Not Found
Date: Sat, 04 Jul 2009 11:41:52 GMT 
Server: Apache 
Last-Modified: Sat, 04 Jul 2009 07:57:28 GMT 
ETag: "11bd14c-20da-4a4f0b68;4a4f0b73" 
Accept-Ranges: bytes 
Content-Length: 8410 
Connection: close 
Content-Type: text/html


HTTP/1.1 404 Not Found

と表示されればオッケーです。

 

レスポンスヘッダー HTTP 404 を返さないケースが少なからずあります。

レンタルサーバによっては 標準で用意されている 404エラーページには
画面上で 404エラーと表示されても 実際は 302一時移転を返すものがあります。

御自身のお借りになっているサーバを確認されて 是非 404エラーペーをカスタマイズして 正常に HTTP/1.1 404 Not Found が返るよういしておいた方がよいと思います。


 

Trackbacks:0

TrackBack URL for this entry
http://www.googrekas.com/mt/mt-tb.cgi/34
Listed below are links to weblogs that reference
404 エラーページのカスタマイズ .htaccess from アフィリエイトで稼ぐためのサーバ構築スキル

Home > サーバ構築Tips > 404 エラーページのカスタマイズ .htaccess

Search
Feeds

Return to page top