WEB制作関連

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

0
entry_404error
Pocket

通常サイトにアクセスしていてページが削除されていたり、タイプミスなどで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サイトなんかではこのページがしっかりしていると接客姿勢も好印象に感じられるのでぜひ作成することをおすすめします。

Pocket

AD

Archive

Recommend Post

このサイトはWeb制作に役立つ情報を中心にデザインやマーケティングなどの情報や役立つツール、ライフハックや気になった話題などの情報を発信しています。

登録いただいたメールアドレスにこのサイトの最新情報をお届けします。

Top