閉じる

WordPressの404ページを自作する方法｜404.phpの編集とSEOに強い設計のポイント

広告

Webサイトを運営していると、URLの入力ミスやリンク切れ、記事の削除などによって、ユーザーが「存在しないページ」にアクセスしてしまう場面に必ず遭遇します。

この際、ブラウザに無機質なエラーメッセージが表示されるだけでは、ユーザーは不親切な印象を受け、即座にサイトから離脱してしまいます。

WordPressにおいて404ページを自作することは、単なるエラー表示の回避ではなく、ユーザー体験（UX）の向上とSEO（検索エンジン最適化）の観点から非常に重要な施策となります。

本記事では、WordPressのテーマファイルである404.phpを編集し、オリジナルの404ページを作成する具体的な手順を解説します。

初心者の方でも実装できるよう、コードの記述例からSEO上の注意点まで、プロの視点で詳しく説明していきます。

目次 [ close ]
  1. 404ページがWebサイトに与える影響と重要性
    1. 離脱率の防止とユーザー体験の向上
    2. SEO（検索エンジン最適化）への寄与
  2. WordPressのテンプレート階層における404.phpの役割
  3. 404.phpを自作する手順：基本構成の作成
    1. 子テーマでの作業を推奨する理由
    2. 最小構成のコード例
  4. ユーザビリティを向上させるカスタマイズの具体例
    1. 検索フォームの設置
    2. 最新記事やおすすめ記事の表示
    3. カテゴリー一覧やアーカイブへのリンク
  5. SEOに強い404ページの設計：ソフト404を避ける方法
    1. HTTPステータスコードを正しく返す
    2. トップページへの自動リダイレクトは避けるべきか
  6. デザイン性を高めるためのCSSの適用
  7. 404エラーを監視・改善する運用フロー
  8. まとめ

404ページがWebサイトに与える影響と重要性

404エラー（Not Found）は、クライアントがリクエストしたリソースがサーバー上に見つからない場合に返されるHTTPステータスコードです。

標準的な設定では、サーバー（ApacheやNginxなど）が用意した簡素なページが表示されますが、これにはサイトのロゴもナビゲーションも含まれていません。

離脱率の防止とユーザー体験の向上

ユーザーが探していた情報が見つからなかったとき、次にどのような行動をとるかを予測することが大切です。

もし、カスタマイズされた404ページに「検索ボックス」や「おすすめの記事」が掲載されていれば、ユーザーはサイト内にとどまり、別のコンテンツに目を通してくれる可能性があります。

「行き止まり」を「新しい入り口」に変える設計こそが、良質な404ページの役割です。

SEO（検索エンジン最適化）への寄与

Googleなどの検索エンジンは、404エラーが発生していること自体をサイトのペナルティ対象にはしません。

しかし、404ページが適切に設定されていないと、クローラーが効率的にサイトを巡回できなくなったり、本来404であるべきページが「200 OK」として処理される「ソフト404」という問題が発生したりします。

検索エンジンに対して「このページは存在しない」と正しく伝えつつ、サイト内の回遊性を担保することが、SEOにおける404ページ自作の大きな目的です。

WordPressのテンプレート階層における404.phpの役割

WordPressには「テンプレート階層」という仕組みがあり、表示するページの種類に応じてどのファイルを読み込むかの優先順位が決まっています。

404エラーが発生した場合、WordPressは以下の順序でテンプレートファイルを探します。

  1. 404.php（テーマフォルダ内の404専用テンプレート）
  2. index.php（フォールバック用テンプレート）

つまり、テーマフォルダの中に404.phpという名前のファイルを作成しておくだけで、WordPressは自動的にそのファイルを404エラー時の専用画面として採用してくれます。

このシンプルさが、WordPressで404ページを自作する最大のメリットです。

404.phpを自作する手順：基本構成の作成

それでは、実際に404.phpを作成していきましょう。

作業を行う際は、必ずバックアップを取り、テスト環境やローカル環境で動作を確認することをお勧めします。

