SEO対策に有益な404ページのカスタマイズ方法(Simplicity)

最近、Googleウェブマスタを見ているとクロールエラーが発生していました。そして、そのエラー内容のほとんどがURLエラー(404エラー)になっていました。

ん？404のエラーページってどうなってるんだろう？どうしておくのが良いのだろう？というところから色々調べていると、404エラーページを適切に作成しておくことがSEO対策に繋がるということがわかりました。

というわけで、今回は「SEO対策に有益な404エラーページとは」と「Simplicityを用いた404エラーページのカスタマイズ方法」をまとめました。

404エラー(URLエラー)とは
SEO対策に有益な404エラーページとは
Simplicityの404エラーページのカスタマイズ方法
1. １．Simplicityの親テーマの404.phpを子テーマにコピーする
2. ２．404.phpの子テーマをカスタマイズする
最後に

404エラー(URLエラー)とは

まず、404エラー(URLエラー)とは、インターネットのHTTPレスポンスコードの１つで、ページが見つからなかった時に使用されるエラーコードです。URLが変更もしくは削除された場合などに発生するものです。

Simplicityのデフォルトではこんな感じです。

シンプル好きな私としてはこのままでも良いのですが、Google先生は簡単には許してくれませんでした。笑

というわけで、Google先生が求めている404エラーページはどのようなものかについて調べてみました。

SEO対策に有益な404エラーページとは

有益な404エラーページはGoogleに確認するのが一番です。Googleのページはこちらです。全部で６つありましたが、中身を読んで理解するのは面倒だと思いますので、概要と何に気をつけたらよいかを書いていきます。

ユーザに探しているページがないことを明確に伝える

当たり前ですが、これは大事です。もったいない例として、404エラーページを回避するためのプラグイン「404 to Start」というものがあります。

これは非常に便利なプラグインで、404エラーとなった場合は自動でトップページなどに飛ばしてくれます。

ただし、このプラグインはユーザからすると、「探しているページがあったのか／なかったのか、もしくは押し間違えだったなのかはわからないけど、トップページが開いた」というようなことになってしまいます。

恐らく、Googleはこのように自動でリダイレクトさせることは良くないよと言っているのかもしれません。

また、言葉の表現の仕方としては「404 not found」よりも「お探しのページは削除されたか、URLが変更されたため、見つかりませんでした。」等の方が、Googleの求めている「明確に伝える」に近いと思います。

404エラーページはサイト内のデザインと合わせる

たまに404エラーページにこだわって、特殊なデザインをしているサイトってありますよね。でも、そこまでこだわらずにサイト内の他のデザインと同じにした方がよいみたいです。

ユーザがリンク切れをブログ運営者に伝えられるようにする

これは意外でした。そんなのいるんだという感じですね。クレーム窓口は言い過ぎかもしれませんが、連絡窓口は必要ですよというわけですね。

HTTPステータスコードが404になっている

急に専門用語っぽいのが出てきましたが、WordPressで404.phpファイルにエラーページを定義している方でしたら、問題ありません。気になる方は、開発者ツールを開いてレスポンスを確認するのが良いと思います。開発者ツールはブラウザがChromeでWindowsならF12キー、Macならoption+command+i(アイ)で起動できます。

開発者ツールを開いた状態で、「http://サイトのURL/404.php」を入力して、こんな感じになっていれば、大丈夫です。

サイト移転時はアドレス変更ツールでGoogleに伝える

サイト移転した時はアドレス変更ツールでGoogleに伝えてくださいというものです。サイト移転なんて夢のまた夢、、、というわけで、知りたい方はアドレス変更ツールの使い方をご覧ください。

いかがでしょうか。長ったらしくてすみません。次からは実際にSimplicityで404エラーページの設定方法についてご紹介したいと思います。

Simplicityの404エラーページのカスタマイズ方法

404エラーページのカスタマイズは簡単で、大きく２つです。

Simplicityの親テーマの404.phpを子テーマにコピーする
404.phpの子テーマをカスタマイズする

では、手順についてご説明します。

