Checklist SEO cho Next.js App Router

App Router cung cấp cho các dự án Next.js một phương pháp rõ ràng để gộp chung trang giao diện (pages), metadata, trạng thái tải (loading states) và dữ liệu server. Cấu trúc này cực kỳ hữu ích cho SEO vì việc tối ưu hóa tìm kiếm giờ đây trở thành một phần trực tiếp của route thay vì là một công việc bổ sung sau khi code xong.

Checklist này tập trung vào các công việc SEO thực tế cho các trang giới thiệu sản phẩm, trang portfolio cá nhân và blog kỹ thuật.

Định nghĩa Metadata của trang trước tiên

Mỗi route có thể lập chỉ mục (indexable) cần có tiêu đề (title) và mô tả (description) rõ ràng. Tiêu đề nên mô tả đúng mục đích của trang, và mô tả cần giải thích vì sao người dùng nên click mở kết quả đó trên công cụ tìm kiếm.

export const metadata = {
  title: "Bài viết",
  description:
    "Các bài viết kỹ thuật chia sẻ về NestJS, Next.js, kiến trúc hệ thống và tối ưu hiệu năng web.",
  alternates: {
    canonical: "https://hoangtuan.me/blog",
  },
};

Đối với các route động (dynamic routes), hãy tạo metadata từ chính nguồn dữ liệu hiển thị của trang. Điều này tránh việc nội dung hiển thị của bài viết nói một đằng nhưng snippet trên kết quả tìm kiếm lại hiển thị một nẻo.

Sử dụng Canonical URL một cách nhất quán

Canonical URL khai báo với công cụ tìm kiếm đâu là URL gốc đại diện cho nội dung đó. Điều này đặc biệt quan trọng khi cùng một nội dung có thể hiển thị dưới nhiều dạng URL khác nhau do bộ lọc (filters), tham số theo dõi (tracking parameters) hoặc các route thay thế.

Đối với các bài viết blog, hãy sử dụng cấu trúc canonical ổn định:

alternates: {
  canonical: `https://hoangtuan.me/blog/${slug}`,
}

Hãy giữ canonical host khớp với tên miền chạy chính thức trên production. Việc trộn lẫn các phiên bản có www và không có www sẽ làm giảm sức mạnh tín hiệu xếp hạng của trang.

Tạo ảnh OpenGraph để tăng khả năng chia sẻ

OpenGraph không trực tiếp tăng thứ hạng tìm kiếm, nhưng nó cải thiện đáng kể cách bài viết hiển thị khi được chia sẻ trên các nền tảng mạng xã hội như LinkedIn, Slack, Facebook và các ứng dụng nhắn tin. Một ảnh preview đẹp mắt thường thúc đẩy tỷ lệ click (CTR) cao hơn.

Trong các dự án App Router, file opengraph-image.tsx ở cấp route có thể tạo tự động một hình ảnh động dựa trên metadata của bài viết. Tối thiểu, ảnh nên chứa tiêu đề bài viết, tên tác giả và tên trang web. Đối với blog portfolio, một hình ảnh mang nhận diện thương hiệu đơn giản là đủ.

Thêm cấu trúc dữ liệu (structured data) ở nơi cần thiết

Dữ liệu cấu trúc giúp các bot tìm kiếm hiểu rõ ngữ cảnh của trang. Đối với các bài viết kỹ thuật, schema BlogPosting là lựa chọn phù hợp nhất.

Các trường thông tin hữu ích bao gồm:

• headline (tiêu đề chính)
• description (mô tả)
• datePublished (ngày xuất bản)
• dateModified (ngày chỉnh sửa)
• author (tác giả)
• publisher (đơn vị xuất bản)
• image (hình ảnh)
• mainEntityOfPage (thực thể chính của trang)

Đừng tự ý thêm vào các trường thông tin không có thực hoặc không hiển thị trên trang. Schema phải phản ánh đúng những gì người dùng nhìn thấy trên trang web.

Đảm bảo Sitemap và RSS đồng bộ

Sitemap và RSS feed nên được đọc từ cùng một nguồn dữ liệu với các route blog. Nếu một bài viết tồn tại tại /blog/my-post, nó cũng phải xuất hiện trong sitemap.xml và feed.xml.

Đây là lý do tại sao việc lưu trữ nội dung MDX cục bộ (local MDX) hoạt động rất tốt đối với các trang portfolio nhỏ. Cùng một file MDX có thể cung cấp nội dung cho trang chi tiết, metadata, sitemap, RSS feed và cả các card bài viết mới nhất trên trang chủ.

Coi tối ưu hiệu năng là công việc làm SEO

Hiệu năng ảnh hưởng trực tiếp đến hiệu suất thu thập thông tin (crawl efficiency) của bot và hành vi của người dùng. Đối với các trang nội dung, hãy tập trung vào các yếu tố cơ bản:

• Sử dụng Static Generation (SSG) khi nội dung đã được xác định từ lúc build.
• Sử dụng hình ảnh được tối ưu hóa kèm theo kích thước chiều rộng/cao cố định để tránh layout shift.
• Tránh việc fetch dữ liệu ở phía client không cần thiết cho nội dung bài viết.
• Hạn chế sử dụng JavaScript trong phần thân bài viết trừ khi tương tác đó thực sự có giá trị.
• Đảm bảo các thẻ tiêu đề (headings) và thẻ liên kết (links) được render trực tiếp trong mã HTML ban đầu từ server.

SEO frontend cũng phụ thuộc rất nhiều vào độ tin cậy của hệ thống backend. Nếu các trang của bạn sử dụng dữ liệu từ API, hãy bắt đầu bằng việc thiết kế ranh giới module rõ ràng như đã mô tả trong bài viết Kiến trúc Modular trong NestJS: Xây dựng API Production Quy Mô Lớn. Khi ứng dụng đã sẵn sàng triển khai, hãy kết nối kết quả tối ưu SEO với một quy trình deploy ổn định tại Docker hóa ứng dụng NestJS cho Production.