SEOに有効で巡回を促す404エラー・検索エラーページをWordPressで作成する

ユーザーがサイトを巡回している際、URLの変更によるリンク切れやエラー・検索してもページが無いなどの理由で探しているページが見つからなかったときに、何もページに表示されないと離脱してしまう可能性があります。

ユーザーの利便性を高めるためにも検索エンジンのクローラーに回遊してもらうためにも、エラーページの充実は非常に重要な対策の一つですのでWordPressのテーマ内にテンプレートを作成しておきましょう。

今回は、SEO対策にも効果的でユーザーの利便性を高める404エラー・検索エラーペー ジのWordPressでの作成方法についてご紹介します。

404エラー（not found）ページとは

404エラーページとは、アクセスしたページが存在しないときにサーバーから自動で返されるHTTPのエラーコードです。

404エラーがサーバーから返されたときの表示方法はサイトの設定によって異なりますが、適切に設定しておくことでユーザービリティを高めサイトからの離脱を防ぐことができます。

また、エラーページにクローラーからの回遊があった場合に、適切にページを作成しておくことでサイト内への導線を増やしクローラーへサイト内の巡回を促すことでSEO効果も高まります。

エラーページ対策は、意外と忘れがちな設定ですが内部的には非常に重要な設定と言えるので必ず行いましょう。

エラーページの作成に必要なテンプレート

エラーページ表示のために今回は、『404.php』『search.php』『content-none.php』の3つのテンプレートを作成します。

404.phpは、404エラーページの表示を設定するためのテンプレートです。URLにアクセスされたときにサーバーから404エラーが返されたときにこのテンプレートが呼び出されます。404.phpがWordPressテーマ内にない場合は、『ヘッダー』『フッター』『サイドバー』だけが表示されコンテンツ部分は空白になります。

search.phpは、検索フォームから検索が行われたときの表示を出力するためのテンプレートです。『search.php』の設定が無い場合はindex.phpが自動で呼び出され該当する記事の一覧が表示されます。しかし、検索したキーワードのコンテンツが無い場合はコンテンツエリアが真っ白に表示されてしまうので、検索コンテンツが無い場合の表示も含め設定しておきましょう。

『contet-none.php』は必ず必要なテンプレートではありませんが、コンテンツが見つからない場合の表示を定義しておき『404.php』と『search.php』内でインクルードタグとして使用するWordPressテンプレートです。テンプレートの名前は『content-none』以外でも問題ありません。
※『contet-none.php』を作成しない場合は、記事が見つからない場合に出力する要素を直接『404.php』と『search.php』に記述しましょう。

content-none.phpを作成する

まずは、エラー時の表示を定義するcontent-none.phpを作成しましょう。このテンプレート内に記載した内容をエラーページに反映させます。

記述する内容は自由ですが、ユーザーの利便性を考えて作成しましょう。今回は、『検索フォーム』『カテゴリ一覧』『新着記事一覧』『記事のリクエストフォーム』の4つを出力します。

まずは、完成したテンプレートから確認してイメージを掴みましょう。追加するソースコードは下記の通りです。

<div class="content-none">
  <?php if( is_404() ){
    // 404ページの場合
    $site_name = get_bloginfo('name');
      echo 'いつも、',$site_name,'をご覧頂きありがとうございます。アクセスされたページは削除またはURLが変更されています。お手数をおかけいたしますが、以下の方法からもう一度目的のページをお探し下さい。';
    }elseif( is_search() ){
    // 検索結果ページの場合
    $site_name = get_bloginfo('name');
    $search_name = get_search_query();
      echo 'いつも', $site_name, 'をご覧頂きありがとうございます。「',$search_name,'」で検索しましたがページが見つかりませんでした。お手数をおかけいたしますが、以下の方法からもう一度目的のページをお探し下さい。';
  } ?>

  <h2>1.再検索する</h2>
  <p>検索ボックスにお探しのコンテンツに該当する"<b>キーワード</b>"を入力して下さい。キーワードを含むページ一覧が表示されます。</p>

  <?php get_search_form(); ?>

  <h2>2.カテゴリから探す</h2>
  <p>カテゴリーのトップページからもう一度目的のページをお探しになってみて下さい。</p>
    <?php wp_nav_menu( array(
            'theme_location' => 'error-nav',
            'container' => 'nav',
            'container_class' => 'error-nav',
            'container_id' => 'error-nav',
            'fallback_cb' => ''
    ) ); ?>

  <h2>3.新着記事から探す</h2>
  <?php get_the_ID();//ループの条件
     $args = array('posts_per_page' => 5,
                   'ignore_sticky_posts' => 1
                   );
  $my_query = new WP_Query( $args );?>
  <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

  <article <?php post_class( 'kiji-list' ); ?>>
    <a href="<?php the_permalink(); ?>">
      <!--画像を追加-->
      <?php if( has_post_thumbnail() ): ?>
        <?php the_post_thumbnail('medium'); ?>
      <?php endif; ?>
      <div class="text">
        <!--タイトル-->
        <h3><?php the_title(); ?></h3>
        <!--投稿日を表示-->
        <span class="kiji-date">
          <i class="fa fa-pencil"></i>
          <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
          <?php echo get_the_date(); ?>
          </time>
        </span>
        <!--カテゴリ-->
        <nobr><span class="cat-data">
          <?php if( has_category() ): ?>
            <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
          <?php endif; ?>
        </span></nobr>
        <!--抜粋-->
        <?php the_excerpt(); ?>
      </div>
    </a>
  </article>

  <?php wp_reset_postdata(); endwhile; ?>

  <h2>4.記事をリクエストする</h2>
  <p>お探しの記事が無い場合は、リクエストを受け付けております。今後とも、より良いサイトになるよう精進させていただきますのでよろしくお願いいたします。</p>

  <?php echo do_shortcode('contact-form-7のフォームを呼び出すショートコード'); ?>