１．Simplicityの親テーマの404.phpを子テーマにコピーする

Simplicityの親テーマの404.phpを子テーマにコピーしてください。Simplicityをお使いの方で子テーマを設定していない方がいらっしゃれば、こちらの記事を参考に子テーマを設定してください。

Simplicityを使うなら子テーマをインストールしておいた方がいい

ブログをカスタマイズするなら子テーマをインストールした方がよいです。子テーマとはカスタマイズした内容を消さないために設定するもので親テーマよりも優先してブログに反映されるのが特徴です。子テーマを設定していないと親テーマがアップデートされる度にカスタマイズが無効になってしまうため、子テーマをインストールしておくべきです。

では、404.phpファイルのコピー方法です。私はロリポップのサーバを使ってますので、ファイル転送はロリポップサーバの画面になってます。

コピー先は子テーマの直下で良いです。私は久しぶりにFTPを使ったので、少し手こずりました。笑

２．404.phpの子テーマをカスタマイズする

404.phpのコピーが完了すると、「外観」→「テーマの編集」を押して、「404テンプレート」を開くと、404エラーページのカスタマイズが出来ます。

あとは先ほどの「有益な404エラーページとは」に従ってエラーページをカスタマイズします。

私のサイトでは先ほどの「有益な404ページを作成する」(by Google)に従って、カスタマイズしました。出来るようにしたことは、大きく３つです。

サイト内の検索して見つける
カテゴリ一覧から見つける
リンク切れを報告する問い合わせフォームを設ける

実際のパパたすの404エラーページはこちらです。

以下に汎用的にした404.phpの内容を貼付けます。

デザインも修正したい方は「ここにスタイルシートを書く」というところに、cssの内容を記載してください。

<?php get_header(); ?>
<style>
  <!-- ここにスタイルシートを書く -->
</style>
<div class="post">
<h2>ご指定のページは削除されたかURLが変更となっております。</h2>
<br>
  <!-- ここに冒頭文を書く -->
<img class="not-found" src=“画像のリンク” alt="404 Not Found" width="30%" height="30%" align="left"/>

<a href="https://ikumen-sim.net/"><i class="fa fa-home"></i>パパたす</a>をご覧頂きありがとうございます。誠に申し訳ございませんが、ご指定のページは削除されたかURLが変更されています。<br>お手数をおかけしますが、以下の方法でもう一度目的のページをお探し下さい。

  <!-- 改行で表示を微調整 -->
<br><br><br><br><br><br>

  <h3>１．サイト内を検索して見つける</h3>
  <!-- 検索ボックスを設置 -->
  <p>検索フォームにお探しのページに該当するキーワードを入力して下さい。キーワードに該当するページのリストが表示されます。</p>
  <?php get_search_form(); ?>

<br>
  <h3>２．カテゴリ一覧から見つける</h3>
  <!-- カテゴリー一覧を表示 -->
  <p>それぞれのカテゴリーのトップページからもう一度目的のページをお探しになってみて下さい。</p>
  <ul>
  <?php
    wp_list_categories(
      array(
        'title_li'  => '',
        'depth'     => 1
      )
    );
  ?>
  </ul>

<br>
</div>
<!-- END div.post -->
<?php get_footer(); ?>

これで、カスタマイズは完了です。カスタマイズ結果を確認したい場合は、URLに「http://サイトのURL/404.php」を入力すれば、404エラーページが確認できます。

最後に

いやー、今回色々勉強して思いましたが、エラーページ１つにしてもバカにできないですね。この設定をするために、無駄に５〜６時間ぐらいかかった気がします。笑

でも、４０４エラーページを見るのはGoogle Botだけなんてオチになってしまうかも。。。。まー、それもSEO対策という点でよしと考えたいなと思います。（それならヘタに４０４エラーページ専用の画像を手書きで作る必要もなかったのかも。。。笑）

今回はこちらのサイトを参考にさせて頂きました。ありがとうございました。

参考：SEO効果を最大化するための404エラーページのカスタマイズ方法
参考：有益な 404 ページを作成する