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デザインギャラリー7選+1

    昨日に引き続いてWEBデザインギャラリーのまとめです。今回はECサイト…

  2. WEB制作関連

    パーツ別のWEBデザインギャラリー8選

    ヘッダー、フッターから見出し、ナビゲーションといったパーツにフォーカス…

  3. WEB制作関連

    MT4.2にFCKEditorを導入しました。

    記事の更新を便利にするべくFCKEditorを導入しました。デ…

  4. WEB制作関連

    WEBサイト高速化に便利!「Google PageSpeed Insight」

    「0.1秒の遅れが1%の売上に影響する」と言われるくらいWEBマーケテ…

  5. WEB制作関連

    シンプルでカッコいいポートフォリオサイト30個

    フリーのクリエイターさんなどのポートフォリオサイトのまとめです。…

  6. WEB制作関連

    デザイナーなら必ずダウンロードしたいフリーフォント100個

    クールなものやポップなものなど、デザインに重宝しそうなフリーフォントの…

  1. 話題・トレンド

    みんなに虹を届けるロボットが素敵。
  2. WEB制作関連

    WEBサイト心理学|視線解析
  3. WEB制作関連

    HTML5でできることがひと目で分かるWEBサイトまとめ
  4. WEB制作関連

    徹底比較。クロスブラウザのテストツール15個
  5. WEB制作関連

    ガーリーなPhotoshopのレイヤースタイル
PAGE TOP
Top