【えらーぺーじ】

エラーページ(404/500) とは?

💡 「迷子」になったユーザーを助ける、エラー画面も大事なおもてなし
📌 このページのポイント
エラーページ — 404 と 500 の違い 404 Not Found 404 ページが見つかりません 原因: ・URLの入力ミス ・ページが削除された ・リンク切れ トップへ 検索 ✓ ユーザー側の問題 VS 500 Internal Server Error 500 サーバーエラーが発生 原因: ・サーバーの障害 ・プログラムのバグ ・過負荷状態 再読み込み トップへ ✗ サーバー側の問題 カスタムエラーページで離脱を防ぎ、次のアクションへ誘導
404エラーと500エラーの違い
ひよこ ひよこ

404ページって、あの「ページが見つかりません」っていうやつだよね?

ペンギン先生 ペンギン先生

そうだよ。URLを間違えたりページが削除されたときに出る画面だね。500エラーはサーバー側の問題で、「しばらくお待ちください」系のメッセージが出るよ

ひよこ ひよこ

デフォルトの味気ないエラー画面のままじゃダメなの?

ペンギン先生 ペンギン先生

サーバーのデフォルトエラー画面はそっけないから、ユーザーが「このサイトおかしい」と思って離脱しちゃうんだよ。カスタムエラーページを作って、トップページへのリンクや検索ボックスを置くだけで離脱率がかなり下がるんだ

ひよこ ひよこ

面白い404ページって見たことあるかも!

ペンギン先生 ペンギン先生

GitHubの404ページには宇宙の画像が、Googleには恐竜ゲームがあるよね。ユーモアのあるエラーページはSNSで拡散されることもあって、ブランディング効果もあるんだ

ひよこ ひよこ

SEO的に気をつけることってある?

ペンギン先生 ペンギン先生

404ページは必ずHTTPステータスコード404を返すことが大事だよ。見た目はカスタムでも、ステータスコードが200(成功)だと検索エンジンが「このページは正常」と誤認するんだ。これを「ソフト404」と呼んで、Googleも警告を出すよ。あと削除したページは301リダイレクトで新しいURLに転送するのがベストプラクティスだね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「エラーページ」って出てきたら「404や500エラー時に表示するおもてなし画面」と思えればだいたいOK!
📖 おまけ:英語の意味
「Error Page」 = エラーの画面
💬 HTTPステータスコードの404(Not Found)と500(Internal Server Error)が代表的で、Webの初期から存在する仕組みだよ
← 用語集にもどる