SEO効果を最大化するための404エラーページのカスタマイズ方法

サイトの規模も大きくなり、あなたは今サイトの更なる利便性向上の為に404エラーページの改善を考えている事だろう。

404エラーページの改善は、サイトの更なる利便性向上を実現する上で欠かせない立派なSEO内部対策の1つだ。

それにも関わらず、多くのSEO関係者、デザイナー、そしてエンジニアは、404エラーページが本来どのような目的で設置するべきもので、ユーザーに対してどういうメリットを提供するものなのかを理解していない。

そして気づかない内に、検索ユーザーやSEOに対して役に立たない404エラーページを設置しまっている。

そこでこの記事では「404エラーページが果たすべき本当の役割」から、それを踏まえたサイトの利便性を最大限に高める「404エラーページの作り方」までを詳しく紹介する。

ぜひじっくりと読み込んで実践して頂ければ幸いだ。

ebook
ebook

404エラーページとは

色々なサイトを見ている時に以下のように ” 404 Not Found ” と書かれたページにたどり着いた経験はないだろうか?

普通の404ページ

この様な「サイト上に存在しないURLにユーザーがアクセスしようとした時に表示されるページ」を404エラーページと言う。

ちなみに、この「存在しないページ」とは、具体的には

  • 以前は存在していたが現在は削除されているページ
  • URLの一部を間違えて入力してしまった場合のページ
  • 既に切れたリンク(内部リンク)をクリックした場合のページ

などが該当する。

この404エラーページには、「ユーザーの混乱を避けることにより、より利便性の高いサイトを実現する」という役割があるのだが、実は上記の様な工夫のない404エラーページでは、全くその役割を満たす事ができない。

どう言うことか詳しく解説していこう。


404エラーページの役割

404エラーページのそもそもの役割を今一度考えてみると、以下の様に表す事ができる。

存在しないURLにユーザーがアクセスしてしまった時に、彼らに、既にページが存在しないことを伝え、目的のページを見つける方法を提案してあげること。

この役割をしっかりと果たす404エラーページを用意しておくとサイトの利便性は大きく高まる。例とともに解説していこう。

サイトの利便性を下げる404エラーページの例

仮に、バズ部を見ていて『SEO内部対策で行うべき20の事』という内部リンクをクリックした時に以下のようなページが表示されたらどうなるだろうか?

404ページ

ユーザーはSEO内部対策に関するページが表示されることを期待していたのに、なんだか分からないページに来てしまったことで戸惑ってしまうことだろう。

こうなると、ほとんどのユーザーはそのまま別のサイトに移動しようとしてしまう。これは、あなたのサイトの利便性が低いということに他ならない。

サイトの利便性を高める404エラーページの例

次に、バズ部が自社製品で実際実装している404エラーページを確認してみて欲しい。

このように、ユーザーがアクセスしようとしたURLが既に存在しないことを伝え、目的のコンテンツを見つけるために役立つ方法を示すという本来の役割を果たしているページを用意すると以下の2つのメリットが生まれる。

  • ウェブに慣れていないユーザーの戸惑いを軽減することができる。
  • 目的の、又は他に興味のあるコンテンツを見つけてもらい離脱率を下げることができる。

つまり、ユーザーにとっては遥かに利便性の高いサイトになるということだ。 


理想的な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で起動することができる。対象となるページでツールを起動した後に、ページをリロードすれば下図のようにステータスコードを確認できる。

404HTTPステータスコード


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のインクルードファイル

詳しくは、WordPress Codexのインクルードタグのページを参照しよう。

前述のように、通常、WordPressに404エラーページを設置する場合は404.phpを作るだけで良い。

しかし、インクルードファイルを作ることによって様々なページに応用することができる。詳しくは記事後半で解説しているが、今は「WordPressをカスタマイズする上でインクルードファイルを使えると何かと便利である」と理解しておこう

それでは早速、content-none.phpに404エラーページで表示したい内容を記述していこう。バズ部の404エラーページは以下の5つの要素で構成している。

  • 冒頭文
  • 検索して見つける
  • 人気の記事から見つける
  • カテゴリー一覧から見つける
  • 無効なリンクを報告する

実際に、content-none.phpに記述している内容を単純化すると以下の通りだ。

 余談だが、1行目と最後の行の

は、404エラーページで表示するコンテンツ全体に独自のclass指定をつけることによって、CSSでデザインに変更を加えた時に他のページへの悪影響を防ぐためのものだ。

それでは、早速、一つ一つの要素を実装していこう。なお以下では、5つの要素の各コードを解説した後に「content-none.phpの全ソース」見出しで全文のソースを紹介している。

インクルードファイルのファイル名に関して

