カスタムエラーページ

カスタムエラーページは、サーバーのデフォルトのシンプルな画面を、あなた独自のブランドHTMLに置き換えながらも、本物のエラーステータスを保持するため、検索エンジンには本物の404として認識されます。本ガイドでは、サポートされている各コードにページを追加する方法、安全のために除去される内容、そして検証バッジの仕組みについて説明します。

KPanelでのエラーページの場所

1. KPanelにサインインします。
2. 左サイドバーのウェブサイトをクリックし、該当のサイトをクリックします。
3. サイトの左メニューで設定を開き、続いてエラーページを開きます。

直接アクセスするアドレスは/websites/<site-id>/error-pagesです。

なぜ手間をかける価値があるのか

デフォルトのサーバーエラーページは行き止まりです。ブランディングもナビゲーションも説明もないため、そこにたどり着いた訪問者は通常そのまま離脱してしまいます。

カスタムページはそれをサイトへの導線に変えます。あなたのロゴ、あなたのタイポグラフィ、あなた自身の言葉での一文、そしてホームや検索ボックスへのリンクです。大規模なサイトでは、タイプミスや古くなったURLが常にある程度のトラフィックを生み出しており、404ページはあなたが構築できる中で最も低コストな回復策です。

サポートされているコード

8つのコードに対してカスタムページを設定できます。1コードにつき1ページです。

まずは404から始めましょう。これは圧倒的に最も一般的なもので、訪問者が障害ではなく通常のブラウジングを通じて到達する唯一のコードです。

次に取り組む価値があるのは5xx系です。これらはあなたのサイトが最悪の状態にあるときに人々が目にするページだからです。何か問題が発生したことを伝え、連絡先のメールアドレスを示す落ち着いたブランド化されたページは、空白のサーバーエラーよりもはるかに優れています。

ページを追加する

1. エラーページを追加をクリックします。
2. ドロップダウンからエラーコードを選択します。すでに使用されているコードは表示されません。
3. HTMLボディフィールドのサンプルHTMLを、あなた自身のものに置き換えます。
4. エラーページを追加をクリックします。

エディターは、編集して仕上げられる動作する404ドキュメントから始まります。手早くきちんとしたものが欲しいだけなら、これは妥当な出発点です。

HTMLを書く

doctypeから始まる、完全なHTMLドキュメントを用意してください。そのまま配信されるため、それ自体で完結している必要があります。

一部のHTMLは、安全のためにページが保存される前に除去されます。

• <script>タグ
• onclickのようなインラインイベントハンドラ
• iframe
• リモートスタイルシート

何かが除去された場合は、保存後に警告が表示されます。

実践的なガイダンス:

• 小さく、自己完結させましょう。 すべてをインライン化してください。外部画像は避けましょう。ページ一覧には各ページのサイズがKB単位で表示されます。
• 何が起きたかを平易な言葉で伝えましょう。 「404 Not Found」よりも「このページは見つかりませんでした」の方が良いでしょう。
• 前進する手段を示しましょう。 ホームへのリンク、主要セクションへのリンク、または検索ボックスなどです。
• 5xxページには連絡手段を含めましょう。 訪問者はサイトを使ってあなたに連絡することができないためです。
• リダイレクトの代わりに使わないでください。 URLが移動した場合は、正しくリダイレクトを設定してください。サイトのリダイレクトを参照してください。

ステータスコードは保持される

あなたのカスタムページは、200ではなく実際のエラーステータスで配信されます。404はクライアントに届くまでずっと404のままです。

これは見た目以上に重要です。ブランド化されたページが200として返されると、それはソフト404になります。検索エンジンはそれを本物のページとしてインデックスし、アナリティクスはそれを成功した閲覧としてカウントし、壊れたリンクはどのツールによってもフラグが立てられなくなります。KapsuleHostは本物のステータスを保持するため、こうした仕組みはすべて正しく機能し続けます。

ステータスバッジの読み方

Status列は実際に検証できた内容を報告するもので、その限界について意図的に正直な表示になっています。

外部から強制できるのは404のみです。存在しないURLをリクエストすれば確実に404が発生しますが、正常に稼働しているサーバーを壊すことなくオンデマンドで本物の500を発生させる方法はありません。そのため、他のコードは実際には行われていない検証を主張するのではなく、設定済みと報告します。それでも、エラーが実際に発生したときには正しく配信されます。

サーバー上の別の設定が同じドメインを主張しているという警告が表示されることもあります。それが解決されるまで、エラーページが適用されない場合があります。これが表示された場合はサポートにお問い合わせください。

実際にエラーが発生しているサイトのトラブルシューティング

見栄えの良いページが欲しいからではなく、サイトがエラーを出しているためにこのページを見ている場合は、近道があります。上部のバナーにあるTroubleshoot with Koraボタンです。

これは、KPanel内のアシスタントであるKoraに、このサイトのエラーログと最近の障害を読み取らせ、考えられる原因と修正方法を教えてもらうものです。生のログを読むよりもはるかに速い最初の一歩です。

背後にあるパフォーマンスの全体像についてはサイトのパフォーマンスとAPMを、時間経過でのエラー率についてはサイトのトラフィック分析をご覧ください。

編集と削除

各行には編集ボタンがあり、これをクリックするとコードが固定され、HTMLが読み込まれた状態で同じエディターが開きます。また、削除ボタンもあります。

削除すると確認が求められ、結果が説明されます。そのコードにヒットしたリクエストは、サーバーのデフォルトページにフォールバックします。

トラブルシューティング

ページが表示されません。 正しいコードをトリガーしているか確認してください。リダイレクトするパスは決して404に到達しません。本当に存在しないURLを使って、キャッシュが関与しないプライベートウィンドウでテストしてください。

ページは表示されるがスタイルが適用されていないように見える。 あなたのスタイルシートがリモートアセットとして除去されました。CSSをインライン化してください。

トラッキングスクリプトが見当たりません。 スクリプトは仕様上除去されます。カスタムエラーページからJavaScriptを実行する方法はありません。

すべてのコードにすでにページが設定されています。 8つすべてが使用中です。新たに追加するのではなく、既存のページを編集してください。

バッジがブランド化されたページが配信されなかったと表示している。 ページを再保存してください。それでも解決せず、ドメイン競合の警告も表示されていない場合は、チケットを開いてください。

関連ページ

• サイトのリダイレクト: そもそも404が発生しないようにするため。
• サイトのトラフィック分析: 実際に配信している4xxおよび5xxのレスポンス数を確認するため。
• サイトのパスワード保護: これは仕様上401レスポンスを生成します。