Next.js App Router có nhiều công cụ hỗ trợ SEO sẵn có, nhưng cần cấu hình đúng cách mới phát huy hiệu quả. Bài viết tổng hợp các kỹ thuật tối ưu quan trọng nhất.
1. Dùng generateMetadata để tạo metadata động
Mỗi route trong App Router có thể export hàm generateMetadata để tạo title, description, Open Graph riêng biệt cho từng trang dựa trên dữ liệu thực tế (ví dụ tiêu đề bài viết), thay vì dùng chung một metadata tĩnh cho toàn site.
2. Tạo sitemap.xml và robots.txt động
Next.js hỗ trợ tạo file sitemap.ts và robots.ts để sinh sitemap/robots động dựa trên dữ liệu database, giúp công cụ tìm kiếm thu thập đầy đủ và đúng các trang quan trọng.
3. Thêm structured data (JSON-LD)
Nhúng structured data dạng JSON-LD (ví dụ schema Article, FAQPage, BreadcrumbList) vào từng trang giúp công cụ tìm kiếm hiểu rõ ngữ cảnh nội dung, tăng khả năng hiển thị rich snippet trên kết quả tìm kiếm.
4. Ưu tiên Server Component để tối ưu tốc độ
Giảm thiểu JavaScript client không cần thiết bằng cách dùng Server Component cho phần nội dung tĩnh, chỉ dùng Client Component khi thực sự cần tương tác — giúp cải thiện chỉ số Core Web Vitals (LCP, FID/INP).
5. Tối ưu hình ảnh với next/image
Dùng component Image của Next.js để tự động tối ưu định dạng, kích thước ảnh theo thiết bị, kèm lazy loading mặc định, giúp giảm dung lượng tải trang và cải thiện điểm SEO kỹ thuật.
6. Xử lý URL chuẩn (canonical) và tránh nội dung trùng lặp
Khai báo thẻ canonical rõ ràng cho từng trang, đặc biệt với các trang có nhiều tham số URL (lọc, phân trang) để tránh bị công cụ tìm kiếm đánh giá là nội dung trùng lặp.
Xem thêm: Xây Dựng Ứng Dụng Fullstack Hiện Đại Với Next.js 16 & Drizzle ORM