WordPress 404 エラーページの作り方・カスタマイズ方法

404エラー

削除されたページや存在しないページにアクセスすると、「404 エラーページ」というものが表示されます。

WordPress は 404 ページを自由に作成・編集できますが、スキルによって最適な方法が異なります。どのように編集すればよいか、何を表示すればよいか、本記事の解説がご参考になれば幸いです。

プログラミングの知識がなくても「404page – your smart custom 404 error page」というプラグインで簡単に作成できますので、使い方・設定方法も合わせてご覧ください。

404 ページの意味と役割

404 という数字は HTTP ステータスコードの一種で、「情報が存在しない」ことを意味します。

ほかにも 301 や 503 といった数字があり、それぞれ固有の意味を持ちます。代表的なコードは以下の記事で紹介しているので、時間のあるときにでもチェックしてみてください。

404 ページはこのようなときに表示されます。

  • 削除したページにアクセスされたとき
  • URL の打ち間違いやコピペミスでアクセスされたとき
  • リンクが間違っていたとき

WordPress であれば、投稿・固定ページ・カテゴリーなどを削除したときに 404 ページが表示される、と覚えておけばよいでしょう。

404 ページに表示したほうがよい情報

一般的な HTML サイトであれば、サーバーで用意されている 404 ページが表示されます。

たとえば、エックスサーバーの場合はこのような表示です。

エックスサーバー 404ページ
エックスサーバー 404 ページ

アクセスしたページは存在しない、ということがユーザーに伝わりますよね。

これでも問題ないのですが、404 ページに表示したほうがよい項目例として Google の SEO スターターガイドにこのように記載されています。

ユーザーをサイト上の有効なページに導く親切なカスタム 404 ページを用意することで、ユーザーにとっての利便性を大幅に改善できます。ルートページに戻るリンクや、サイトの人気コンテンツや関連コンテンツへのリンクを表示することを検討してください。

有益な 404 ページを表示する

ただ「ページは見つかりませんでした」という表示だけだと、ユーザーはそのまま元のページに戻るか、ブラウザを閉じてしまうかもしれません。

関連性の高いページへのリンクがあれば、そこからブログの別記事を読んでくれる可能性がある、ということですね。WordPress ブログでは、少なくとも以下の要素を表示しておくのがよいと思います。

  • トップページへのリンク
  • 各カテゴリーページへのリンク
  • お問い合わせページへのリンク
  • 検索窓

自分のブログの 404 ページがどのように表示されているか、一度確認してみてください。存在しない適当な URL にアクセスするか、以下の URL にアクセスすれば OK です。

https://example.com/fred.php

※ example.com の部分は自分のブログのドメインに変更してください

WordPress の 404 ページ作成・カスタマイズ方法

存在しないページにアクセスされたとき、WordPress はテーマ内の 404.php を探して表示します(404.php がない場合は index.php)。

オリジナルの 404 ページを作りたい場合、テーマの構成やスキルによって最適な方法が異なります。

404.php を作成または編集する

もしテーマに 404.php がないのであれば、404.php をテーマディレクトリ内に作成してください。詳細は WordPress Codex に記載されています。

404.php がすでに存在している場合、ファイルを直接編集するか、子テーマから上書きすれば OK です。

親テーマのファイルを直接編集すると、テーマアップデート時に元に戻るので注意

フィルターフックが用意されている場合はそれを使うのもよいでしょう。ご利用中のテーマの公式ヘルプを探すか、テーマのカスタマイズ方法を検索すると出てくると思います。

たとえば、当サイトでも使用している Snow Monkey では 404 ページのメッセージ変更方法が公式サイトで紹介されています。

WordPress や PHP に関する知識が必要なので、Codex やヘルプを読んでもよくわからない場合は他の方法を検討したほうがよいでしょう。

テーマの 404 設定機能を使う

テーマによっては、特別な知識がなくても 404 ページの内容を編集できる機能が備わっています。

