Bí quyết thiết kế trang 404 và 500 Custom chuẩn UX giữ chân khách hàng
Khi khách hàng vô tình gõ sai đường dẫn hoặc nhấp vào một liên kết đã bị hỏng, việc hiển thị một trang báo lỗi trắng bệch "404 Not Found" khô khốc sẽ khiến 90% người dùng thoát ngay lập tức. Thiết kế một trang 404 và 500 Custom sáng tạo là bí quyết biến một trải nghiệm tệ thành cơ hội giữ chân khách hàng!
1. Lỗi 404 và lỗi 500 khác nhau thế nào?
Trước khi thiết kế, cần hiểu rõ bạn đang xử lý loại lỗi nào, vì cách khắc phục và tác động SEO của hai mã lỗi này hoàn toàn trái ngược nhau:
| Tiêu chí | Lỗi 404 Not Found | Lỗi 500 Internal Server Error |
|---|---|---|
| Nhóm mã lỗi | 4xx, lỗi từ phía người dùng hoặc đường dẫn | 5xx, lỗi từ phía máy chủ |
| Nguyên nhân | Gõ sai URL, bài viết đã bị xóa, link hỏng | Máy chủ crash, hết bộ nhớ, lỗi kết nối cơ sở dữ liệu, mã nguồn ném ngoại lệ |
| Website còn hoạt động? | CÓ, các trang khác vẫn truy cập bình thường | KHÔNG chắc, thường là cả hệ thống đang gặp sự cố |
| Tác động SEO | Nhẹ. Google gỡ URL đó khỏi chỉ mục, các trang khác không ảnh hưởng | Nặng. Nếu lỗi kéo dài, Google giảm tần suất cào và có thể hạ thứ hạng toàn site |
| Mức độ ưu tiên xử lý | Xử lý dần, chuyển hướng 301 các link cũ | Xử lý khẩn cấp ngay lập tức |
Nguyên tắc quan trọng nhất: tuyệt đối không trả về mã 200 cho một trang lỗi. Nhiều website làm trang 404 rất đẹp nhưng máy chủ vẫn trả mã 200, khiến Google tưởng đó là một trang nội dung hợp lệ và giữ nó trong chỉ mục. Hiện tượng này gọi là Soft 404 và làm hao Crawl Budget của bạn.
Với lỗi 500, nếu sự cố chỉ mang tính tạm thời (bảo trì, quá tải), hãy trả về mã 503 Service Unavailable kèm header Retry-After. Googlebot hiểu đây là tình trạng tạm thời và sẽ quay lại sau, thay vì đánh giá trang đã hỏng vĩnh viễn.
2. Xây dựng trang not-found.js trong Next.js App Router
Trong Next.js App Router, chỉ cần tạo file not-found.js trong thư mục src/app/:
import Link from 'next/link';
export default function NotFound() {
return (
<div className="text-center py-20">
<h1 className="text-6xl font-bold text-blue-600">404</h1>
<h2 className="text-2xl font-bold mt-4">Trang bạn tìm kiếm không tồn tại!</h2>
<p className="text-gray-500 mt-2">Đường dẫn có thể đã bị đổi hoặc không còn hoạt động.</p>
<Link href="/" className="inline-block mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg">
Về trang chủ
</Link>
</div>
);
}3. Bắt lỗi 500 bằng error.js trong Next.js App Router
Khác với 404, lỗi 500 phát sinh khi mã nguồn ném ngoại lệ lúc đang render. Next.js App Router dùng file error.js để bắt trường hợp này, và file này bắt buộc phải là Client Component:
'use client';
export default function Error({ error, reset }) {
return (
<div className="text-center py-20">
<h1 className="text-6xl font-bold text-red-600">500</h1>
<h2 className="text-2xl font-bold mt-4">Hệ thống đang gặp sự cố!</h2>
<p className="text-gray-500 mt-2">Chúng tôi đã ghi nhận lỗi và đang xử lý.</p>
<button onClick={() => reset()} className="mt-6 px-6 py-3 bg-red-600 text-white rounded-lg">
Thử lại
</button>
</div>
);
}Ba lưu ý khi xử lý trang 500:
- Không bao giờ hiển thị stack trace cho người dùng: Thông báo lỗi kỹ thuật lộ ra ngoài là một lỗ hổng bảo mật, giúp kẻ tấn công đoán được cấu trúc hệ thống của bạn.
- Luôn có nút Thử lại (reset): Nhiều lỗi 500 chỉ mang tính tạm thời, một lần bấm lại là thành công.
- Bắn cảnh báo về hệ thống giám sát: Trang 500 phải đi kèm việc ghi log lỗi, nếu không bạn sẽ không biết website đang hỏng cho tới khi khách hàng gọi điện phàn nàn.
4. 4 Yếu tố tạo nên trang báo lỗi 404 chuẩn UX cao cấp
- Thông điệp thân thiện & Hài hước: Giúp giải tỏa sự thất vọng của khách hàng.
- Tích hợp Ô tìm kiếm (Search Bar): Giúp người dùng gõ tìm ngay sản phẩm/bài viết khác.
- Gợi ý danh sách Bài viết / Sản phẩm nổi bật: Điều hướng người dùng tiếp tục xem các nội dung hấp dẫn.
- Gửi cảnh báo lỗi 404 về Google Search Console: Đảm bảo mã phản hồi HTTP Status Code trả về đúng 404 để Google Bot gỡ link hỏng khỏi chỉ mục.
Kết luận
Chăm chút cho từng chi tiết nhỏ nhất thể hiện sự chuyên nghiệp của thương hiệu. Uwmee Software thiết kế bộ trang báo lỗi Custom đồng bộ nhận diện thương hiệu cho doanh nghiệp. Đọc thêm bài viết Sentry Error Tracking.