リンク切れ時に適切な404ページを表示をする
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
Webページを閲覧している際、まれにリンク切れが発生している状況に出くわすことがあります。リンク切れとは、HTML内のaタグで、あるページにリンクが張られているにも関わらずそのページが存在しない状態のことですね。
このリンク切れのページを適切に設定していないということは、ユーザビリティの観点から考えるとあまり好ましくありません。そもそもリンク切れなど無ければいいのですが、Webページは人が作るもの。どうしてもリンク切れが発生してしまう可能性はゼロにできません。ですので、適切に設定することが重要になってきます。
このページでは、ファイルが存在しなかった場合のページ（404ページとも呼ばれます）を作成した方がいい理由や、制作方法をご紹介したいと思います。
リンク切れのページがそのままではいけない理由
まずは、リンク切れのページが、なぜユーザビリティに影響をあたえてくるのかを見てみましょう。
デフォルトの表示では戸惑ってしまうユーザも
リンク切れページのデフォルト表示は、非常にシンプルです。シンプルと言えば聞こえがいいので、簡素といった方が適切かもしれません。この画面が非常に素っ気なく分かりづらいので、ユーザによっては何がおきたのか理解できない場合もあります。例えば、Windows Vista のIE7デフォルトのリンク切れページは、下記のような表示でした。
IEはリンク切れの際、制作者が何もしなくても、表示を多少分かりやすくしてくれます。これならまだましですが、Firefoxなどで見た場合は、下記のようにサーバが返したそのままのページを表示します。
これは分かりづらいですよね。インターネットは老若男女が利用しますし、ネットリテラシーもさまざまだからです。それに、きちんとデザインされた画面から、いきなりこのような画面が表示されたら戸惑ってしまう人もいるでしょう。特にWebデザイナーが制作するのは商用サイトですから、これでは配慮がちょっと足りません。
自サイト以外からのリンクに対して
「リンク切れはDreamweaverのチェックツールで調べるから大丈夫」という方もいるかもしれません。ページの増減がそれほどないのであれば、状況によりそれでもいいのかもしれません（サイトの重要度次第です）。
しかし、リンク切れが発生するのは、何も自サイト内からのリンクだけとは限りません。すでに削除したページへのリンクが、他サイト（一般サイトや検索エンジンの検索結果）から向けられている可能性もあります。
そういったリンクをユーザが踏んだ際、前述のような画面が表示されるのと、適切な表示がなされるのとでは、どちらがユーザにとって使いやすい親切なサイトと言えるでしょうか。言うまでもなく、リンク切れページを適切に表示する方がいいですよね。
404エラーページを適切に作る
サーバ内にファイルが見つからなかったときに表示される、カスタム404エラーページを指定する具体的な方法は、.htaccessというサーバの設定ファイル内に下記を記載するだけです。（.htaccessについては、テクニカルノートカテゴリ内.htaccessの設定のページも参考にしてください）
具体例などの詳細は、テクニカルノートカテゴリ内エラーページを指定するをご覧ください。ここでは、ユーザビリティ的に気をつけたいことをお話しします。
404ページは、ドキュメントルートからの絶対指定にする
.htaccess内のファイルは、httpから始まるURI指定もできます。しかし、それでは指定したURIへリダイレクト（転送）してしまうので、ユーザビリティ的にはよろしくありません。
具体的に見てみましょう。例えば、case1とcase2のような指定があったとします。
ErrorDocument 401 http://example.jp/404.htm
ErrorDocument 401 /404.htm
そして、存在しないURIである http://example.jp/hoge/foo/bar/ にアクセスしたとします。もちろん、case1でもcase2でも、同じようにカスタムの404エラーページが呼び出されます。しかし見た目は同じなのですが、アドレスバーを見ると違いがあります。具体的には下記の通りです。
http://example.jp/404.htm
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エラーを認識＆修正することができ、よりユーザにとって快適なサイトを維持することに役立ちます。
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
コメント
- BINGE さん 2017年01月16日13時55分
大手のサイトとかで、リンク切れの場合、多くは、リンク切れ表示の後に、新しいリンク先にジャンプし、リンク切れ以前のように通常表示されますが、これは？指定したアドレスに、新アドレスにジャンプするように、コードを記述してあるのでしょうか？ 例）→404 error page not Found 自分）→ガビーン！ 新しいリンクに強制ジャンプ！ 自分）→Ｂｏｏｋｍａｒｋしよーっと！
- 馬場誠 さん 2017年01月17日09時16分
BINGEさん、こんにちは。 具体的にどのような転送の実装方法を採っているかはサイトによっても違いがあるとは思いますが、おっしゃるような感じでジャンプさせることも可能です。 ただ、新しいURLが明らかな場合、404（ページが見つからない）ではなく、ページが引っ越したという意味の301（恒久的な転送）を返して自動転送させる方が、実運用では一般的ですね。 そうすれば、ユーザーが気づかない内に一瞬でジャンプするので面倒がありませんし、URLが変わっても検索エンジンの評価が（ほぼ）引き継がれるからです。 そのサイトでは、いったん404エラーを出すべき何らかの理由があるのかもしれませんね。
Web制作Tips- デザイン
- ├フリーの写真素材を有効活用しよう
- ├デザイナーならこだわりたいカーニング（文字詰め）
- ├文字のジャンプ率で適切なサイトイメージを演出する
- ├TPOを考えてハズさないフォントを選ぶ
- └失敗しない配色の基本
- ユーザビリティ
- ├そのフォントサイズ、適切ですか？
- ├リンクテキストをわかりやすくする
- ├フォームのリセットボタンを考える
- ├リンク切れ時に適切な404ページを表示をする
- └フォームの確定ボタンは右?左?
- コーディング
- ├文法チェッカーで正しい(X)HTML/CSSを書こう
- ├インデントで読みやすいソースコードを
- ├文字化けを防ぐ&解消する方法
- └背景画像ありのボックスの文字をはみ出させない方法
- その他
- ├ディレクトリ構造は適切に
- └絶対パス?相対パス?ファイルの指定方法いろいろ
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)