アシのMちゃん 「クライアントから404ページを作って」って依頼されたんですけど、どうやって作ったらいいですか？
こんな人のための記事です。
オリジナルの404エラーページは、通常コンテンツと同じように作成しても、そのままではエラーの発生した際に表示することはできません。
404エラーが起こった際に作成したページの表示を設定する必要があります。
この記事では、
- 404エラーページの3つの設定方法
- エラーが発生するそもそもの原因
- 他社サイトの参考例
について、解説をします。
ツクルカ 404エラーはSEOに対する影響はありませんが、オリジナルページを作成することは推奨されています。時間のあるときにサクッと用意しましょう♪
404エラーページとは？
404 not found(404エラー）ページとは、存在しないページへのアクセス時に表示される「HTTPステータスコード」のことです。
HTTPステータスコードとは、Webブラウザやクローラーがサーバーにアクセスした際に返されるレスポンスのことで、ページが存在しないときに返されるステータスコードが「404」が返されます。
HTTPステータスコードには404以外も種類があり、100番台（100・101）は情報や案内、200番台（200・202）は処理の成功、300番台（301・302）はリダイレクトなどが挙げられます。
ちなみに、400番台（403・404）は処理の失敗を表すコードに指定されています。
404ページが発生する原因
404エラーには、意図したエラーと意図していないエラーの2つがあります。
意図したエラーには、過去に作成したページの削除やサイトの閉鎖などです。
こうした際の404エラーについては、404エラーページを表示するのではなくリダイレクトを設定するなどの対応が必要です。
こちらの意図していないエラーについて、以下のような原因が考えられます。
- ユーザーが間違ったURLを入力した
- 新しいURLへのリダイレクト設定ができていない
- リンク切れしているリンク先の表示
リダイレクトとリンク切れは発見次第修正を行い、URLの誤入力については、オリジナルの404エラーページを表示して、ユーザーにわかりやすくページが存在しないことを伝えましょう。
404エラーページの参考例
テレビ東京
「お探しのページは見つかりませんでした」とフォントサイズを大きく表示し、グローバルナビだけでなく、トップページへの遷移やサイト内検索を設置するなど、ユーザーを次の行動に移すための工夫がされています。
RIZAP
「ページが見つかりません」という404エラーページに、予約や問い合わせフォームへのリンクや電話での問い合わせもファーストビューに表示しています。
この他、商品やコースを紹介するバナーも設置されており、404エラーページをコンテンツの一つで利用しているのが特徴です。
マクドナルド
シンプルでわかりやすい構成をしているのが、マクドナルドの404エラーページです。
エラーページが表示された理由も挙げられている丁寧な作りのページです。
プラチナゲームズ
人気ゲームを手がけるゲーム開発会社の404エラーページです。
エラーページでゲームプレイが楽しめる仕様になっており、ブランドアピールをしっかり行っています。
ゲーム終了後には、スコアをTwitterで共有することも可能です。
404エラーページの作成方法
404エラーページの作成において重要なことは、
- エラーであることを伝える
- 離脱防止のためのユーザービリティを意識する
- サイトの目的に合わせたページへの誘導
の３点です。
単にエラーであることだけを伝えるページにせず、ユーザーが目的のページに辿り着けるようひと工夫をしたエラーページを作成しましょう。
404エラーページの設定方法
404エラーページは作ったままでは、エラー時に表示することはできません。
エラーが起こったときに表示するような設定が必要です。
.htaccessの場合
404エラーページを「404.html」などのHTMLファイルとして作成した際に用いるのが、.htccessを利用した設定方法です。
設定方法は、まず
404.htmlファイルをドメイン直下のルートディレクトリに設置します。
次に、以下の内容を記載した.htccessを同じ階層に設置します。
ErrorDocument 404 /404.html
こうすることで、HTTPステータスコードが404を返すときに404.htmlページを表示することができます。
また、.htccessにコードを記載する際の注意点は、上記のように相対パスで記載することです。
絶対パスで記載をするとページが存在する状態として扱われるため、SEOで低評価のつく恐れがあります。
WordPressの場合
サイトをWordPressで管理している場合は、404.phpといったphpファイルを用意します。
こうすることで、エラーが発生したときに自動的に404.phpの内容が読み込まれるようになります。
404.phpの設置位置は、テーマフォルダの直下です。
テーマによっては、すでに404.phpが存在してることもあるので、事前確認をし、そちらのファイルを更新することでオリジナルの404エラーページに差し替えることができます。
また、404エラーページにアクセスして欲しくない場合は、リダクレイとプラグインを利用して404エラーページを表示しないよう工夫することも可能です。
レンタルサーバーの場合
利用しているレンタルサーバーの設定画面からでも404エラーページの設定は可能です。
レンタルサーバーごとに仕様は異なるため、レンタルサーバー契約時の管理画面を確認し、そちらで404エラーページの設定をしましょう。
まとめ
この記事では、オリジナル404ページの作成と設定方法について解説をしました。
404エラーページは、SEOに悪い影響を与えることはありません。
しかし、サイトの利便性（ユーザービリティ）の向上のため、Googleでもわかりやすいエラーページの作成を推奨しています。
404エラーが発生した際にユーザーの離脱を防ぐためにも、ヘッダーやナビゲーションなどデザインを統一したわかりやすい404エラーページの作成は必須です。
できるだけ早く、時間のあるときに対応してしまいましょう。
