プログラミング勉強日記

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）ページの正しい作り方