子テーマでの作業を推奨する理由

既存のテーマ（親テーマ）の404.phpを直接編集すると、テーマのアップデート時に変更内容がすべて上書きされて消えてしまいます。

そのため、カスタマイズを行う際は「子テーマ」を作成し、その中に404.phpを配置するのが正しい手法です。

最小構成のコード例

まずは、WordPressテーマとして機能するための最低限のコードを確認しましょう。

ヘッダーとフッターを読み込み、コンテンツエリアにメッセージを表示する構成です。

PHP
<?php
/**
 * The template for displaying 404 pages (Not Found)
 */

get_header(); // header.phpを読み込む
?>

<main id="primary" class="site-main">
    <section class="error-404 not-found">
        <header class="page-header">
            <h1 class="page-title"><?php esc_html_e( 'お探しのページは見つかりませんでした', 'textdomain' ); ?></h1>
        </header>

        <div class="page-content">
            <p><?php esc_html_e( 'アクセスしようとしたページは削除されたか、URLが変更されている可能性があります。', 'textdomain' ); ?></p>
            <p><?php esc_html_e( '以下の検索ボックスから記事を探すか、トップページへお戻りください。', 'textdomain' ); ?></p>
            
            <?php get_search_form(); // 検索フォームを表示 ?>
            
            <div class="return-home">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="btn">トップページへ戻る</a>
            </div>
        </div>
    </section>
</main>

<?php
get_footer(); // footer.phpを読み込む

このコードを404.phpとして保存し、使用しているテーマのディレクトリ（/wp-content/themes/your-theme-child/など）にアップロードします。

これで、存在しないURL（例：example.com/non-existent-page/）にアクセスした際、この内容が表示されるようになります。

ユーザビリティを向上させるカスタマイズの具体例

基本的な構成ができたら、次はユーザーを迷わせないための工夫を盛り込みましょう。

検索フォームの設置

404ページに最も必要な要素は、サイト内を再探索するための手段です。

get_search_form()関数を呼び出すだけで、WordPress標準の検索ボックスが表示されます。

ユーザーが自力で目的のキーワードを打ち込める環境を提供することで、サイトからの即時離脱を大幅に抑制できます。

最新記事やおすすめ記事の表示

「何を探せばいいかわからない」というユーザーのために、こちらからコンテンツを提案するのも有効です。

WP_Queryを使用して、最新の投稿を数件表示させてみましょう。

PHP
<div class="latest-posts">
    <h3>最新の記事をチェックしてみませんか？</h3>
    <ul>
        <?php
        // 最新の投稿5件を取得するためのクエリ
        $args = array(
            'post_type'      => 'post',
            'posts_per_page' => 5,
        );
        $latest_query = new WP_Query( $args );

        if ( $latest_query->have_posts() ) :
            while ( $latest_query->have_posts() ) : $latest_query->the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </li>
            <?php endwhile;
            wp_reset_postdata(); // 投稿データをリセット
        else : ?>
            <li>現在、表示できる記事がありません。</li>
        <?php endif; ?>
    </ul>
</div>

このように、動的なコンテンツを配置することで、404ページが単なるデッドエンドではなく、新しい情報の発見場所として機能するようになります。

カテゴリー一覧やアーカイブへのリンク

サイトの全体像を把握してもらうために、カテゴリー一覧を表示するのも手です。

wp_list_categories()関数を使えば、簡単にリンク集を作成できます。

PHP
<div class="category-list">
    <h3>カテゴリーから探す</h3>
    <ul>
        <?php wp_list_categories( array(
            'title_li' => '', // リストの見出しを非表示
            'show_count' => true // 投稿数を表示
        ) ); ?>
    </ul>
</div>

SEOに強い404ページの設計：ソフト404を避ける方法

SEOの観点から非常に重要なのが、ステータスコードの整合性です。

HTTPステータスコードを正しく返す

