404,418エラーページを実際に実装してみた

ハーゲンダッツのエラーページ

ハーゲンダッツの公式HPで存在しないurlリンクに飛ぶと、404エラーが発生して404エラーページに飛ばされました。

リンクが存在しない等のクライアントエラーを発生した場合に初期ページにリダイレクトするサイトも多くありますが、エラーページを作成することでエラー内容を閲覧者が理解することができます。

このようなエラーページを作成することで、閲覧者がステータスコードに詳しくなくてもurlリンクが存在しないことが分かります。

404エラーページ

ステータスコード「404」は存在しないしないページを閲覧しようとした際にWebサーバから返されるものです。

実際によく起こるエラーというのもあり、ステータスコードについては知らないが「404-Not Found」だけ知っている人がいるほど有名なステータスコードになっています。

エラーページを作成する

作成したページ「404 Not Found」

自身のサイトのデザインで404エラーが発生したことを伝えるページを作成しました。

ErrorDocument 404 https://cococo-web.com/errorpage/404.html

418エラーページ

おまけでジョークステータスコードである「418-I'm a teapot」のエラーページを作成していきます。

418番はティーポットにコーヒーを入れようした場合に発生する「私はティーポットのためコーヒーは淹れられません」というジョークエラーです。

遊び心のあるgoogleはteapotページを設定しており、このページのステータスコードが418になっています。

もちろん418エラーが起こることはないので418エラーが発生した場合にリダイレクトする処理ではなく、googleのように作成するページのステータスコードを「418」にします。

そのため418エラーページの作成は次の手順で作成していきます。

1. エラーページ作成
2. ステータスコードを変更
3. 実際に確かめる

エラーページの作成

まずは418番のエラーページを作成していきます。エラーの内容がティーポットにコーヒーを淹れようとした場合に起こるものなのでコーヒーを淹れられないことを伝えます。

作成したページ「418-I'm a teapot」

$protocol = $_SERVER['SERVER_PROTOCOL'];
if( in_array( $protocol, array( 'HTTP/1.1', 'HTTP/2', 'HTTP/2.0' ) ) === false ) {
    $protocol = 'HTTP/1.0';
}
header( "$protocol 418 I'm a teapot" );

実際に確かめる

作成したページ「418-I'm a teapot」

作成したページを開発モードでステータスコードを確認すると、しっかりと変更されたことがわかります。