無料テーマ「Cocoon」は、管理画面から画像・タイトル・メッセージの編集ができるほか、さらに 404 ページ専用のウィジェットも用意されているので、初心者でも比較的簡単に設定できるでしょう。

編集機能がなくても、404 ページにウィジェットエリアが用意されているテーマであれば、プラグイン「Widget Logic」などを使って 404 ページでのみ特定のウィジェットを表示する方法も考えられます。

プラグイン「404page」を使う

プログラミングに自信がなく、使用中のテーマに 404 ページ編集機能がない、という場合はプラグイン「404page – your smart custom 404 error page」を使うとよいでしょう。

当サイトでも同プラグインを使ってオリジナルの 404 ページを作成してみました。

Naifix 404 ページ

使い方はとても簡単なので、以下解説します。

プラグイン「404page」設定方法

プラグイン「404page – your smart custom 404 error page」 は、指定した固定ページを 404 ページに反映できます。手順に従って完成させましょう。

STEP1
プラグインインストール・有効化

プラグイン新規追加画面で「404page」を検索し、インストールします。

プラグイン「404page」インストール

インストール完了後、そのまま有効化してください。

STEP2
404 ページを固定ページで作成する

404 ページとして表示したいものを固定ページで作成します。

以下、設定例です。

設定項目設定例
タイトルお探しのページは見つかりませんでした
スラッグ404-error
本文トップページやカテゴリーページへのリンクなど

スラッグ(パーマリンク)は管理用で、404 になったときこのページにリダイレクトされるわけではありません。自分でわかりやすいものになっていれば OK です。

本文部分の作成方法はテーマによって多少異なるため割愛しますが、前述のとおり以下の要素を配置しておくのがおすすめです。

  • トップページへのリンク
  • 各カテゴリーページ( or サイトマップ)へのリンク
  • お問い合わせページへのリンク
  • 検索窓

ブロックエディターなら新着記事一覧やカテゴリ一覧の作成が簡単なので、数分もあれば完成すると思います。

ページ作成後、そのまま「公開」してください。

STEP3
設定画面で固定ページを指定する

STEP2 で作成した固定ページを 404 ページに割り当てましょう。

外観 > 404 Error Page からプラグイン設定画面に移動し、「 NONE (WP default 404 page) 」となっている部分で固定ページを選択します。

404ページを指定する

固定ページを選択後、「変更を保存」して完了です。

404ページ設定完了画面

きちんと反映されているか、「Test 404 error」をクリックして確認してみてください。

Test 404 error

STEP4
その他の詳細設定確認

STEP3 までで 404 ページは問題なく表示されていると思います。

「Advanced」タブには、その他の詳細設定項目がありますので、うまく動かないときは確認してみてください。基本はデフォルトのままで問題ありません。

以下の画像のとおり、上から 2 つ目の「Send an 404 error if the page is accessed directly by its URL」のみ ON になっているのがデフォルト状態です。

プラグイン「404page」詳細設定画面
Hide the selected page from the Pages list

404 ページ用に作成した固定ページを管理者にのみ見せるか。

複数人で運営しており、編集者や投稿者には固定ページを見せたくない(編集させない)場合は ON にします。一人で運営している場合は設定しても意味がありません。

Send an 404 error if the page is accessed directly by its URL

404 ページ用に作成した固定ページに直接アクセスされたとき、404 エラーにするか。

OFF にすると、固定ページに直接アクセスしたとき 200(正常に表示)が返ってきます。初期状態は ON になっており、特別な理由がないかぎり ON のままのほうがよいです。

Force 404 error after loading page

ページを読み込んだあと、強制的に 404 エラーにするか。

プラグインで指定した固定ページが読み込まれたとき、フロントエンド(読者が見るページ)では 404 になりますが、バックエンド(管理者が見るページ)では 404 として認識されません。強制的に 404 にする必要がある場合は ON にしてください。特別な理由がなければ OFF のままで大丈夫です。

Disable URL autocorrection guessing

