存在しないURLを開くと出てくる「404」。
意味と、WordPressで404ページを作る方法を、404ページをターミナル風に作り替えたこのブログの例で説明します。
404って、結局なに？
開こうとしたページが、サーバーに見つからなかったときの番号だよ。
404とは？ページが見つからないときの、サーバーの返事
404は、HTTPのステータスコードのひとつです。
正式な名前は「404 Not Found」。
MDNによると、サーバーがリクエストされたリソースを見つけられないことを示す、クライアントエラーのレスポンスです。
ステータスコードは、サーバーからの返事の番号です。
正常に表示されたページでは、通常200、URLを恒久的に移したときの転送は301、見つからないときは404が返ります。
このブログに、存在しないURLでアクセスしたときの返事を、Claude Codeにcurl -Iで調べてもらいました。
先頭の行は、こうなっていました。
HTTP/2 404
画面に出るデザインはサイトごとに違いますが、サーバーは、見た目とは別に、ページが見つからないことを示す404を返します。Googleも、この番号を見てページの状態を判断します。
どんなときに出てくる？
404が出る場面は、だいたい3つ。
- URLを打ち間違えたとき
- ページが移動したり削除されたりして、転送もされていないとき
- リンク先のURLが間違っている、またはリンク先が消えている、いわゆる「リンク切れ」のとき
MDNでも、404の主な原因として、この3つが挙げられています。
どれも「そのURLには、今ページがない」状態です。
404と410、ソフト404の違い
見つからないときの番号には、404のほかに410もあります。
- 404: ページが見つからない。一時的か恒久的かは、これだけでは分からない
- 410: ページが恒久的に削除された
ただ、検索エンジンのGoogleは、この2つをほぼ同じに扱います。
Googleのドキュメントによると、429を除く4xx系のエラーは同じ扱いです。
すでにインデックスされているURLはインデックスから外され、新しく見つけた404のURLは処理されません。
クロールの頻度も、少しずつ下がっていきます。
もうひとつ、「ソフト404」という状態もあります。
ページの中身は「見つかりません」なのに、番号は200のまま、という状態です。
Googleのドキュメントでは、200を返しながら実質的にエラーの内容(空白のページやエラーメッセージ)を表示しているページを、ソフト404として扱うと書かれています。
この場合、Search Consoleにエラーが表示される場合があります。
404ページって、好きなデザインにしていいの？
見た目は変えていいよ。
ただ、番号は404のままにするのが大事。
WordPressで404ページを作る方法
WordPressでは、テーマの404.phpというファイルが、404のときに表示されます。
公式ドキュメントのテンプレート階層によると、404のときは404.phpが最初に探され、なければindex.phpが使われます。
なので、使っているテーマのフォルダに404.phpを置けば、専用の404ページにできます。
すでにある場合は、その中身を書き換えます。
中身の最小例は、こうです。
<?php get_header(); ?>
<main>
<h1>ページが見つかりません</h1>
<?php get_search_form(); ?>
</main>
<?php get_footer(); ?>WordPressは、404のときこのテンプレートを使い、返事の番号も404にします。
見出しと、検索フォームだけの形です。
ここに何を置くかは、自由です。
このブログでは、次の内容を入れました。
- 見つからなかったことを伝える見出し
- キーワード検索の入力欄
- 新着記事の一覧(6件)
- トップページへ戻るボタン
このブログの404ページは、ターミナル風にしました
このブログの404ページは、「おしゃれな404ページを作ってみようか」という自分の一言から、Claude Codeに作ってもらいました。
サイト名の「Cat’s Hand」と、ターミナルのcatコマンドをかけた演出です。
「最初は普通の0がいて、肉球が押しのける動きにしたい」「ボタンは新着記事の下に置きたい」と自分が頼んで、調整してもらいました。
「4 肉球 4」の数字と、ターミナル風の3行
黒い背景に、水色の「4」と、真ん中に「0」が並びます。
最初は普通の0が出ています。
1秒ほどたつと肉球が叩きつけられて、0を弾き飛ばして入れ替わります。
その下に、ターミナルの画面のような3行を出しました。
たとえば/abc/という存在しないURLを開くと、こう表示されます。
$ cat /abc/cat: /abc/: No such file or directory$(点滅するカーソル)
catは、ファイルの中身を表示するコマンドです。
存在しないファイルを指定すると、「No such file or directory」というエラーが返ります。
それを、存在しないURLを開いた状態に見立てています。
ターミナルについては、ターミナルとは？Macでの開き方と、最初に知っておきたい基本にまとめています。
デザインを変えても、番号は404のまま
作り替えたあとも、本番のサイトで同じ確認をしてもらいました。
見た目が変わっても、返ってきた番号はHTTP/2 404のままでした。
URLを変えたときにも出る404
404は、URLを変えたのに古いURLから転送されていないときにも出ます。
URLを変えたときの古いURLの扱いは、別の記事にまとめています。
詳しくはWordPressのカテゴリを親子変更したら古いURLでも表示された原因と301転送に書いています。
URLを変えたときの転送は、301リダイレクトとは？WordPressでの使いどころと、302との違いで説明しています。
迷ったときの確認ポイント
- 見た目ではなく、返事の番号を確認する(
curl -Iや、ブラウザの開発者ツールの「ネットワーク」で見られます)。見つからないページに200が返っていたら、ソフト404です - 消したページや変えたURLは、転送が必要か考える(恒久的な移動なら301)
- 404ページには、検索や新着記事など、ほかのページへ移れる入口を置く
