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制作関連

    使いづらい(!?)けどフリーで高品質なアイコン素材60個

    「汎用性がない。」「何に使うの?」というものもありますが、ピッタリはま…

  2. WEB制作関連

    便利なオンライン校正管理ツール19選+2

    いろいろ試しているんですがなかなかこれといった手法に行きつかないデザイ…

  3. WEB制作関連

    WEBサイト心理学|視線解析

    「ウソを付く時に人は右の方を見てしまう。」というのを聞いたことはありま…

  4. WEB制作関連

    鮮やかな色合いが目を引くデザインのWEBサイト25個

    鮮やかな色使いでデザインされたWEBサイトのまとめです。 (さ…

  5. WEB制作関連

    レトロなデザインのWEBサイトまとめ

    レトロな雰囲気を持ったデザインのWEBサイトのまとめです。 (…

  6. WEB制作関連

    MT4.2でブログ記事に関連記事一覧を表示

    サイト内回遊を高めるために有効な関連記事表示。これを自分のブログに…

  1. Design Items

    思わず感心してしまう秀逸なアイデアの雑誌広告
  2. WEB制作関連

    テクスチャ使いが秀逸な35個のWEBサイト
  3. WEB制作関連

    WEBページを丸裸にしてしまう「The Sexy Curls jQuery」
  4. LifeHack・仕事術

    情報の波にのまれずに整理する方法
  5. WEBマーケティング

    WEBディレクターなら知っておきたいWEBサービス25選
PAGE TOP
Top