WordPressの404.phpテンプレートは、正常に動作していれば自動的にHTTP 404ステータスコードをブラウザや検索エンジンに返します。

しかし、カスタマイズの過程でPHPのエラーが発生したり、不適切なリダイレクト設定を行ったりすると、「200 OK（正常）」を返しながら「ページが見つかりません」というメッセージを表示してしまうことがあります。

これを「ソフト404」と呼び、Google Search Consoleでエラーとして報告される原因になります。

状態ステータスコードSEO・ユーザーへの影響
正しい404404 Not Found検索エンジンはインデックスから削除し、ユーザーには専用ページが表示される。
ソフト404200 OK内容がないページが検索結果に残る可能性があり、クロールバジェットを浪費する。
不適切な301301 Moved Permanently全ての404をトップへ飛ばすと、ユーザーが混乱し、Googleからも低品質とみなされる場合がある。

トップページへの自動リダイレクトは避けるべきか

かつては、404エラーが発生したら一律でトップページにリダイレクトさせる手法が流行しました。

しかし、現在はユーザビリティとSEOの両面から、自動リダイレクトは推奨されません。

ユーザーは何らかの情報を期待してリンクをクリックしています。

それが突然、何の説明もなくトップページに飛ばされると、「なぜページが表示されなかったのか」がわからず不快感を与えます。

また、Googleも「関連性のないページへのリダイレクト」はソフト404として扱う傾向があります。

デザイン性を高めるためのCSSの適用

404ページは、サイトのブランドイメージを損なわないよう、デザインにも気を配る必要があります。

専用のクラスを付与して、視覚的に分かりやすいレイアウトを作りましょう。

例えば、以下のようなCSSをテーマのstyle.cssに追加することで、メッセージを強調できます。

CSS
/* 404ページ専用のスタイル */
.error-404 {
    text-align: center;
    padding: 60px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.error-404 .page-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

.error-404 .page-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
}

.error-404 .search-form {
    margin: 30px 0;
}

.error-404 .btn {
    display: inline-block;
    background-color: #0073aa;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.error-404 .btn:hover {
    background-color: #005177;
}

視覚的に「エラーであること」を伝えつつも、サイトの一部であることを感じさせるデザインにすることで、ユーザーの不安を解消できます。

404エラーを監視・改善する運用フロー

404ページを自作して満足するのではなく、「なぜ404エラーが発生しているのか」を分析し、根本的な解決を図ることがWebサイト運用の本質です。

  1. Google Search Consoleの活用：「インデックス作成」＞「ページ」の項目を確認し、404エラーとして検出されているURLを特定します。
  2. リンク切れチェック：自分のサイト内からリンク切れが発生していないか、「Broken Link Checker」などのプラグインや外部ツールを使って定期的に確認します。
  3. 301リダイレクトの設定：記事のURLを変更した場合は、古いURLから新しいURLへ301リダイレクトを設定し、404エラーを未然に防ぎます。

アクセスログを解析し、特定のURLに対して大量の404エラーが発生している場合は、そのURLがどこか外部サイトで間違って紹介されている可能性があります。

その際は、最も関連性の高い既存ページへリダイレクトをかけるなどの対応を検討しましょう。

まとめ

WordPressの404ページ自作は、404.phpというテンプレートファイル一つで実現できる非常にコストパフォーマンスの高いカスタマイズです。

本記事で解説したポイントを振り返ります。

  • ユーザー体験の向上：エラーページを「行き止まり」にせず、検索フォームや最新記事への導線を作る。
  • SEOの最適化：ソフト404を避け、正しいHTTPステータスコードを返すように設計する。
  • 運用の継続：404エラーの発生原因を特定し、リンク切れの修正やリダイレクト設定を行う。

404ページにこだわることは、訪問者に対する「おもてなし」の精神を形にすることでもあります。エラーが起きたときこそ、サイトの質が問われます。

ぜひこの機会に、自身のWordPressサイトに最適な404ページを実装してみてください。

URLをコピーしました！