404ページとは?必要性・作る際のポイントから設定方法までを紹介

サイト制作

404ページとは?必要性・作る際のポイントから設定方法までを紹介

Webサイトを閲覧しているとき、「Not Found」と表示されるページを見た経験がある方も多くいるでしょう。Not Foundと表示されたページは404ページと言われ、ページが存在しない、いわゆるリンク切れの場合に表示されるエラーページです。

404ページは、意外と重要な役割を持っています。サイトを運営するにあたり必要な知識となるため、概要や作成・設定方法をきちんと把握しておきましょう。

そこで今回は、404ページの概要から、404ページを作る際に押さえるべきポイント、さらに設定方法まで詳しく解説します。サイトを運営している方は、ぜひ参考にしてください。

1.404ページとは?

404ページとは、「Not Found」と表示されたエラーページのことで、ページが見つからないことを意味します。そして404という数字は、サーバーから返されるHTTPステータスコードです。

ブラウザでサイトを閲覧するときは、リンクをクリックしたり、URLを直接入力したりしてページを開くことが基本です。このとき、サーバーに対して「ページを表示させたい」というリクエストが送られます。

リクエストを受け取ったサーバー側は、リクエスト内容を処理したのち、3桁のHTTPステータスコードをレスポンスします。リクエストしたURLのページが見つからない場合は、サーバー側から「404」のHTTPステータスコードが返され、404ページとして表示されるということです。

なお、HTTPステータスコードには、404以外にもさまざまな番号・コードが存在します。

番号 意味 コード例
100~ 情報 102:何らかの理由で、処理を継続している
200~ 成功 200:リクエストが成功し、正しく表示されている
300~ リダイレクション 301:恒久的に移転されたページURLに転送している
400~ クライアントエラー 404:ページが見つからない
500~ サーバーエラー 503:何らかの理由で、サーバーが一時的に利用できない

上記を見てわかるように、400番台と500番台は何らかのエラーが起きたことにより示されるステータスコードです。これらのステータスコードが表示された場合は、訪問者であるユーザーが離脱する可能性も高まるため、必ず原因を探りましょう。

1-1.404ページが表示される原因

400番台は、クライアントエラー、いわゆる「サイトそのもの」もしくは「リクエストの誤り」によるエラーを示すステータスコードとなっています。前述の通り、404ページはページが見つからないことを意味しており、下記のような場合に表示されます。

  • 入力したURLが間違っていたとき
  • 削除された、もしくは存在しないページにアクセスしたとき

入力したURLが間違っていたことによる404ページは、サイト運営者側の問題だけではありません。このように、404ページが表示される原因の一部は、ユーザー側にあるということも覚えておきましょう。

1-2.404ページの必要性

サイトの中には、404ページが表示されるケースと、トップページにリダイレクトされるケースがあります。サイトに詳しくないユーザーの場合、「閲覧したかったページを開いたはずが、自動的にトップページに移動されている」という状況となり、混乱してしまう可能性も高いです。

そのため、エラーページであっても404ページを表示させる必要があると言えるでしょう。

2.魅力的な404ページを作るメリット

カスタマイズして魅力的な404ページを作ると、離脱率を軽減できるという大きなメリットが受けられます。

基本的に、カスタマイズされていない404ページは、「Not Found」と「リクエストされたURLが見つかりませんでした」という英文が表記されます。

トップページのデザインが反映されるわけでもなければ、サイト内リンクもない非常にシンプルなページとなり、ユーザーが離脱する可能性が高くなってしまいます。たとえ404ページが表示されてしまっても、離脱率をできるだけ防ぐために魅力的な404ページを作りましょう。

3.404ページを作る際に押さえるべきポイント2つ

オリジナルの404ページを表示させるためには、「404.html」や「404.php」ページをあらかじめ作成する必要があります。ファイル名は任意で問題ありませんが、「404」と記載することで、ページの管理が容易となります。

とは言え、オリジナルの404ページを作成しただけでは、ユーザーの離脱を最大限防ぐことができません。ここからは、404ページを作る際に押さえるべきポイントを2つ紹介します。

3-1.自社サイトと統一感のあるデザインにする

404ページを作る際は、自社サイトとの統一感を損なわないデザインにすることが大切です。デザインを統一することで、前述したような「非常にシンプルなエラーページが表示されたことによる離脱」を防ぐことができます。