ここでは、content-none.phpというファイル名にしたが、ファイル名は任意のものに変更しても構わない。phpを編集するのが初めての方は、このままcontent-none.phpというファイル名で進めよう。

 3.1.1. 冒頭文の設定

まず、冒頭文は以下のように記述する。

echo ‘ 以降のテキストは、あなたのサイトに合った文言に変更しよう。

なお、4行目から7行目までの記述は404エラーページだけを作る場合は必要ないが、サイト内検索結果が空の場合に類似のエラーページを表示させる為に挿入する。詳しくは当記事下部にて紹介しているので、後ほど確認してほしい。

3.1.2. 検索フォームの設定

続いて検索フォームを設置しよう。WordPressには、もともとget_search_form()という検索フォームを出力するための関数が用意されている。そのため、以下のように記述すれば良い。

get_search_form()は、テーマにsearchform.phpがあればそれを、なければWordPressにもともと備わっている検索フォームを呼び出す。

バズ部の場合はXeoryBaseに内包しているsearchform.phpが呼び出されている。

3.1.3. 人気記事一覧の設置

人気記事一覧は以下の記述で表示することができる。

‘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()という関数が用意されている。そのため以下のように記述すれば良い。

7行目にある

という記述は、デフォルトだと1行目に表示される”カテゴリー”というタイトルを表示しないための設定だ。

その下の

は親カテゴリーだけを表示して、子カテゴリーは表示しないという設定だ。数字を2に変えると2階層目までのカテゴリーが、3にすると3階層目までのカテゴリーが表示されるようになる。

なお、wp_category_list()という関数には、オプションでいろいろな設定が出来るようになっている。興味のある方はWordPress Codex のテンプレートタグを確認してみよう。

3.1.5. 無効なリンクの報告フォームの設置

do_shortcode()という関数を使うとショートコードをPHPファイルに埋め込むことができる。初めての人はよく分からないかもしれないが、覚えておくと便利なものだということは知っておこう。

また最終行の「id=”****”」の中身は、WordPress管理画面上の「Contact Form 7」設定画面から以下の様に確認する事ができる。

contactform7の設定画面

content-none.phpの全ソース

ここまでの内容を全てcontent-none.phpに反映させると以下の記述になるので確認しよう。

content-none.phpの全ソース文

これをcontent-none.phpという名前で保存しよう。phpファイルを保存するには、一度テキストエディタで保存した後に、末尾の.txtを.phpに変更すれば良い。

3.2.  404.phpファイルを作る

404エラーページは固定ページを基に作る。あなたが使用しているテーマのpage.phpを複製し404.phpと名前をつけて保存しよう。

ちなみにバズ部のpage.phpは以下のような記述になっている。テンプレートによって微妙に記述内容は違うが、作業の大枠は変わらないので適宜応用しよう。

このソースの2行目から6行目は、「もしアイキャッチ画像があれば表示する」という命令、7行目で「本文を表示する」という命令が書かれている。

どちらも404エラーページには不要なので削除し、代わりに先ほど作ったcontent-none.phpを呼び出すためのget_template_part()という関数を記述する。

404.phpの全ソース文

これは、‘content’と’none’というオプション(引数)を2つ指定してcontent-none.phpファイルを呼び出すという指示を意味する。

例えばcontent-single.phpというファイルを作成して呼び出す場合は、

という記述になる。

3.3. content-none.phpと404.phpをアップロードする

content-none.phpと404.phpが出来たら、FTPソフトを使ってテーマフォルダにアップロードする。
アップロードするフォルダは、WordPressをインストールしたフォルダ→wp-contentフォルダ→themesフォルダにある自分のテーマフォルダだ。

WordPressテーマファイルのアップロード場所

これで404エラーページの実装は完了だ。実装されていることを確認したら、前述したGoogle Chrome デベロッパーツールを使って、404HTTPステータスコードが正常に返されているかも忘れずに確認しておこう。

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は以下のように記述されている。

6行目から9行目までのコードは、該当するページがあった場合に何を表示するのかを指示するものだ。そして、10行目から13行目までのコードは、該当するページがなかった場合に何を表示するのかを指示するものだ。

3.4.2. 検索結果ページ用に記述を変更する

検索結果ページをカスタマイズするには、これを応用して、キーワードに該当するページがあった場合に表示するものと、キーワードに該当するページがなかった場合に表示するものを指示すれば良い。

具体的には、検索結果があった場合は、検索ワードの含まれる記事の一覧を表示するという指示を、なかった場合はcontent-none.phpの内容を表示するという指示をすれば良い。それを反映したのが下のソースだ。

search.phpの全ソース文

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エラーページの役割に関してはしっかりと覚えておこう。

そして、是非ユーザーにとっても検索エンジンにとっても利便性の高いサイトを実現するために役立てて欲しい。

カテゴリー SEO内部対策

記事をシェアする

  • B!

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード