WEB制作関連

404エラーページ作成のススメ

通常サイトにアクセスしていてページが削除されていたり、タイプミスなどでURLが間違っているとエラーページが表示されますよね。

ただこれでは何らかの目的でサイトに訪れたユーザーを逃してしまいます。まるで店員さんに商品を尋ねたら探しもせずに「置いてなければないですねー。」と言われたようなものです。

そこでエラーページの設置方法と表示するといいんではないかという要素をまとめてみました。

まずリクエストのエラーには以下があります。

401 Unauthorized パスワード制限など認証が必要なときに、正しく認証されなかった場合に表示されるエラーページ
403 Forbidden パーミッションの設定が正しくない、または 『 .htaccess 』 で特定のホスト・IPの許可/制限を行っていて弾かれた場合のエラーページ
404 Not Found リクエストされたページが無い場合に表示されるエラーページ
500 Internal Server Error CGIのエラーや 『 .htaccess 』 の設定ミスの場合に表示されるエラーページ

ここから、URLのタイプミスや削除したページが検索エンジンやブックマークに残ったままでおこる可能性が高い404エラーの対策ページを作成することにします。

ちなみに本サイトはチカッパさんを利用しているのでデフォルトでは以下のようなエラーページが出ます。

100921_4.jpg

ではエラーページにはどういった情報が必要でしょうか。
まずは、なんでエラーページに飛ばされたかを伝えてあげる必要がありますね。

お探しのページは見つかりませんでした。
URLがすでの削除されているかURLが間違っている可能性があります。

といった具合にユーザーにどうしてエラーページに飛ばされたかを伝えます。

URLのタイプミスであればアドレスバーを確認してもらえばいいのですが、ここで重要なのはこのユーザーは、サイト自体に興味をもってくれているということと他のコンテンツでも目的の情報を手に入れてもらえる可能性があるということです。

なのであわせてサイト内検索やサイトマップへの案内やコンテンツのリコメンドを表示してあげます。ちなみにこのサイトでは以下のようにエラーページを用意しています。

エラー転送の設定方法

転送にはhtaccessを使用します。以下のように記述して対象としたいディレクトリにアップします。
※最後の行に改行がないとエラーになります。
※パーミッションを「604」とします。

ErrorDocument 401 /file_not_found.html
ErrorDocument 403 /file_not_found.html
ErrorDocument 404 /file_not_found.html
ErrorDocument 500 /file_not_found.html

これでエラーの際に「/file_not_found.html」へと転送されます。ここは作成したページのURLにあわせてください。ここでは一応401・403・500のときもエラーページに転送されるようにしています。

エラー表示の参考サイト

またエラー表示の参考サイトをいくつか紹介します。

エラーとあわせてサイト内検索の案内とコンテンツの一覧が表示されています。 100921_1.jpg

検索ボックスとあわせて「検索ワードランキング」もあり、ユーザーの離脱率をさげています。

100921_2.jpg

ユーザビリティが高いというかなんか面白かったので。エンタメ系であればこういったのもありかもしれませんね。

100921_3.jpg

冒頭で店員さんに「置いてなければないですねー。」と言われたようと書きましたが、企業サイトやECサイトなんかではこのページがしっかりしていると接客姿勢も好印象に感じられるのでぜひ作成することをおすすめします。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEBディレクターズマニュアル

    ツールジプシーの果てに。

    先日、「WEBディレクターの為のEXCEL術(1)作業スケジュール」と…

  2. WEBディレクターズマニュアル

    WEBディレクターの為のコミュニケーション術

    WEBディレクターはWEBの知識はもちろんですが、高いコミュニケーショ…

  3. WEB制作関連

    複数の動画を設置できる「jQuery Youtube Player 」

    埋め込みコードを取得すれば簡単に設置できるYouTubeの動画ですが、…

  4. WEB制作関連

    Word×Dreamweaverで高速コーディングをするワザ

    WEBサイトをコーディングする際にMicrosoftのワードで原稿をも…

  5. WEB制作関連

    インストールされたフォントを一覧できる「wordmark.it」

    自分のPCにインストールされているフォントをブラウザ上で一覧できるWE…

  6. WEB制作関連

    デザイナーなら必ずダウンロードしたいグラフィティなフォント25選

    ちょっと遊んだデザインやアパレル関連などに重宝しそうなグラフィティなフ…

  1. iPhone

    iPhoneのカメラ機能を拡張する「iPhone Lens Dial」
  2. LifeHack・仕事術

    アクセスレポートをEVERNOTEで管理する方法
  3. ソーシャルメディア

    ファンページをつくってFacebookを10倍楽しむ方法
  4. WEB制作関連

    WEB制作者なら必ず入れておきたいFirefoxアドオン50個
  5. 話題・トレンド

    思わず微笑んでしまう画像集
PAGE TOP
Top