ホーム > Webサイト管理 > ユーザビリティを考慮したリニューアル「404エラーをカスタマイズ」

ユーザビリティを考慮したリニューアル「404エラーをカスタマイズ」

404エラーページとは

弊社アイビーネットWebサイトを8月末にフルリニューアルしました。

リニューアル時に行った施策として「301リダイレクト」をご紹介しましたが、それ以外にも「404エラーページ」をカスタマイズしました。404エラーページとは「そのページが見つからない場合」に表示される画面です。通常は下記のように味気ない画面になります。

画像：404エラー

この画面が表示される原因はいくつか考えられ、サーバーに元々ファイルが存在しなかったり、リンク先のURLを間違って指定していたという事などがありますが、サイトをリニューアルした事によってURLが変更されている場合にも起こります。

上記のような味気ないエラーメッセージでは、せっかく検索エンジン経由などでアクセスしてくれたユーザーも去っていってしまいます。それを少しでも解消するために404エラーページをカスタマイズしてみました。

弊社では下図の404エラーページを用意しました。404エラーページは、通常のHTMLで制作する事が出来ます。

画像：アイビーネット404エラー

このエラーページが表示されてしまったユーザーに色々な選択肢を与えるため、「ホームへの移動」「サイトマップへ移動」「お問い合わせへ移動」などを用意しました。そして、検索エンジンのクロールが大体終わった頃「Googleカスタム検索」によるサイト内検索を追加しました。

アクセス解析を見ていると、この404エラーページからサイト内に移動してくれるユーザーもいるようで、まずまず成功しているようです。

404エラーページが用意できたら、次に「.htaccess」ファイルを用意します。

.htaccessは下記のように記述します。: ErrorDocument 404 /404ページファイル名
(例：ErrorDocument 404 /404error.html)

記述が完了し、サーバに.htaccessをアップしたら、うまくいっているかチェックをしましょう。下記のサイトでチェックが出来ます。URL欄には存在しないURL(例：http://www.ibnet.ne.jp/☆☆)を入力してやります。

下記のように赤丸の部分に「404 Not Found」とでれば問題ありません。これでオリジナルの404エラーページを適応させることができました。

画像：404エラー

下記のように後半のファイル名を絶対URLで書くと「404 Not Found」ではなく「302 Found」になってしまうので間違えないようにしてください。

間違った.htaccessの記述: ErrorDocument 404 絶対URL/404ページファイル名
(例：ErrorDocument 404 http://www.ibnet.ne.jp/404error.html)

画像：404エラー

「301リダイレクト」と「404エラーページ」を併用する事で、さらにユーザビリティを高めることができます。301リダイレクトで旧URLから新URLに誘導してやり、404エラーページで不明ページから目的のページに誘導してやるのです。

.htaccessに301リダイレクトと404エラーを併記する場合は、下記のように続けて記述してやります。

ErrorDocument 404 /404error.html
Redirect 301 /bigei/ http://www.bigei.co.jp/
Redirect 301 /ibnet/index.html http://www.ibnet.ne.jp/
...
...

最後にかっこいい404エラーページ集をご紹介します。

弊社サイトの404エラーページは、あんまり面白くないデザインになってしまっているので、下記のサイトなどを参考においおい直していこうと思っています。

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

ホーム > Webサイト管理 > ユーザビリティを考慮したリニューアル「404エラーをカスタマイズ」