404 NotFoundページ(エラーページ)のつくり方
- acky.infoホーム
- デザインのヒント
- Webデザイン
- 404 NotFoundページ(エラーページ)のつくり方
404 NotFoundページ(エラーページ)のつくり方の概要です
404 NotFoundページは、ページの削除や移動などでページ見つからないときに表示されるページです。サイト独自の404ページがないときはブラウザ標準のページが表示されてしまいます。
少しの設定とひと手間でサイト独自のエラーページを作って、サイトに統一感をもたせましょう。
404ページを表示させるための.htaccessの設定
.htaccessをサーバーにアップロードします。
独自の404ページを表示させるためには、エラーページを指定する.htaccessをつくり、サーバーへアップロードします。
※.htaccessが使えないときはサーバーエンジニアに設定してもらいましょう。
.htaccessのつくり方
- メモ帳などのテキストファイルに『htaccess』と名前を付けます。※Windowsは . から始まるファイルをつくれません。
- 作ったファイルに下のコードを書いて保存します。
.htaccessの例
ErrorDocument 404 /error/
- ファイルをFTPソフトを使ってルートディレクトリ（public_htmlなど）へアップロードしてから『.htaccess』とファイル名を変えます。
これでページが見つからないときに /error/ のページが表示されるようになりました。.htaccessの/error/の部分はページのディレクトリにあわせて変更できます。
404ページのつくり方
エラーページも下層ページのひとつです。
.htaccessに/error/と書いたので404ページは他のページと同じように下層ページのひとつとしてerrorフォルダの中につくります。
ページの中のリンクや画像のパスは/からはじまるルート相対パスで指定します。
ルート相対パスではなく相対パスで指定されていると、404ページの表示される階層によってはパスがずれてリンク切れや画像が表示されないときがあるからです。しかし、テンプレート部分などが相対パスで書かれていて修正できないときは『baseタグ』をHTMLの<head>～</head>の中に書くと、階層がずれてリンク切れになるのを防ぐことができます。
相対パスのリンク切れを防ぐbaseタグとは？
baseタグはリンクの中に相対パスが含まれているときの基準になるアドレスを指定するタグです。ページで読み込まれるすべての相対パスの基準になるので、CSSやJavaScriptのリンクよりも先に書きます。
（すべてのリンクが、/からのルート相対パスのときは不要です。）
/error/がエラーページのときは下のようにbaseタグを書きます。
ベースタグの例
<base href="https://www.acky.info/error/" >
.htaccessのリンクをルート相対パスにする理由
.htaccessに書いた/error/の部分はhttps://www.acky.info/error/のような完全なURLを指定することもできます。どちらもページが見つからなかったときに表示されるページの見た目は同じですが、https://www.acky.info/error/と書いたときはhttps://www.acky.info/error/へ移動するソフト404の状態になります。
- /error/の場合
Not Found（404） - https://www.acky.info/error/の場合（ソフト404）
Not Found（404）→ 一時的な移動として転送（302）→ ページが表示（200）
ソフト404は検索エンジンに悪影響はないそうですが正しくない状態なので、/からのルート相対パスでエラーページを指定しましょう。
アドレスは / からのルート相対パスで指定しましょう。
そのほかのよくあるエラー
ページが表示されないときのエラーはページが見つからないときの『404 Not Found』のほかにも、システムエラーの『500 Internal Server Error』やアクセス禁止の『403 Forbidden』などいくつかあります。
つくるページの構成で起こりそうなエラーのページを用意しておくとよいでしょう。
.htaccessの例
ErrorDocument 403 /error403/ ErrorDocument 404 /error404/ ErrorDocument 500 /error500/