はじめに
ウェブサイトを訪問したユーザーがページが見つからないなどのエラーを遭遇すると、サイトの信頼性やユーザーエクスペリエンスに大きな影響を与える可能性があります。Nginxでは、デフォルトのエラーページではなく、カスタムデザインのエラーページを設定することで、ユーザー体験を向上させることができます。
症状・背景
このテーマが必要になる主な場面:
- ユーザーが404エラーを遭遇した際に適切な説明やサイトマップへのリンクを提供したい場合
- 503エラーページにメンテナンス中のメッセージを表示するため
- カスタマイズされたエラーページを通じてユーザーとブランドの親和性を強化したい場合
- 独自のデザインやロゴを使用した一貫性のあるUI/UXを提供したい場合
手順・設定方法
ステップ1: カスタムエラーファイルを作成する
# ドキュメントルートにカスタムエラーページのファイルを作成します。例えば404エラーの場合:
echo "<html><head><title>ページが見つかりません</title></head><body><h1>ページが見つかりません (404)</h1><p>申し訳ありません、求めるページは存在しません。</p><a href=\"/\">トップページへ戻る</a></body></html>" > /var/www/html/404.html
# 同様に503エラー用のファイルも作成します:
echo "<html><head><title>サーバーメンテナンス中</title></head><body><h1>メンテナンス中 (503)</h1><p>現在、ウェブサイトを更新しています。お手数ですが後で再度アクセスしてください。</p><a href=\"/\">トップページへ戻る</a></body></html>" > /var/www/html/503.htmlステップ2: Nginxのエラーページ設定
# エラーが発生した際にカスタムエラーファイルを使用するようにNginxの設定を変更します。以下は例です:
server {
listen 80;
server_name example.com;
error_page 404 /404.html;
location = /404.html {
root /var/www/html;
}
error_page 503 /maintenance.html;
location = /maintenance.html {
internal;
root /var/www/html;
}
}ステップ3: 設定の反映とテスト
# Nginx設定ファイルを読み込みます:
sudo nginx -t
# 修正が問題ないことを確認したら、Nginxサーバーをリロードします:
sudo systemctl reload nginx
# ブラウザで「example.com/404.html」や「example.com/maintenance.html」にアクセスして、設定内容を確認します。ステップ4: カスタムエラー設定のトラブルシューティング
# Nginxのエラーログをチェックし、カスタムエラーページが正しく機能していることを確認します:
tail -f /var/log/nginx/error.log注意事項
- カスタムエラーページはユーザーエクスペリエンスを向上させる一方で、適切な情報提供も必要です。過度に華美なデザインや長文の説明は避けましょう。
- メンテナンス中に503ステータスコードを使う際は、「maintenance.html」ファイルが存在する場合のみサーバーメンテナンス中ページを表示させるように設定します。
- カスタムエラーページの作成と配布には、著作権や商標使用に関する法的な問題に注意が必要です。
- 過度なリダイレクトはSEO上不利な影響を与える可能性があるため、適切なURL構造を維持し、ユーザーがサイト内で迷子にならないよう配慮してください。
まとめ
1. ユーザーエクスペリエンスの向上: カスタムエラーページを使用して訪問者の体験を改善します。
2. ブランドの一貫性: デザインやロゴを通じて、ユーザーとブランドとのつながりを強化します。
3. メンテナンス時の対応: 503エラー用のページでサイトの更新中であることを適切に伝えます。
4. SEO最適化: 適切なURL構造とリダイレクト設定は、検索エンジンからの評価を向上させます。
5. セキュリティと信頼性: カスタムエラーページを通じてユーザーがサイトの信頼性を保つ助けになります。
関連記事: