Next JS metadata: đặt title, description và generateMetadata

Trong App Router, bạn đặt metadata cho Next.js bằng cách export một object tên metadata từ file layout.js hoặc page.js nếu giá trị cố định, hoặc export hàm generateMetadata nếu giá trị phụ thuộc vào tham số route hay dữ liệu lấy từ database. Next.js tự ghi title, description và các thẻ khác vào phần head. Với trang được prerender, các thẻ này nằm ngay trong HTML đầu tiên mà bot của Google nhận được.

Hãy bắt đầu bằng cách dùng object tĩnh. Import kiểu Metadata từ 'next', export hằng metadata rồi điền các trường như title, description, openGraph, robots và alternates. Đặt giá trị mặc định cho cả site ở layout gốc, trang nào khác thì chỉ ghi đè phần khác. Trường khai báo ở tầng sâu hơn trong cây route sẽ thắng tầng trên, nên một bài viết có thể thay description mà vẫn thừa hưởng phần còn lại.

Trường title cần chú ý nhất vì nó nhận cả chuỗi lẫn object. Ở layout gốc, hãy đặt title thành object có default và template, ví dụ template là '%s | Tên Blog' và default là 'Tên Blog'. Trang con khai báo title: 'Giới thiệu' sẽ hiển thị thành 'Giới thiệu | Tên Blog'. Có hai chỗ dễ sai. Thứ nhất, template chỉ áp dụng cho các segment con, không áp dụng cho chính segment khai báo nó, nên layout đó dùng giá trị default. Thứ hai, nếu một trang cần title không có đuôi thương hiệu, dùng title: { absolute: '...' } để bỏ qua template của cấp cha. Cách này khớp với khuyến nghị của Google là đặt tên site ở đầu hoặc cuối title, ngăn cách bằng gạch ngang, dấu hai chấm hoặc dấu gạch đứng, thay vì lặp một khẩu hiệu dài trên mọi trang.

Khi nội dung đến từ database hay CMS, hãy chuyển sang generateMetadata. Đây là hàm async nhận tham số route và trả về object Metadata, nên trang bài viết có thể tự lấy bản ghi của mình rồi trả về title, description tương ứng. Bạn không phải lo gọi trùng một request hai lần: các request fetch trong generateMetadata được tự động memoize qua generateMetadata, layout, page và server component. Nếu truy cập dữ liệu không dùng fetch, bạn bọc lệnh gọi bằng hàm cache của React. Vì generateMetadata là một phần của quá trình render trang, hãy giữ nó nhanh và chỉ lấy đúng những trường cần thiết.

Hãy đặt metadataBase một lần ở layout gốc, dưới dạng new URL từ biến môi trường chứa domain production. Những trường bắt buộc URL tuyệt đối như ảnh Open Graph hay thẻ canonical khi đó có thể viết bằng đường dẫn tương đối, Next.js sẽ ghép thành địa chỉ đầy đủ. Thiếu nó, giá trị tương đối không có gốc để quy chiếu. Canonical cho mỗi bài chỉ cần một dòng, alternates: { canonical: '/blog/slug-cua-ban' }, đặt trong generateMetadata của chính trang đó để mỗi trang trỏ về đúng nó.

Với trang động còn một hành vi dễ bị bỏ sót. Next.js có thể stream metadata sau khi đã gửi HTML ban đầu để trang hiện nhanh hơn. Tài liệu giải thích rằng framework nhận diện các crawler cần metadata trong head bằng cách kiểm tra header User-Agent, và với chúng thì metadata được trả về dạng chặn. Bạn chỉnh danh sách user agent này bằng tùy chọn htmlLimitedBots trong next.config, hoặc tắt hẳn streaming nếu muốn sự chắc chắn đơn giản nhất. Với trang prerender thì không cần bận tâm, vì các thẻ đã nằm sẵn trong HTML.

Viết giá trị tốt quan trọng không kém việc đặt đúng chỗ. Google cho biết title link được tạo tự động từ nhiều tín hiệu, gồm cả thẻ h1 và nội dung trên trang, và có thể thay title của bạn khi nó trông thiếu nửa vế, lỗi thời hoặc không chính xác. Google không nêu giới hạn độ dài title, nhưng title dài sẽ bị cắt theo bề rộng thiết bị, nên hãy đưa ý chính lên đầu. Với description, Google dựng snippet chủ yếu từ nội dung trang và chỉ đôi khi dùng meta description, khi nó mô tả trang tốt hơn. Mỗi trang nên có description riêng, tóm đúng nội dung thật và tránh nhồi danh sách từ khóa. Sinh description bằng code vẫn ổn với site lớn, miễn là câu chữ đọc tự nhiên.

Một danh sách kiểm tra ngắn giúp bạn không sót. Khai báo title template và default ở layout gốc. Đặt metadataBase từ domain production. Cho mỗi trang động một generateMetadata trả về title, description và canonical riêng. Chỉ dùng title.absolute khi có lý do. Chuyển màu sắc và viewport ra khỏi metadata, vì trường themeColor đã bị deprecated để nhường chỗ cho generateViewport. Cuối cùng, hãy xem page source thay vì tiêu đề tab trình duyệt để chắc các thẻ có trong HTML mà Google sẽ tải, rồi yêu cầu thu thập lại trong Search Console nếu bạn đổi title ở những trang đã có thứ hạng.