WordPress の URL 補完機能を停止するか。

WordPress は、存在しないページにアクセスされたとき、自動的に類似する URL へリダイレクトする機能があります。その機能が不要な場合は ON にしますが、よくわからない場合は OFF のままでかまいません。

例)
https://naifix.com/buf にアクセスすると https://naifix.com/buffer/ にリダイレクトされます

Send an HTTP 410 error instead of HTTP 404 in case the requested object is in trash

ゴミ箱に移動した記事を 404 ではなく 410 にする。

404 エラーと似た「410 エラー」というものがあります。検索エンジンは、404 エラーを検知したとき、それが一時的なエラーかどうかをすぐに判断できません。そのため、ページが表示されていなくてもしばらくは検索結果に残ります。410 エラーはページが削除されたことを示すので、検索結果から除外されるまでのスピードが 404 に比べると多少早くなるかもしれません。

そこまで気にする部分ではないので、OFF のままで大丈夫です。

Always send an HTTP 410 error instead of HTTP 404

404 ではなく常に 410 にする。

存在しないページへのアクセスが常に 410 となります。設定する必要はありません。

Activate Compatibility Mode

互換モードを有効化するか。

テーマや他のプラグインと干渉して正常に動作しない場合、互換モードを ON にすると改善される場合があります。正常に動作しているようであれば OFF のままでかまいません。

STEP5
サイトマップから除外する

人が見るためのサイトマップページや、検索エンジンが見るための XML サイトマップがあるなら、404 用に作成した固定ページを除外しておきましょう。

なお、Yoast SEO で XML サイトマップを生成している場合は自動で除外されます。

プラグイン「XML Sitemaps」を利用している場合、Excluded Items の除外欄に固定ページの ID を入力してください。

XMLサイトマップから404ページを除外する

補足(1)
キャッシュプラグインを使用している場合は注意

高速化のためにキャッシュ系プラグインを使用している場合、404 用に作成した固定ページや削除したページをキャッシュしないよう設定してください。

ページがキャッシュされてしまうと、404 ではなく 200 になってしまいます。このとき、検索エンジンから見ると「存在しないページのはずが存在している」と認識され、検索評価に悪影響を及ぼすかもしれません。

「WP Super Cache」「W3 Total Cache」は自動的にキャッシュ対象から除外してくれます。その他のプラグインはご注意ください。

補足(2) 
Google AdSense を表示すると規約違反

404 ページに Google AdSense 広告を掲載すると、規約違反となります。

404 用に作成した固定ページの本文内やコンテンツ下部、サイドバーなどに広告が表示されていないかチェックしておきましょう。

404 ページサンプル集

サイトによっては凝った作りの 404 ページが用意されています。いろいろなサイトをチェックして、デザインや配置する要素の参考にしてみましょう。

ユニークなものからシンプルなものまで、いくつかご紹介します。

LIG

LIG 404ページ

ユニークなメッセージと共に、下部にはお気に入り記事が配置されています。中央の「CLICK ME」をクリックすると・・・

Webクリエイターボックス

Webクリエイターボックス 404ページ

サイトのロゴに合わせた 404 画像とシンプルでわかりやすいナビゲーションが特徴です。

バズ部

バズ部 404ページ

検索窓とカテゴリ一覧が表示されており、最低限必要な要素を配置したいときの参考になります。

まとめ

記事削除やリンクミスがなければ 404 ページを見ることはないかもしれませんが、自分のブログがどのようになっているか一度チェックしておくとよいですね。

ヘッダーやフッターなどのリンクから関連するページへ移動できるなら、そこまで凝った作りにしなくてよいと思います。でも、ちょっとした遊び心もあったほうがブログ運営が楽しくなるんじゃないでしょうか。

気づかないところで 404 になってリンク切れしているかもしれないので、プラグインで監視しておくと便利ですよ。

それでは、また。

Author

Naifix 編集部
Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。当サイト(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。

執筆・監修 Direx Marketing, Inc.