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

20160502-03
  • このエントリーをはてなブックマークに追加

404エラーページは内部対策の一つで、サイトの利便性を高めユーザーに満足してもらうためにも、サイト内のクローラーの回遊性を高めるためにも重要な役割を持つ。

そのため、あなたが完璧なSEO、そして最高の利便性を追い求めるなら404エラーページは欠かすことのできないものだ。

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

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

そこで、ここでは弊社が、ウェブに関わる全ての人が理解しておくべきと考えている404エラーページに関する全情報をご紹介する。

  • そもそも404エラーページとは
  • 404エラーページの役割
  • サイトの利便性を下げる404エラーページの例
  • サイトの利便性を高める404エラーページの例
  • 404エラーページのSEO効果
  • 理想的な404ページを作るために必ず抑えておくべき4つの条件
  • WordPressカスタマイズ初心者が抑えておくべき404ページの詳細なカスタマイズ方法

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

1. 404エラーページとは

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

普通の404ページ

これが404エラーページと呼ばれるもので、具体的には、「サイト上に存在しないURLにユーザーがアクセスしようとた時に表示されるページ」のことだ。

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

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

などが該当する。

さて、普段何気なく目にすることのある404エラーページだが、実は、サイト全体のSEO効果を高める上でも利便性を高める上でも非常に重要な役割を持っている。

その役割とは以下の2つだ。

  • ユーザーの混乱を避けることによって、より利便性の高いサイトを実現する。
  • サイト内でのクローラーの巡回効率を高め、サイト全体のSEO効果を高める。

上の図のような404エラーページは非常に良くに見られるものだが、結論から言うと、このような形では、この2つの役割を果たすことができないのでよろしくない。

詳しく解説していこう。

1.1. 404エラーページの役割

404ページの役割は、以下のように表すことができる。

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

バズ部

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

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

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

404ページ

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

ウェブに慣れていないユーザーなどは「パソコンが壊れてしまった。」と勘違いしてしまうことも考えられる。また、それ以外の場合でも、ほとんどのユーザーはそのまま別のサイトに移動しようとしてしまう。

これは、あなたのサイトの利便性が低いということに他ならない。

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

次に、バズ部に実装している404エラーページを確認してみて欲しい。

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

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

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

1.2. 404エラーページのSEO効果

適切な404エラーページには、サイトの利便性を高める効果だけでなく、クローラーの回遊性を向上させるという効果がある。

ユーザーだけでなくクローラーも内部リンクを辿って404エラーページにアクセスしてくる。その時に、404 Not Found と表示されているだけのページだとしたら、クローラーはそれ以上サイト内を巡回することができなくなる。

結果、クロールバジェットは無意味に消費され、本来クロールしてもらえるはずだった他のページにクローラーが回らない。

しかし、404エラーページに他に有益なコンテンツへのリンクが貼られていれば、クローラーはそのリンクを辿って、より多くのページを回遊しようとしてくれる。また適切な404エラーページには通常、人気のある記事や、カテゴリーページなどの重要なページへのリンクを用意するため、クローラーをサイト内のより重要なページに誘導することができる。

そして、その重要なページは検索エンジンにより正確に評価されやすくなる。これが404エラーページによって得られるSEO効果だ。

※クローラーとクロールバジェットに関して
クローラーに関しては『検索エンジンの仕組み』で、クロールバジェットに関しては『robots.txtの設定法』でそれぞれ詳しく解説しているので目を通しておこう。

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エラーページと同じようなものを実装するためのカスタマイズする方法をご紹介していこう。初心者の人にとってはややこしく感じるかもしれないが、技術的には非常に簡単だ。

基本的なPHPやHTMLのスキルがあればできることなので、これからそれらのプログラム言語を習得したいという方や、WordPressのカスタマイズの勉強をしたいという方にとって入門編としては最適だろう。

さて、 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でデザインに変更を加えた時に他のページへの悪影響を防ぐためのものだ。

それでは、早速、一つ一つの要素を実装していこう。

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

 3.1.1. 冒頭文の設定

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

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

なお、4行目から7行目までの記述は404エラーページだけを作る場合は必要ないが、サイト全体の利便性をより高めるためには是非用意しておきたい記述だ。詳しくは、「3.4. 応用編」で解説しているので、後ほど確認して欲しい。

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. 無効なリンクの報告フォームの設置

ユーザーに無効なリンクを報告してもらうフォームを設置する。なお、contact form 7というプラグインを使っていることが前提なので、まだ使用していない場合は、『Contact Form 7 の使い方』を参考にして導入しておこう。

そのうえでphpファイルには以下のように記述すれば良い。

do_shortcode()という関数を使うとショートコードを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()という関数を記述する。

これは、‘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の内容を表示するという指示をすれば良い。それを反映したのが下のソースだ。

6行目から21行目までがキーワードに該当する検索結果があった場合の指示、27行目がなかった場合の指示だ。

後者に関しては404.phpを作った時と同じように、content-none.phpを呼び出すためのget_template_part()の記述をしただけのものだ。

3.4.3 search.phpをアップロード

search.phpが完成したら404.phpやcontent-none.phpと同じ場所にファイルをアップロードしよう。

実際に、あなたのサイトの記事にないであろう語句で検索みて確認しておこう。

9e454bbb326ec9ba7924e87303ef2ef3

 

このように冒頭文も検索結果ページ用に作ったものが表示されていることが確認できる。

なお、このページは404エラーページではなく、あくまでも検索結果がなかった場合に表示されるページなので404HTTPステータスコードの確認は不要だ。

4. まとめ

404エラーページに関して抑えておくべきことは以上だ。

SEO関係者だけでなく、WEBデザイナーやエンジニアの方も、ここで解説した404エラーページの役割に関してはしっかりと覚えておこう。そして、是非ユーザーにとっても検索エンジンにとっても利便性の高いサイトを実現するために役立てて欲しい。

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

是非、貴社のWEBマーケティングにもご活用下さい。


EBookをダウンロード

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから