サイトの規模も大きくなり、あなたは今サイトの更なる利便性向上の為に404エラーページの改善を考えている事だろう。
404エラーページの改善は、サイトの更なる利便性向上を実現する上で欠かせない立派なSEO内部対策の1つだ。
それにも関わらず、多くのSEO関係者、デザイナー、そしてエンジニアは、404エラーページが本来どのような目的で設置するべきもので、ユーザーに対してどういうメリットを提供するものなのかを理解していない。
そして気づかない内に、検索ユーザーやSEOに対して役に立たない404エラーページを設置しまっている。
そこでこの記事では「404エラーページが果たすべき本当の役割」から、それを踏まえたサイトの利便性を最大限に高める「404エラーページの作り方」までを詳しく紹介する。
ぜひじっくりと読み込んで実践して頂ければ幸いだ。
404エラーページとは
色々なサイトを見ている時に以下のように ” 404 Not Found ” と書かれたページにたどり着いた経験はないだろうか？
この様な「サイト上に存在しないURLにユーザーがアクセスしようとした時に表示されるページ」を404エラーページと言う。
ちなみに、この「存在しないページ」とは、具体的には
- 以前は存在していたが現在は削除されているページ
- URLの一部を間違えて入力してしまった場合のページ
- 既に切れたリンク（内部リンク）をクリックした場合のページ
などが該当する。
この404エラーページには、「ユーザーの混乱を避けることにより、より利便性の高いサイトを実現する」という役割があるのだが、実は上記の様な工夫のない404エラーページでは、全くその役割を満たす事ができない。
どう言うことか詳しく解説していこう。
404エラーページの役割
404エラーページのそもそもの役割を今一度考えてみると、以下の様に表す事ができる。
存在しないURLにユーザーがアクセスしてしまった時に、彼らに、既にページが存在しないことを伝え、目的のページを見つける方法を提案してあげること。
この役割をしっかりと果たす404エラーページを用意しておくとサイトの利便性は大きく高まる。例とともに解説していこう。
サイトの利便性を下げる404エラーページの例
仮に、バズ部を見ていて『SEO内部対策で行うべき20の事』という内部リンクをクリックした時に以下のようなページが表示されたらどうなるだろうか？
ユーザーはSEO内部対策に関するページが表示されることを期待していたのに、なんだか分からないページに来てしまったことで戸惑ってしまうことだろう。
こうなると、ほとんどのユーザーはそのまま別のサイトに移動しようとしてしまう。これは、あなたのサイトの利便性が低いということに他ならない。
サイトの利便性を高める404エラーページの例
次に、バズ部に実装している404エラーページを確認してみて欲しい。
このように、ユーザーがアクセスしようとしたURLが既に存在しないことを伝え、目的のコンテンツを見つけるために役立つ方法を示すという本来の役割を果たしているページを用意すると以下の２つのメリットが生まれる。
- ウェブに慣れていないユーザーの戸惑いを軽減することができる。
- 目的の、又は他に興味のあるコンテンツを見つけてもらい離脱率を下げることができる。
つまり、ユーザーにとっては遥かに利便性の高いサイトになるということだ。
理想的な404エラーページの4つの条件
ここまでで404エラーページの役割とその重要性に関して理解していただけただろう。
それではサイトの利便性を高め、SEO効果を高める理想的な404エラーページとは、どのようなものだろうか。それは以下の4つの条件を満たしたもののことだ。
- ユーザーに対して探しているページが見つからないことを明確に伝えること
- 404ページのデザインをサイトのその他のページのデザインと同一にすること
- 人気のある記事や投稿へのリンク、トップページへのリンクを追加すること
- ウェブサーバーが404HTTPステータスコードを返すことを確認すること
有益な404ページを作成する | Google
一つずつ解説していこう。
2.1. 探しているページがないことを明確に伝える
404エラーページに、「404 Not Found 」や「見つかりません。」のようなあいまいなテキストを表示しているだけのサイトは非常に多い。
考えてみて欲しい。
ユーザーはサイトの内部リンクや、以前ブックマークなどに保存していて再びページを見に来ようとしたが、既にそのURLが削除されてしまった場合などに404エラーページに訪れる。その時に急に上記のような曖昧なテキストが表示されるとユーザーは戸惑ってしまうことが容易に想像できるだろう。
そこでバズ部では、「あなたがアクセスしようとしたページは削除されたかURLが変更されています。」というように、既にユーザーがアクセスしようとしたページが存在しないことを明確に伝えるテキストを用意している。
このようにユーザーに配慮して彼らが戸惑わないようなテキストを用意しよう。
2.2. その他のページと同一のデザインを保つこと
404エラーページのデザインに関してGoogleは以下のように言及している。
404ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします。
デザイン性が高い404エラーページを設置しているサイトは少なくない。特にデザイナーなどには、自分のデザインの特徴を404エラーページなどで表現したいという人も少なくないだろう。
しかし404エラーページは、オリジナリティを表現する場ではなく、あくまでも、意図せず存在しないページにアクセスしてしまったユーザーに対して役立つ情報を提供するための場だということを忘れないようにしよう。
美しくデザインされた404エラーページは、見た目的に楽しいものではあるが、SEOやサイトの利便性を考えると理想的ではないということだ。
2.3. ユーザーに役立つ情報を提供すること
繰り返しになるが、404エラーページに訪れるユーザーは、意図せず存在しないページにアクセスしてしまったユーザーだ。
彼らは興味のあるページへの内部リンクを見たり、ブックマークしてたものを再度見ようとして404エラーページに訪れている。
そうしたユーザーにとって役立つ情報とは、自分が見たいページを見つけるための情報だ。
具体的には、
- サイト内検索
- 最も人気のあるページへのリンク
- カテゴリートップページへのリンク
- サイトトップページへのリンク
などの情報があると、ユーザーは自発的に探していたページを見つけたり、他に興味のあるコンテンツを探すことができる。
2.4. 404HTTPステータスコードの確認
404HTTPステータスコードとは、そのページが存在しないことを検索エンジンに伝えるためのHTTPコードと呼ばれるものだ。
詳しくは次項の404ページのカスタマイズ方法でご紹介するが、WordPressで404.phpファイルを作ると、それが読み出された時には自動的に404HTTPステータスコードが返されるようになっているので基本的には問題ない。
しかし、カスタマイズした後には念のためにステータスコードを確認する癖をつけておこう。
Google Chrome デベロッパーツールを使えば簡単に確認することができる。
ツールはWindowsではF12キーを、MacではCommand+Option+Iで起動することができる。対象となるページでツールを起動した後に、ページをリロードすれば下図のようにステータスコードを確認できる。
3. 404エラーページのカスタマイズ方法
ここからはいよいよ、実際にWordPressでバズ部の様な404エラーページをカスタマイズする方法を紹介しよう。初心者の人にとっては少しややこしく感じるかもしれないが、実装自体はほぼコピーアンドペーストだけで行える場合がほとんどだ。
さて、 404エラーページの作成手順は以下の通りだ。
- content-none.php ファイルを作る。
- 404.phpファイルを作る。
- 両方のファイルをアップロードする。
WordPressでは404.phpというファイルを作りアップロードするだけでも404エラーページを実装することができるが、ここではより汎用性の高い、content-none.phpというインクルードファイルから作成する方法をご紹介する。
※カスタマイズの説明で使用したテーマに関して
以降の内容はバズ部で使っているXeoryBaseというWordPressテーマを例に解説していく。使用しているテーマによって記述内容は多少異なるが、全体的な大枠は一緒なので、それぞれお使いのテーマに合わせて適宜応用するようにして欲しい。
3.1. content-none.phpを作る
まず、content-none.phpを作ろう。これはWordPressのインクルードファイルと呼ばれるもので、このファイルの内容はWordPressで生成されるページ内のどこででも表示させることができる。
詳しくは、WordPress Codexのインクルードタグのページを参照しよう。
前述のように、通常、WordPressに404エラーページを設置する場合は404.phpを作るだけで良い。
しかし、インクルードファイルを作ることによって様々なページに応用することができる。詳しくは記事後半で解説しているが、今は「WordPressをカスタマイズする上でインクルードファイルを使えると何かと便利である」と理解しておこう
それでは早速、content-none.phpに404エラーページで表示したい内容を記述していこう。バズ部の404エラーページは以下の５つの要素で構成している。
- 冒頭文
- 検索して見つける
- 人気の記事から見つける
- カテゴリー一覧から見つける
- 無効なリンクを報告する
実際に、content-none.phpに記述している内容を単純化すると以下の通りだ。
1 2 3 4 5 6 7 8 9 10 11 | <div class="content-none"> <!-- ここに冒頭文を書く --> <h2>１．検索して見つける</h2> <!-- 検索ボックスを設置 --> <h2>２．人気の記事から見つける</h2> <!-- 人気の記事一覧を表示 --> <h2>３．カテゴリーから見つける</h2> <!-- カテゴリー一覧を表示 --> <h2>４．無効なリンクを報告する</h2> <!-- 無効なリンクを表示 --> </div> |
余談だが、1行目と最後の行の
1 | <div class=“content-none”></div> |
は、404エラーページで表示するコンテンツ全体に独自のclass指定をつけることによって、CSSでデザインに変更を加えた時に他のページへの悪影響を防ぐためのものだ。
それでは、早速、一つ一つの要素を実装していこう。なお以下では、5つの要素の各コードを解説した後に「content-none.phpの全ソース」見出しで全文のソースを紹介している。
インクルードファイルのファイル名に関して
ここでは、content-none.phpというファイル名にしたが、ファイル名は任意のものに変更しても構わない。phpを編集するのが初めての方は、このままcontent-none.phpというファイル名で進めよう。
3.1.1. 冒頭文の設定
まず、冒頭文は以下のように記述する。
1 2 3 4 5 6 7 8 | <!?php if( is_404() ){ // 404ページの場合 echo 'いつもバズ部をご覧頂きありがとうございます。大変申し訳ないのですが、あなたがアクセスしようとしたページは削除されたかURLが変更されています。お手数をおかけしますが、以下の方法からもう一度目的のページをお探し下さい。'; }elseif( is_search() ){ // 検索結果ページの場合 $r = get_search_query(); echo 'いつもバズ部をご覧頂きありがとうございます。「.'$r'.」で検索しましたがページが見つかりませんでした。お手数をおかけしますが、以下の方法からもう一度目的のページをお探し下さい。'; } ?> |
echo ‘ 以降のテキストは、あなたのサイトに合った文言に変更しよう。
なお、4行目から7行目までの記述は404エラーページだけを作る場合は必要ないが、サイト内検索結果が空の場合に類似のエラーページを表示させる為に挿入する。詳しくは当記事下部にて紹介しているので、後ほど確認してほしい。
3.1.2. 検索フォームの設定
続いて検索フォームを設置しよう。WordPressには、もともとget_search_form()という検索フォームを出力するための関数が用意されている。そのため、以下のように記述すれば良い。
1 2 3 4 | <h2>１．検索して見つける</h2> <!-- 検索ボックスを設置 --> <p>検索ボックスにお探しのコンテンツに該当するキーワードを入力して下さい。それに近しいページのリストが表示されます。</p> <?php get_search_form(); ?> |
get_search_form()は、テーマにsearchform.phpがあればそれを、なければWordPressにもともと備わっている検索フォームを呼び出す。
バズ部の場合はXeoryBaseに内包しているsearchform.phpが呼び出されている。
3.1.3. 人気記事一覧の設置
人気記事一覧は以下の記述で表示することができる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?php // クエリ $args = array( 'showposts' => 20, 'meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'DESC' ); $the_query = new WP_Query( $args ); // ループ echo '<ol>'; $i = 1; while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <li class="content-none-views content-none-views-<?php echo $i; ?>"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </li> <?php $i++; endwhile; // 投稿データをリセット wp_reset_postdata(); echo '</ol>'; ?> |
‘meta_key’に’views’を指定し、’orderby’に’meta_value_num’を指定する。‘views’には各記事のPV数が入っているので、この指定で「views(PV数)の数字順に並び変える」という命令になる。
今回は、’showposts’で20を指定し20件表示している。この数値がない場合は、管理画面の「設定>表示設定」で指定した数値の分だけ表示される。
注記. XeoryBaseのように人気記事一覧機能が搭載されていないテーマの場合の解決策
なお、この箇所に関してはXeoryBaseにもともと人気記事を表示する機能が備わっているため、それを前提とした記述になっている。もし、あなたがお使いのテーマに人気記事表示機能が備わっていない場合は、人気記事一覧を表示するプラグインをインストールすることで同様の事が実現出来る。
「WordPress Popular Posts」もしくは「WP-PostViews」をインストールすれば、上記のソースをそのまま使用することが可能だ。「Jetpack Post Views」を使う場合は‘meta_key’の’views’を’jetpack-post-views’に変えれば上記と同様に人気の記事一覧を表示することができる。
WordPress Popular Postsの使い方については「WordPress Popular Posts で人気記事を表示する方法」に書いてあるので参考にして欲しい。
3.1.4. カテゴリー一覧の設置
検索フォームと同じようにWordPressには、カテゴリー一覧を表示するwp_category_list()という関数が用意されている。そのため以下のように記述すれば良い。
1 2 3 4 5 6 7 8 9 10 11 | <h2>２．カテゴリーから見つける</h2> <!-- カテゴリー一覧を表示 --> <p>それぞれのカテゴリーのトップページからもう一度目的のページをお探しになってみて下さい。</p> <?php wp_list_categories( array( 'title_li' => '', 'depth' => 1 ) ); ?> |
7行目にある
1 2 3 | array( 'title_li' => '' ) |
という記述は、デフォルトだと1行目に表示される”カテゴリー”というタイトルを表示しないための設定だ。
その下の
1 2 3 | array( 'depth' => 1 ) |
は親カテゴリーだけを表示して、子カテゴリーは表示しないという設定だ。数字を2に変えると2階層目までのカテゴリーが、3にすると3階層目までのカテゴリーが表示されるようになる。
なお、wp_category_list()という関数には、オプションでいろいろな設定が出来るようになっている。興味のある方はWordPress Codex のテンプレートタグを確認してみよう。
3.1.5. 無効なリンクの報告フォームの設置
1 2 3 | <h2>４．無効なリンクを報告する</h2> <p>もし当サイト内で無効なリンクを発見された場合、どのページのどのリンクが無効だったかをご報告頂けると幸いです。今後とも、使いやすいサイトになるよう精進させていただきますのでよろしくお願いいたします。</p> <?php echo do_shortcode('[contact-form-7 id="****" title="リンク切れ報告"]'); ?> |
do_shortcode()という関数を使うとショートコードをPHPファイルに埋め込むことができる。初めての人はよく分からないかもしれないが、覚えておくと便利なものだということは知っておこう。
また最終行の「id=”****”」の中身は、WordPress管理画面上の「Contact Form 7」設定画面から以下の様に確認する事ができる。
content-none.phpの全ソース
ここまでの内容を全てcontent-none.phpに反映させると以下の記述になるので確認しよう。
content-none.phpの全ソース文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <div class="content-none"> <!-- ここに冒頭文を書く --> <?php if( is_404() ){ // 404ページの場合 echo 'いつもバズ部をご覧頂きありがとうございます。大変申し訳ないのですが、あなたがアクセスしようとしたページは削除されたかURLが変更されています。お手数をおかけしますが、以下の方法からもう一度目的のページをお探し下さい。'; }elseif( is_search() ){ // 検索結果ページの場合 $r = get_search_query(); echo 'いつもバズ部をご覧頂きありがとうございます。「.'$r'.」で検索しましたがページが見つかりませんでした。お手数をおかけしますが、以下の方法からもう一度目的のページをお探し下さい。'; } ?> <h2>１．検索して見つける</h2> <!-- 検索ボックスを設置 --> <p>検索ボックスにお探しのコンテンツに該当するキーワードを入力して下さい。それに近しいページのリストが表示されます。</p> <?php get_search_form(); ?> <h2>２．人気の記事から見つける</h2> <?php // クエリ $args = array( 'showposts' => 20, 'meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'DESC' ); $the_query = new WP_Query( $args ); // ループ echo '<ol>'; $i = 1; while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <li class="content-none-views content-none-views-<?php echo $i; ?>"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </li> <?php $i++; endwhile; // 投稿データをリセット wp_reset_postdata(); echo '</ol>'; ?> <h2>３．カテゴリーから見つける</h2> <!-- カテゴリー一覧を表示 --> <p>それぞれのカテゴリーのトップページからもう一度目的のページをお探しになってみて下さい。</p> <ul> <?php wp_list_categories( array( 'title_li' => '', 'depth' => 1 ) ); ?> </ul> <h2>４．無効なリンクを報告する</h2> <p>もし当サイト内で無効なリンクを発見された場合、どのページのどのリンクが無効だったかをご報告頂けると幸いです。今後とも、使いやすいサイトになるよう精進させていただきますのでよろしくお願いいたします。</p> <?php echo do_shortcode('[contact-form-7 id="****" title="リンク切れ報告"]'); ?> </div> |
これをcontent-none.phpという名前で保存しよう。phpファイルを保存するには、一度テキストエディタで保存した後に、末尾の.txtを.phpに変更すれば良い。
3.2. 404.phpファイルを作る
404エラーページは固定ページを基に作る。あなたが使用しているテーマのpage.phpを複製し404.phpと名前をつけて保存しよう。
ちなみにバズ部のpage.phpは以下のような記述になっている。テンプレートによって微妙に記述内容は違うが、作業の大枠は変わらないので適宜応用しよう。
1 2 3 4 5 6 7 8 | <section class="post-content" itemprop="text"> <?php if( get_the_post_thumbnail() ) : ?> <div class="post-thumbnail"> <?php the_post_thumbnail(); ?> </div> <?php endif; ?> <?php the_content(); ?> </section> |
このソースの2行目から6行目は、「もしアイキャッチ画像があれば表示する」という命令、7行目で「本文を表示する」という命令が書かれている。
どちらも404エラーページには不要なので削除し、代わりに先ほど作ったcontent-none.phpを呼び出すためのget_template_part()という関数を記述する。
404.phpの全ソース文
1 2 3 | <section class="post-content" itemprop="text"> <?php get_template_part('content', 'none'); ?> </section> |
これは、‘content’と’none’というオプション(引数)を2つ指定してcontent-none.phpファイルを呼び出すという指示を意味する。
例えばcontent-single.phpというファイルを作成して呼び出す場合は、
1 | <?php get_template_part('content', 'single'); ?> |
という記述になる。
3.3. content-none.phpと404.phpをアップロードする
content-none.phpと404.phpが出来たら、FTPソフトを使ってテーマフォルダにアップロードする。
アップロードするフォルダは、WordPressをインストールしたフォルダ→wp-contentフォルダ→themesフォルダにある自分のテーマフォルダだ。
これで404エラーページの実装は完了だ。実装されていることを確認したら、前述したGoogle Chrome デベロッパーツールを使って、404HTTPステータスコードが正常に返されているかも忘れずに確認しておこう。
3.4. 応用編：サイト内検索結果が空の場合にエラーメッセージを表示する
ここからは、今までの内容を応用して、更に利便性の高いサイトを実現するための方法をご紹介する。以下の内容を読み込んでいただくと、content-none.phpというインクルードファイルをわざわざ用意した理由も明確にしていただけるはずだ。
それでは早速解説していこう。
WordPressでは構造上、404エラーページ以外にも、ユーザーがアクセスしてしまった場合に、そのページがまだ、又は既に存在しないことを伝え、目的のページを見つける方法を提案してあげるべきページがある。
その代表例が「サイト内の検索フォームで探してみたが、該当する検索結果が存在しなかった場合のページ」だ。 検索に該当するものがなかった場合に、「検索しましたが見つかりませんでした。」と表示するだけでは味気ない。代わりに、目的のコンテンツを探すための別の方法を示してあげるとユーザーは喜ぶだろう。
そこで、該当する検索結果が存在しなかった場合のページにも、content-none.phpに記述した内容が表示されるように設定しておこう。
3.4.1. index.phpを複製してsearch.phpを作る
検索結果ページをカスタマイズするにはsearch.phpを修正する必要がある。もし、お使いのテーマにsearch.phpがない場合はindex.phpを複製してsearch.phpと名前を変更しよう。
さて、 index.phpは以下のように記述されている。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- 投稿があった場合の表示 --> <?php endwhile; else : ?> <!-- 投稿がなかった場合の表示 --> <?php endif; ?> |
6行目から9行目までのコードは、該当するページがあった場合に何を表示するのかを指示するものだ。そして、10行目から13行目までのコードは、該当するページがなかった場合に何を表示するのかを指示するものだ。
3.4.2. 検索結果ページ用に記述を変更する
検索結果ページをカスタマイズするには、これを応用して、キーワードに該当するページがあった場合に表示するものと、キーワードに該当するページがなかった場合に表示するものを指示すれば良い。
具体的には、検索結果があった場合は、検索ワードの含まれる記事の一覧を表示するという指示を、なかった場合はcontent-none.phpの内容を表示するという指示をすれば良い。それを反映したのが下のソースだ。
search.phpの全ソース文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- 検索キーワードに該当するページがあった場合に表示する内容 --> <article id="post-<?php echo the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting"> <header class="post-header"> <ul class="post-meta list-inline"> <li class="date" itemprop="datePublished" datetime="<?php the_time('c');?>"><i class="fa fa-clock-o"></i> <?php the_time('Y.m.d');?></li> </ul> <h2 class="post-title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php esc_html(the_title()); ?></a></h2> </header> <section class="post-content" itemprop="text"> <?php if( get_the_post_thumbnail() ) { ?> <div class="post-thumbnail"> <a href="<?php the_permalink(); ?>" rel="nofollow"><?php the_post_thumbnail(); ?></a> </div> <?php } ?> <?php the_content('続きを読む'); ?> </section> </article> <!-- 検索キーワードに該当するページがあった場合に表示する内容ここまで --> <?php endwhile; else : <!-- 検索キーワードに該当するページがなかった場合に表示する内容--> get_template_part('content', 'none'); <!-- 検索キーワードに該当するページがなかった場合に表示する内容ここまで--> endif; ?> |
6行目から21行目までがキーワードに該当する検索結果があった場合の指示、27行目がなかった場合の指示だ。
後者に関しては404.phpを作った時と同じように、content-none.phpを呼び出すためのget_template_part()の記述をしただけのものだ。
3.4.3 search.phpをアップロード
search.phpが完成したら404.phpやcontent-none.phpと同じ場所にファイルをアップロードしよう。
実際に、あなたのサイトの記事にないであろう語句で検索みて確認しておこう。
このように冒頭文も検索結果ページ用に作ったものが表示されていることが確認できる。
なお、このページは404エラーページではなく、あくまでも検索結果がなかった場合に表示されるページなので404HTTPステータスコードの確認は不要だ。
4. まとめ
404エラーページに関して抑えておくべきことは以上だ。
SEO関係者だけでなく、WEBデザイナーやエンジニアの方も、ここで解説した404エラーページの役割に関してはしっかりと覚えておこう。
そして、是非ユーザーにとっても検索エンジンにとっても利便性の高いサイトを実現するために役立てて欲しい。
