プログラミング勉強日記
2020年10月24日
404ページをカスタマイズする方法を初めて知ったのでまとめる。
404ページとは
まず最初に404ページについて説明する。
- 削除されたページにアクセスしたとき
- 間違ったURLを入力したとき
404ページは上記のように存在しないページにユーザがリンクしたときに表示されるエラーページのこと。サーバーにアクセスしたときの表示が404で処理されるので、404ページと呼ぶ。
Googleの例
GitHubの例
オリジナル404ページに記述する内容
オリジナル404ページを作るポイントを紹介する。
- サイトのデザインと統一性を持たせる
- 次の行動を促すようにする
例えば他のページが青を基調にしているのに対して404ページが赤を基調とすると統一性がなくなってしまう。なので、Webサイトのデザインと合わせることで唐突にエラー画面を出されたときに混乱を防ぐことができる。
「ページが見つかりません」だけではユーザがどうすればいいかわかんなくなってしまうので、ページのサイトマップを入れたり、サイト内検索をできるようにしたり、ユーザに次の行動を促す必要がある。
オリジナルの404ページを表示させる方法
.htaccessを使用する。.htaccessのファイルを作成して、404状態のときにどのページを表示するかという設定する。
上の図のようにルートディレクトリに404.htmlを設置し、.htaccessに以下を記述する。
.htaccess
ErrorDocument 404 /404.html
表示させるページのパスはルートパスで記述する。
参考文献
HTMLで404ページの作成方法を現役エンジニアが解説【初心者向け】
オリジナルな404（Not Found）ページの正しい作り方