Triển khai SEO thực sự hiệu quả trong Next.js 16

Metadata là phần dễ. Canonical URL, cặp hreflang, dữ liệu có cấu trúc và streaming metadata mới là nơi phần lớn website App Router âm thầm mất thứ hạng.

Hieu Nguyen

Founder & lead engineer

Đăng ngày 7 tháng 8, 2026 · Đọc 9 phút

Triển khai SEO thực sự hiệu quả trong Next.js 16

Phần lớn website Next.js chỉ dừng ở việc export một object metadata có title và description, rồi thắc mắc vì sao mãi không lên thứ hạng. Metadata chỉ là điều kiện tối thiểu. Phần thật sự tạo ra thứ hạng nằm ở bốn chỗ.

Mỗi trang chỉ một URL canonical

Mỗi trang phải khai báo đúng một URL canonical, và nó phải khớp với URL bạn thật sự muốn được index — bao gồm cả tiền tố ngôn ngữ. Nếu cả /en/products và /products đều render được, bạn đã tự chia đôi sức mạnh của chính mình.

Hãy đặt metadataBase một lần trong root layout, rồi khai báo alternates.canonical tường minh cho mọi route. Đường dẫn tương đối sẽ được phân giải dựa trên metadataBase, nên bạn chỉ viết đường dẫn một lần và không bao giờ phải tự nối tên miền bằng tay nữa.

hreflang phải có tính hai chiều

Công cụ tìm kiếm chỉ tin một cụm hreflang khi mọi URL trong cụm đều trỏ tới tất cả các URL còn lại, kể cả chính nó. Một liên kết một chiều từ trang tiếng Anh sang trang tiếng Việt sẽ bị bỏ qua. Hãy sinh toàn bộ map alternates.languages từ một danh sách ngôn ngữ duy nhất để hai trang không thể khai báo lệch nhau.

Đừng quên thêm x-default cho URL bạn muốn phục vụ những người dùng có ngôn ngữ mà bạn chưa hỗ trợ.

Dữ liệu có cấu trúc giúp bạn trở thành một thực thể

Bản thân JSON-LD không phải là yếu tố xếp hạng — nó là cách bạn nói cho bot biết một trang là cái gì. Trang sản phẩm nên phát ra Product kèm một Offer, một BreadcrumbList khớp với breadcrumb hiển thị trên trang, và chỉ thêm AggregateRating khi thật sự có đánh giá. Bịa ra điểm đánh giá là cách nhanh nhất để mất hoàn toàn kết quả nổi bật.

Hãy render nó bằng thẻ <script type="application/ld+json"> thuần. Đây là dữ liệu, không phải code thực thi, nên next/script là công cụ sai.

Streaming metadata và bot

Next.js stream metadata cho các trang render động để nội dung hiển thị trước, và tự tắt streaming với những bot đã biết vốn cần thẻ nằm trong <head>. Đây là mặc định đúng. Nó chỉ gây rắc rối nếu generateMetadata của bạn phải chờ một tác vụ chậm — bot sẽ phải chờ theo. Hãy memoize các lệnh lấy dữ liệu dùng chung bằng cache của React để trang và metadata của nó chỉ tốn một truy vấn thay vì hai.