(cache) リンク切れ時に適切な404ページを表示をする-独学!未経験からWebデザイナーになる!!

リンク切れ時に適切な404ページを表示をする

Webページを閲覧している際、まれにリンク切れが発生している状況に出くわすことがあります。リンク切れとは、HTML内のaタグで、あるページにリンクが張られているにも関わらずそのページが存在しない状態のことですね。

このリンク切れのページを適切に設定していないということは、ユーザビリティの観点から考えるとあまり好ましくありません。そもそもリンク切れなど無ければいいのですが、Webページは人が作るもの。どうしてもリンク切れが発生してしまう可能性はゼロにできません。ですので、適切に設定することが重要になってきます。

このページでは、ファイルが存在しなかった場合のページ（404ページとも呼ばれます）を作成した方がいい理由や、制作方法をご紹介したいと思います。

リンク切れのページがそのままではいけない理由

まずは、リンク切れのページが、なぜユーザビリティに影響をあたえてくるのかを見てみましょう。

デフォルトの表示では戸惑ってしまうユーザも

リンク切れページのデフォルト表示は、非常にシンプルです。シンプルと言えば聞こえがいいので、簡素といった方が適切かもしれません。この画面が非常に素っ気なく分かりづらいので、ユーザによっては何がおきたのか理解できない場合もあります。例えば、Windows Vista のIE7デフォルトのリンク切れページは、下記のような表示でした。

IEはリンク切れの際、制作者が何もしなくても、表示を多少分かりやすくしてくれます。これならまだましですが、Firefoxなどで見た場合は、下記のようにサーバが返したそのままのページを表示します。

これは分かりづらいですよね。インターネットは老若男女が利用しますし、ネットリテラシーもさまざまだからです。それに、きちんとデザインされた画面から、いきなりこのような画面が表示されたら戸惑ってしまう人もいるでしょう。特にWebデザイナーが制作するのは商用サイトですから、これでは配慮がちょっと足りません。

自サイト以外からのリンクに対して

「リンク切れはDreamweaverのチェックツールで調べるから大丈夫」という方もいるかもしれません。ページの増減がそれほどないのであれば、状況によりそれでもいいのかもしれません（サイトの重要度次第です）。

しかし、リンク切れが発生するのは、何も自サイト内からのリンクだけとは限りません。すでに削除したページへのリンクが、他サイト（一般サイトや検索エンジンの検索結果）から向けられている可能性もあります。

そういったリンクをユーザが踏んだ際、前述のような画面が表示されるのと、適切な表示がなされるのとでは、どちらがユーザにとって使いやすい親切なサイトと言えるでしょうか。言うまでもなく、リンク切れページを適切に表示する方がいいですよね。

404エラーページを適切に作る

サーバ内にファイルが見つからなかったときに表示される、カスタム404エラーページを指定する具体的な方法は、.htaccessというサーバの設定ファイル内に下記を記載するだけです。（.htaccessについては、テクニカルノートカテゴリ内.htaccessの設定のページも参考にしてください）

ErrorDocument 401 [ 404ページのHTMLファイル名 ]

具体例などの詳細は、テクニカルノートカテゴリ内エラーページを指定するをご覧ください。ここでは、ユーザビリティ的に気をつけたいことをお話しします。

404ページは、ドキュメントルートからの絶対指定にする

.htaccess内のファイルは、httpから始まるURI指定もできます。しかし、それでは指定したURIへリダイレクト（転送）してしまうので、ユーザビリティ的にはよろしくありません。

具体的に見てみましょう。例えば、case1とcase2のような指定があったとします。

# case1
ErrorDocument 401 http://example.jp/404.htm

# case2
ErrorDocument 401 /404.htm

そして、存在しないURIである　http://example.jp/hoge/foo/bar/　にアクセスしたとします。もちろん、case1でもcase2でも、同じようにカスタムの404エラーページが呼び出されます。しかし見た目は同じなのですが、アドレスバーを見ると違いがあります。具体的には下記の通りです。

# case1のアドレスバーの表示
http://example.jp/404.htm

# case2のアドレスバーの表示
http://example.jp/hoge/foo/bar/

case1がなぜユーザビリティ的に良くないかというと、手打ちでURIを打ち込んだ場合など、ミスをしたら404ページにリダイレクトしてしまうからです。意外に思われる方もいるかもしれませんが、ネットに慣れているユーザ層は、手打ちでファイル名部分をちょちょっと変えたり、推測で打ち込んでみたりすることがあります。

この際、一字でも間違ってしまうと、404ページに強制的にリダイレクトされてしまい、もう一度最初から打ち直さなければならなくなります。その点case2なら、間違ってもアドレスバーの表記は変わらないので、打ち直しが簡単に済むのです。

ネット初級者はやらないようなことですし、小さな差ではありますが、わざわざcase1のような方法を採る必要はないということです。

サイトマップ的なリンクや検索Boxなどを用意する

個人サイトではあまりやらないかもしれませんが、特に商用サイトは利益が絡んでくるため、できる限りユーザビリティを高めなければなりません。たとえば404ページ内に、サイトマップ的なリンクを配置したり、サイト内の検索Boxを用意したりするといいでしょう。

ユーザにとって使いやすければどのようにしてもいいですが、最低限、404ページからTopページへのリンクだけは用意しておくのが一般的です。

404ページの表示を認識できる仕組みを用意する

カスタム404エラーページを作ったからと行って、リンク切れを放置してあるサイトが使いやすいはずがありません。不本意な404エラーはできる限り早く修正することが、ユーザビリティの改善につながります。

具体的には、404ページが表示されていることを、制作者が認識できるようにしておくと良いでしょう。「どこのページからリンクされて、結果404ページが表示された」ということが分かれば、それを修正することができるからです。

例えば、アクセス解析を404ページに仕込んでおき、一定期間ごとに確認するという方法があります。404ページにアクセスしたユーザを追跡して、どのページからリンクされていたのかを確認するのです。（※アクセス解析の種類によっては、追跡ができなかったり、404ページを特定するための工夫が必要になることもあります）

他にも、PHPやPerlなどのサーバサイドのスクリプトを用いて、404ページを表示したときにログをとったり、サーバ自体の生ログを見たりするのもいいでしょう。他にも簡易的な手段として、Google ウェブマスターツールでも「クロールエラー」という項目で確認することができます。

これらをチェックすることにより、404エラーを認識＆修正することができ、よりユーザにとって快適なサイトを維持することに役立ちます。

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)