しかし、あくまでもデザインの統一が重要であるだけで、デザイン性の高い404ページにしなければならないというわけではありません。自社サイトと最低限デザインが統一されたうえで、存在しないページにアクセスしたことが一目でわかるシンプルなデザインにしましょう。

3-2.ユーザーに次のアクションを促す文章を入れる

ページが存在していないことが示された404ページに、「ユーザーを目的のページに誘導するための要素」と「次のアクションに促す文章」を含めることで、離脱をより防ぐことが可能です。具体的なやり方は、下記を参考にしてください。

  • 「ページから探す」という文言とともに、簡易的なサイトマップを記載する
  • 「ワードから探す」という文言とともに、サイト内検索窓を記載する

サイトマップは、サイト内のカテゴリごとに分けて記載するとより親切です。また、サイトマップは検索エンジンのクローラーの回遊導線にもなり、SEO面でも良い影響を与えます。

4.404ページの設定方法

オリジナルの404ページを作ったあとは、404エラーが起きた際に表示させられるよう、適切な方法でページの表示設定を行いましょう。オリジナルの404ページの表示設定は、サーバーにより方法がやや異なります。

ここからは、2つの代表的な設定方法を紹介します。

4-1..htaccessを使う場合

.htaccessを使った404エラーページの大まかな設定手順は、下記の通りです。

(1) 404ページを「404.html」で作成
(2) 作成した「404.html」をドメイン直下のルートディレクトリに設置
(3)

.htaccess内に下記のコードを記述

ErrorDocument 404 /404.html 
(4) FTPソフトなどを用いてサーバーにアップロード

また、.htaccess内に記述するコードは、「/」から始まる相対パス(ルートパス)を指定して「ハード404」にしましょう。絶対パス(URL)での指定は、「ソフト404」となってしまいます。

ソフト404エラーの場合、リダイレクトを経て成功を意味する「200」のHTTPステータスコードで返答され、クローリングされる必要のない404ページがクローリングされます。

さらに、画像がうまく反映されないなどの不具合が生じる可能性もあるため、特別な事情がない限り、.htaccess内に記述するコードは相対パスがおすすめです。

4-2.WordPressの場合

WordPressの場合、404のステータスコードが返された際は、トップページに自動的にリダイレクトされるケースが基本です。

WordPressでオリジナルの404ページを作成・設定したいのであれば、まず「404.php」ファイルを作成してください。そして、作成・カスタマイズした「404.php」ファイルを、テーマフォルダの直下に設置しましょう。基本的に.htaccessへのコード記述は不要となるため、比較的簡単です。

また、使用するテーマによっては、あらかじめある程度カスタマイズされたオリジナルの404ページが存在することもあります。設定前に一度、404ページの設定項目の有無を確認しましょう。テーマによって設定は大きく異なるため、テーマごとの方法を調べることもおすすめです。

なお、WordPressにはその他にも、404ページを作成するためのプラグインが存在します。プラグインはテーマとの互換性がない場合もあるため、事前に確認したうえで使用してください。

まとめ

404ページは、存在しないページにアクセスした際に表示されるエラーページです。カスタマイズされていないデフォルトの404ページは、基本的に質素なデザインとなり、離脱の原因にもなりかねません。そのため、魅力的な404ページにカスタマイズすることが大切です。

また、作成したオリジナルの404ページの設定は、各サイトによって細かく異なります。正しく表示されて、かつユーザーの離脱をきちんと防ぐためにも、魅力的な404ページを適切な方法で設定しましょう。

ここまでの内容を参考に、ぜひオリジナルの404ページを作成・設定してください。

Googleコアアルゴリズムアップデート~分析結果と対応策 初心者でも使いこなせるSEO一元管理ツールGRAN SEARCH

RANKING

TOTAL
WEEKLY
Googleコアアルゴリズムアップデート~分析結果と対応策
上部へ戻る
GRAN SEARCH

300分かかる競合分析が1分で可能に無料で分析してみる

  • 分かりやすい操作で簡単に分析
  • SEOに必要な機能がAll in One
  • ずっと無料で使い続けられる
GRAN SEARCHを無料で試す
GRAN SEARCH