Hướng dẫn tuỳ chỉnh Error Pages trên cPanel - Trang lỗi 403, 404, 500 đẹp hơn

❤️ AZDIGI chính thức cập nhật hệ thống blog mới hoàn chỉnh. Tuy nhiên có thể một số bài viết bị sai lệch hình ảnh, hãy ấn nút Báo cáo bài viết ở cuối bài để AZDIGI cập nhật trong thời gian nhanh nhất. Chân thành cám ơn.

Khi visitor gặp lỗi 404 (trang không tồn tại), 403 (cấm truy cập), hay 500 (lỗi server), mặc định họ sẽ thấy trang lỗi xấu xí của Apache. Bài này hướng dẫn tuỳ chỉnh Error Pages trên cPanel để hiển thị trang lỗi đẹp, chuyên nghiệp hơn.

I. Error Pages là gì?

Error Pages trên cPanel cho phép bạn tuỳ chỉnh nội dung HTML hiển thị khi server trả về mã lỗi HTTP. Các mã lỗi phổ biến:

400 Bad Request: Request không hợp lệ
401 Unauthorized: Yêu cầu xác thực
403 Forbidden: Cấm truy cập (không có quyền)
404 Not Found: Trang không tồn tại — phổ biến nhất
500 Internal Server Error: Lỗi server

II. Truy cập Error Pages trên cPanel

Đăng nhập cPanel → tìm Error Pages trong phần Advanced.

Giao diện Error Pages trên cPanel hiển thị danh sách mã lỗi — *Danh sách các mã lỗi HTTP có thể tuỳ chỉnh.*

Bạn sẽ thấy danh sách tất cả mã lỗi. Chọn domain cần tuỳ chỉnh (nếu có nhiều domain), sau đó click vào mã lỗi muốn sửa.

III. Tuỳ chỉnh trang 404

Click vào 404 (Not Found) để mở editor:

Editor tuỳ chỉnh trang lỗi 404 trên cPanel — *Editor HTML cho trang lỗi 404.*

Bạn có thể viết HTML tuỳ ý. Ví dụ trang 404 đẹp:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 - Không tìm thấy trang</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
    }
    .container { padding: 40px; max-width: 500px; }
    h1 { font-size: 120px; font-weight: 900; line-height: 1; margin-bottom: 10px; }
    h2 { font-size: 24px; margin-bottom: 20px; font-weight: 400; }
    p { font-size: 16px; opacity: 0.8; margin-bottom: 30px; }
    a {
      display: inline-block;
      padding: 12px 30px;
      background: white;
      color: #667eea;
      text-decoration: none;
      border-radius: 30px;
      font-weight: 600;
      transition: transform 0.2s;
    }
    a:hover { transform: scale(1.05); }
  </style>
</head>
<body>
  <div class="container">
    <h1>404</h1>
    <h2>Oops! Trang không tồn tại</h2>
    <p>Trang bạn tìm kiếm có thể đã bị xoá, đổi tên, hoặc tạm thời không khả dụng.</p>
    <a href="/">← Quay về trang chủ</a>
  </div>
</body>
</html>

Paste code HTML vào editor và click Save.

Sau khi save, hãy truy cập một URL không tồn tại trên website (ví dụ: domain.com/trang-khong-co) để kiểm tra. Kết quả sẽ như hình bên dưới:

Trang lỗi 404 custom với giao diện gradient tím-xanh — *Trang 404 custom hiển thị khi truy cập URL không tồn tại — gradient tím-xanh rất đẹp mắt.*

IV. Tuỳ chỉnh trang 403 và 500

Trang 403 (Forbidden)

Hiển thị khi visitor cố truy cập thư mục/file bị cấm. Ví dụ:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>403 - Cấm truy cập</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 80px 20px;
           background: #f5f5f5; color: #333; }
    h1 { font-size: 80px; color: #e74c3c; }
    p { font-size: 18px; color: #666; }
    a { color: #3498db; }
  </style>
</head>
<body>
  <h1>🚫 403</h1>
  <h2>Bạn không có quyền truy cập trang này</h2>
  <p>Nếu bạn nghĩ đây là lỗi, hãy <a href="/lien-he">liên hệ quản trị viên</a>.</p>
</body>
</html>

Kết quả khi truy cập thư mục bị cấm (ví dụ: thư mục có .htaccess chứa deny from all):

Trang lỗi 403 custom với nền trắng và chữ đỏ — *Trang 403 custom — thiết kế đơn giản, rõ ràng.*

Trang 500 (Internal Server Error)

Hiển thị khi server gặp lỗi. Nên giữ đơn giản vì khi 500 xảy ra, PHP/database có thể không hoạt động:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>500 - Lỗi Server</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 80px 20px;
           background: #1a1a2e; color: #eee; }
    h1 { font-size: 80px; color: #e94560; }
    p { color: #aaa; }
  </style>
</head>
<body>
  <h1>⚠️ 500</h1>
  <h2>Có lỗi xảy ra phía server</h2>
  <p>Chúng tôi đã ghi nhận lỗi. Vui lòng thử lại sau vài phút.</p>
  <p><a href="/" style="color: #0fbcf9;">Quay về trang chủ</a></p>
</body>
</html>

V. Biến tag trong Error Pages

cPanel cung cấp một số biến tag có thể dùng trong error page:

— Mã lỗi (404, 403…)
— URL gây lỗi
— Tên domain
— Hostname
— IP visitor

Ví dụ sử dụng trong trang 404:

<p>Trang <code><!--#echo var="REDIRECT_URL" --></code> không tồn tại trên <!--#echo var="SERVER_NAME" -->.</p>

VI. Lưu ý cho WordPress

Nếu website dùng WordPress, WordPress đã tự xử lý trang 404 thông qua theme (404.php). Error Pages của cPanel chỉ hiển thị khi:

Request đến file tĩnh không tồn tại (ảnh, CSS, JS…)
Request không đi qua WordPress (.htaccess không redirect)
Lỗi 403, 500 xảy ra trước khi WordPress load

Nếu muốn tuỳ chỉnh 404 cho WordPress, nên sửa file 404.php trong theme thay vì Error Pages cPanel.

VII. Tổng kết

Tuỳ chỉnh Error Pages giúp website chuyên nghiệp hơn khi visitor gặp lỗi. Thay vì trang trắng hoặc text mặc định của Apache, bạn có thể hiển thị trang đẹp với link quay về trang chủ, form tìm kiếm, hoặc thông tin liên hệ. Mất 5 phút setup nhưng tăng đáng kể trải nghiệm người dùng.

Hướng dẫn tuỳ chỉnh Error Pages trên cPanel – Trang lỗi 403, 404, 500 đẹp hơn