</div>

register_nav_menu( 'error-nav',  ' 404エラー時に表示するナビ ' );

上のソースコードをcontent-none.phpとfunctions.phpに追加してください。それでは、各項目についてご説明していきます。

ページの冒頭文

ページの冒頭には、ページが見つからないことを示す文を出力します。『404.php』で出力した場合と『search.php』で出力した場合で記述を分けるためにif関数で条件分岐しています。

echo' 'の『' '』の中に表示させたいテキストを入力しましょう。上記のソースコードでは、サイト名と検索されたワードを『$site_name = get_bloginfo('name');』と『$search_name = get_search_query();』で自動出力しています。

検索フォーム

検索フォームは『<?php get_search_form(); ?>』で呼び出しています。『searchform.php』を設定している場合はテンプレート内のオリジナル検索フォーム、設定していない場合はWordPressデフォルトの検索フォームが呼び出されます。

カテゴリ

カテゴリは、新たにfunctions.phpに『error-nav』というメニューを追加し、管理画面上で表示するメニューの項目を操作できるようにします。

任意のカテゴリを表示させるために、WordPress管理画面→『外観』→『メニュー』からメニューを作成しておきましょう。

また、メニューを出力せずに『<ul><li></li></ul>』で直接項目を設定したり全てのカテゴリを一括で呼びだしても良いでしょう。

カテゴリを全て一括で呼び出す場合は『<?php wp_nav_menu ～ ?>』下記のソースコードに置き換えてください。
※カテゴリを一括で出力する場合は、functions.phpでのメニューの定義も必要ありません。

<?php wp_list_categories(
  array(
     'title_li'  => '',
    )
  );
?>

新着記事

新着記事一覧は、サブループで条件指定し呼び出しています。新着記事ではなく、人気記事やピックアップ記事でも良いでしょう。ユーザーが興味を持つように設定しておきましょう。

各記事に設定しているサムネイル画像も一緒に出力していますが、条件分岐を追加することで、サムネイル画像が無い場合に別の画像を自動で表示させるようにすることもできます。

<?php if( has_post_thumbnail() ): ?>
  <?php the_post_thumbnail('medium'); ?>
<?php endif; ?>

<!--上記のソースを下記のソースに置き換える-->

<?php if( has_post_thumbnail() ): ?>
  <?php the_post_thumbnail('medium'); ?>
<?php else: ?>
  <img src="サムネイル画像がない時に表示したい画像へのパス(URL)" alt="no-img"/>
<?php endif; ?>

記事のリクエストフォーム

記事のリクエストフォームは、『Contact Form 7』のプラグインでリクエストフォームを作成し、ショートコードで呼び出しています。

追加するためには『Contact Form 7』をインストールし、有効化しておきましょう。

リクエストフォームを作成するためには、WordPress管理画面→『お問い合わせ』→『新規追加』から追加してください。今回は、エラーページ用のフォームを下記のように設定しています。

フォームが完成したらショートコードを確認し、記事に『<?php echo do_shortcode(' ショートコード '); ?>』を追加して出力されるようにしましょう。

ショートコードは、WordPress管理画面→『お問合せ』から確認できます。

上記以外にも、エラーページに追加したい項目があれば自由にcontent-none.phpに追加してください。content-none.phpの作成が完了したら、続いて『404.php』を作成していきます。

404.phpを作成する

404.phpテンプレートは、<content>部分に先程作成した『content-none.php』のテンプレートを呼び出して内容を表示します。追加するソースコードは下記の通りです。

<?php get_header(); ?>

<div class="container">
  <div class="contents">
    <h1>アクセスされたページは削除されたかURLが変更されています。</h1>
    <?php get_template_part('content', 'none'); ?>
  </div>

  <div class="sub">
    <?php get_sidebar(); ?>
  </div>
</div>

<?php get_footer(); ?>

※コンテンツ部分の全てを囲う『<div class="container">』『<div class="contents">』やサイドバー部分『<div class="sub">』のclass名は、お使いのテーマに合わせて変更してください。(CSSを一から設定する場合はそのままでも可)

上記のソースコードを追加することで、404エラーが発生した時にWordPressの404エラーページにコンテンツが表示されるようになります。

先程作成した『content-none.php』テンプレートは、『<?php get_template_part('content', 'none'); ?>』で404.php内に呼び出します。

サイトのURLの後に、適当な文言(/あああ)を追加して404エラーページを確認して、content-none.phpで作成した内容が反映れているかを確認してみましょう。

上記のソースコードをそのまま使用すると、上記の画像のように出力されます。きちんと内容が反映されていれば404ページの作成は完了です。そのままでは、寂しいのでCSSでデザインを自由に整えてください。

search.phpを作成する

検索結果を出力する際に呼び出されるsearch.phpは、検索に合致する記事がある場合とない場合をif関数で条件分岐して記述します。

serch.phpに追加するソースコードは、下記の通りです。

<?php get_header(); ?>

<div class="container">

  <!---コンテンツエリアスタート--->
  <div class="contents">
    <h1>「<?php the_search_query(); ?>」の検索結果</h1>
    <?php if(have_posts()): while(have_posts()): the_post(); ?>

    <!-- 投稿があった場合の表示 -->
    <article <?php post_class( 'kiji-list' ); ?>>
      <a href="<?php the_permalink(); ?>">
        <!--画像を追加-->
        <?php if( has_post_thumbnail() ): ?>
          <?php the_post_thumbnail('medium'); ?>
        <?php endif; ?>

        <div class="text">
          <!--タイトル-->
          <h2><?php the_title(); ?></h2>
          <!--投稿日を表示-->
          <span class="kiji-date">
            <i class="fa fa-pencil"></i>
            <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
            <?php echo get_the_date(); ?>
            </time>
          </span>
          <!--カテゴリ-->
          <span class="cat-data">
             <?php if( has_category() ): ?>
              <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
            <?php endif; ?>
          </span>
          <!--抜粋-->
          <?php the_excerpt(); ?>
        </div>
      </a>
    </article>

    <?php endwhile; ?>
    <!--検索に該当するページがなかった場合に表示-->
    <?php else: ?>
      <?php get_template_part('content', 'none'); ?>
    <?php endif; ?>

    <!--ページネーションを追加-->
    <div class="pagination">
    <?php echo paginate_links( array(
        'type' => 'list',
        'mid_size' => '1',
        'prev_text' => '«',
        'next_text' => '»'
      ) ); ?>
    </div>
  </div>
  <!---サイドバースタート--->
  <div class="sub">
    <?php get_sidebar(); ?>
  </div>
</div>

<?php get_footer(); ?>

※コンテンツ部分の全てを囲う『<div class="container">』『<div class="contents">』やサイドバー部分『<div class="sub">』のclass名は、お使いのテーマに合わせて変更してください。(CSSを1から設定する場合はそのままでも可)

タイトルには、検索したワードが出力されるようにしましょう。検索ワードは『<?php the_search_query(); ?>』で呼び出しています。

また、検索結果がある場合とない場合の条件分岐は、下記のように分岐させます。

検索結果がある場合は、検索結果の記事一覧をそのまま出力します。一般的なWordPressテーマでは、『index.php』の内容をそのまま引用できますが、上記のソースをそのまま使用してもOKです。

検索された記事が見つからなかった場合の条件分岐は、記事一覧を呼び出すループの終了タグ(<?php endwhile;?>)とif関数の終了タグ(<?php endif;?>)の間に挿入してください。

<?php endwhile; ><!--ループの繰り返し(while)の終了タグ-->
<?php else: ?><!--条件分岐--を追加-->
<?php get_template_part('content', 'none'); ?>
<?php endif; ?><!--ループのif関数の終了タグ-->

if関数を条件分岐させるために『<?php else: ?>』をループの終了タグの後に追加し、記事が見つからない場合は、先程作成した『content-none.php』のテンプレートを出力します。

テンプレートの作成が完了したら、実際に検索フォームで記事を検索して表示を確認してください。

検索したときに、記事がある場合とない場合で条件分岐され、コンテンツが表示されれば、search.phpの作成は完了です。

function search_page($search) {
if(is_search()) {
  $search .= " AND post_type = 'post' ";
}
return $search;
}
add_filter('posts_search', 'search_page');

上記のテンプレートや設定をWordPressのテーマに加えることで、ページがなくて404エラーが発生した場合や検索したページが無い場合でも空白にならずにコンテンツを表示させることができます。

エラーページ用のテンプレートの作成は、忘れがちですが、ユーザーやクローラーにサイトを循環してもらうには大切な要素なのでしっかりとWordPressのテーマ内に構築しておきましょう。