×

Cách tùy chỉnh trang lỗi 404 và 500 với ErrorDocument trong .htaccess

Avatar of admin
admin 1 Views

Khi người dùng truy cập vào một trang không tồn tại hoặc gặp lỗi máy chủ, họ sẽ nhìn thấy các trang lỗi như 404 hoặc 500. Việc tùy chỉnh các trang lỗi này không chỉ cải thiện trải nghiệm người dùng mà còn giúp bạn duy trì thương hiệu của mình trên website. Dưới đây là hướng dẫn chi tiết về cách sử dụng ErrorDocument trong tệp .htaccess để thiết lập các trang lỗi 404 và 500.

1. Hiểu về các mã lỗi HTTP

  • 404 Not Found: Mã lỗi này xuất hiện khi người dùng cố gắng truy cập một trang không tồn tại trên website của bạn.
  • 500 Internal Server Error: Đây là mã lỗi máy chủ, cho biết có vấn đề trong việc xử lý yêu cầu mà máy chủ không thể xử lý.

2. Tại sao cần tùy chỉnh trang lỗi?

  • Cải thiện trải nghiệm người dùng: Một trang lỗi đẹp mắt có thể giúp người dùng dễ dàng tìm thấy thông tin cần thiết hoặc điều hướng trở lại trang chủ.
  • Tăng cường khả năng nhận diện thương hiệu: Tùy chỉnh trang lỗi giúp người dùng nhớ đến thương hiệu của bạn ngay cả khi họ gặp sự cố.
  • Giảm tỷ lệ thoát: Nếu người dùng nhìn thấy một trang lỗi thông thường, họ có thể rời khỏi website ngay lập tức. Trang lỗi tùy chỉnh có thể giữ chân người dùng lâu hơn.

3. Cách sử dụng ErrorDocument trong .htaccess

Tệp .htaccess nằm trong thư mục gốc của website chạy trên máy chủ Apache. Để tùy chỉnh trang lỗi, bạn cần thêm các dòng mã vào tệp này.

Bước 1: Truy cập tệp .htaccess

  1. Sử dụng FTP hoặc trình quản lý tệp trong cPanel để truy cập vào thư mục gốc của website.
  2. Tìm tệp .htaccess. Nếu tệp chưa tồn tại, bạn có thể tạo một tệp mới với tên .htaccess.

Bước 2: Thêm mã tùy chỉnh

Mở tệp .htaccess và thêm các dòng mã sau:

ErrorDocument 404 /404.html
ErrorDocument 500 /500.html

Trong đó:

  • /404.html là đường dẫn đến trang lỗi 404 tùy chỉnh của bạn.
  • /500.html là đường dẫn đến trang lỗi 500 tùy chỉnh của bạn.

4. Tạo trang lỗi

Trang lỗi 404

Bạn có thể tạo một trang lỗi 404 với nội dung gợi ý cho người dùng cách điều hướng về lại trang chính hoặc tìm kiếm thông tin. Dưới đây là một mẫu cấu trúc HTML cơ bản cho trang lỗi 404:

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>404 - Không tìm thấy trang</h1>
    <p>Rất tiếc, trang bạn đang tìm kiếm không tồn tại.</p>
    <a href="/">Quay lại trang chủ</a>
    <a href="/tim-kiem">Tìm kiếm</a>
</body>
</html>

Trang lỗi 500

Trang lỗi 500 cũng nên được thiết lập để thông báo cho người dùng rằng có sự cố xảy ra nhưng cần mạnh mẽ hơn để thông báo rằng vấn đề đang được xử lý. Có thể tham khảo một mẫu tương tự dưới đây:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>500 - Lỗi máy chủ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>500 - Lỗi máy chủ</h1>
    <p>Có lỗi xảy ra trong quá trình xử lý yêu cầu của bạn. Chúng tôi đang cố gắng khắc phục.</p>
    <a href="/">Quay lại trang chủ</a>
</body>
</html>

5. Kiểm tra trang lỗi

Sau khi đã thêm mã và tạo trang lỗi, bạn nên kiểm tra xem mọi thứ đã hoạt động chưa. Bạn có thể thử truy cập địa chỉ không tồn tại trên website để kiểm tra trang lỗi 404 hoặc tương tác với chức năng của máy chủ để tạo ra lỗi 500.

6. Ghi chú thêm

  • Đường dẫn tuyệt đối và tương đối: Khi chỉ định đường dẫn cho trang lỗi, bạn có thể sử dụng đường dẫn tuyệt đối hoặc tương đối, nhưng đường dẫn tương đối thường đơn giản hơn.
  • Tránh lặp lại mã lỗi: Nếu bạn đã thêm mã lỗi một lần, không cần thêm lại chúng ở nơi khác trong tệp .htaccess.
  • Thống kê lỗi: Theo dõi các lỗi 404 với công cụ phân tích (như Google Analytics) để hiểu rõ hơn về các trang mà người dùng thường tìm kiếm nhưng không tìm thấy.

Kết luận

Việc tùy chỉnh các trang lỗi 404 và 500 không chỉ giúp trang web của bạn trông chuyên nghiệp hơn mà còn nâng cao trải nghiệm người dùng. Hãy chắc chắn rằng bạn đã tạo các trang wifi đẹp mắt và cung cấp các tùy chọn hữu ích để người dùng có thể tìm thấy thông tin họ cần. Bằng cách sử dụng ErrorDocument trong tệp .htaccess, bạn có thể dễ dàng thiết lập các trang lỗi này và mang lại sự hài lòng cho người dùng của mình nhiều hơn.

Comments

Bài viết liên quan