エラーページ｜基礎を学ぶ

素っ気ない画面のままにしない

存在しない URL を叩くと、nginx は自前の短い画面を返します。

curl -s http://localhost:8081/nothing.html
# <html>
# <head><title>404 Not Found</title></head>
# ...

情報としては足りていますが、サイトの見た目とはまるで別物です。訪問者からすると、そこで道が途切れます。自分のデザインで、トップページへ戻る導線を置いた 404 を返せるようにします。

error_page で差し替える

server {
    listen 8081;
    root /var/www/mysite;

    error_page 404 /404.html;

    location = /404.html {
        internal;
    }
}

error_page 404 /404.html; は「404 を返すことになったら、代わりに /404.html の中身を出す」という指示です。指す先は URL であって、ファイルのパスではありません。実体は root の下にある /var/www/mysite/404.html になります。

location = と internal の役割

続く2行には、それぞれ理由があります。

location = /404.html の等号は完全一致の指定です。この URL だけを対象にする、という意味になります。前の回で見た「長いほうが勝つ」よりも、さらに優先されます。

internal は「この URL は内部からの差し替えでしか使わせない」という指定です。これを書いておくと、訪問者が直接 /404.html を開こうとしても 404 になります。エラーページそのものが単独のページとして検索結果に出てしまう、という間抜けな事態を防げます。

返る番号は 404 のまま

差し替えても、応答のステータスコードは 404 のままです。ここは大切なところで、見た目だけ変えて 200 を返してしまうと、検索エンジンは「中身のあるページ」だと誤解します。

curl -sI http://localhost:8081/nothing.html | head -1
# HTTP/1.1 404 Not Found

1行目が 404 で、本文が自分のページ。この2つが同時に成り立っているかを必ず確かめてください。

他の番号も同じ書き方

500 番台のエラーにも同じ形が使えます。

error_page 500 502 503 504 /50x.html;

番号を並べて書けば、まとめて1枚に集約できます。アプリケーションが落ちたときに出る画面なので、こちらも用意しておくと親切です。

手を動かす

自分のサイトに合わせた 404 ページを作り、存在しない URL でそれが返るようにします。ステータスコードが 404 のままであることも確かめます。

エラーページ