SEO Next.js: dựng trang, metadata, sitemap và một blog lên top

Bài trắc nghiệm nhanh

SEO có phù hợp với bạn không, và nên bắt đầu như thế nào?

Câu hỏi 1 trên 425%

Mọi người có tìm kiếm trên Google những gì bạn bán không?

Có, tôi nghĩ vậyKhông, đó là thứ mới hoặc rất ngáchTôi không biết

SEO Next.js chủ yếu là việc chọn đúng cho từng route: phần nào được dựng trên máy chủ, phần nào được lưu bộ nhớ đệm và phần nào đi vào HTML trước khi có bất kỳ script nào chạy. Google giải thích trong kiến thức cơ bản về SEO JavaScript rằng nó xử lý ứng dụng JavaScript qua ba giai đoạn (thu thập, dựng, lập chỉ mục) và rằng "dựng phía máy chủ hoặc dựng trước vẫn là một ý tưởng rất tốt". Next.js làm điều đó theo mặc định. Hướng dẫn này bao quát App Router (Next.js 13 trở lên), kèm ghi chú cho Pages Router cũ hơn.

Next.js có tốt cho SEO không?

Có. Một ứng dụng React thuần dùng dựng phía client gửi một tệp HTML gần như rỗng và tạo trang trong trình duyệt; công cụ tìm kiếm phải tự dựng nó, và nhiều bot không bao giờ làm việc đó. Next.js dựng React trên máy chủ, nên phản hồi HTML đã chứa sẵn tiêu đề, văn bản, liên kết và metadata. Hướng dẫn về SEO JavaScript của chúng tôi giải thích vì sao khác biệt này quan trọng cho việc lập chỉ mục.

Trong App Router, các thành phần là Server Component theo mặc định. Ngay cả các thành phần được đánh dấu 'use client' cũng được dựng sẵn thành HTML trên máy chủ. Điểm yếu nằm ở dữ liệu: bất cứ thứ gì được tải trong useEffect, hoặc chỉ tải sau một cú nhấp, sẽ không có trong HTML ban đầu. Hãy tải nội dung trong Server Component, và chỉ giữ client component cho phần tương tác.

SSG, SSR, ISR hay CSR: nên chọn chế độ dựng nào?

Next.js cho phép trộn các chế độ theo từng route. Lựa chọn ảnh hưởng đến độ tươi mới của nội dung, tốc độ và những gì crawler nhận được.

Tài liệu ISR của Next.js liệt kê lợi ích: cập nhật nội dung tĩnh "mà không phải build lại toàn bộ site" và xử lý số lượng lớn trang mà không phải chờ build lâu. Một route có export const revalidate = 3600 sẽ được tạo lại tối đa mỗi giờ một lần; để kiểm soát chính xác hơn, gọi revalidatePath hoặc revalidateTag khi nội dung thay đổi. Lưu ý ISR không hoạt động với xuất tĩnh (output: 'export'). Với các ứng dụng buộc phải giữ dựng phía client, hướng dẫn về SEO cho ứng dụng một trang của chúng tôi trình bày các cách xử lý.

Làm thế nào để đặt tiêu đề, mô tả và canonical bằng Metadata API?

Metadata API thay thế next/head trong App Router. Theo tài liệu metadata của Next.js, bạn xuất một đối tượng metadata tĩnh từ layout hoặc trang, hoặc một hàm generateMetadata khi giá trị phụ thuộc vào dữ liệu, và Next.js tự tạo các thẻ head. Cả hai chỉ được hỗ trợ trong Server Component.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Năm quy tắc giúp ngăn phần lớn vấn đề:

• Đặt metadataBase trong root layout (tên miền thật của bạn), để canonical tương đối và URL Open Graph thành tuyệt đối.
• Dùng mẫu tiêu đề trong root layout, như '%s | Thương hiệu', để mỗi trang có tiêu đề riêng và thương hiệu chỉ xuất hiện một lần.
• Gắn canonical tự trỏ về chính trang cho mọi trang có thể lập chỉ mục, thông qua alternates.canonical; cách này bảo vệ khỏi nội dung trùng lặp do tham số truy vấn và dấu gạch chéo cuối tạo ra. Mục từ điển của chúng tôi về thẻ canonical trình bày các quy tắc.
• Viết mô tả riêng cho từng trang, lấy từ nội dung trong generateMetadata, không bao giờ dùng một mô tả mặc định chung cho cả site.
• Thêm ảnh Open Graph bằng một tệp opengraph-image trong thư mục route, và kiểm tra kết quả bằng công cụ xem trước Open Graph.

Với các trang động, Next.js truyền metadata theo luồng sau những byte đầu tiên để tăng tốc độ dựng. Tài liệu nêu rằng việc truyền theo luồng bị tắt đối với các bot mong đợi metadata trong head, được nhận diện qua user agent (Bingbot, Twitterbot và Slackbot là một vài ví dụ), và tùy chọn htmlLimitedBots cho phép tùy chỉnh danh sách này. Nếu bạn quan tâm đến một crawler chưa nằm trong danh sách, hãy thêm nó vào. Trên Pages Router, tương đương là thành phần Head từ next/head, với thuộc tính key để tránh thẻ trùng lặp.

Làm thế nào để tạo sitemap.xml và robots.txt trong Next.js?

Cả hai đều là tệp đặc biệt trong thư mục app. Một tệp sitemap.ts xuất ra hàm trả về các URL sẽ thành /sitemap.xml; một tệp robots.ts sẽ thành /robots.txt. tài liệu tham chiếu sitemap ghi rằng tệp này được lưu bộ nhớ đệm theo mặc định và giới hạn của Google là 50.000 URL cho mỗi sitemap; vượt mức đó, generateSitemaps sẽ chia thành nhiều tệp.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Chỉ đưa vào các URL canonical, có thể lập chỉ mục và trả về 200, và dùng ngày cập nhật thật trong lastModified. Sitemap cũng nhận alternates.languages cho site đa ngôn ngữ. Trong robots.ts, hãy trỏ đến sitemap và quyết định bot AI nào được phép thu thập site; bài viết về robots.txt cho các crawler AI liệt kê chúng. Thêm về định dạng, xem mục từ điển về sitemap XML.

Những chi tiết kỹ thuật nào hay làm hỏng SEO Next.js nhất?

Các vấn đề này đều làm giảm khả năng thu thập: crawler phải khám phá được từng URL qua liên kết và nhận một mã trạng thái sạch.

Làm thế nào để thêm dữ liệu có cấu trúc trong Next.js?

Tài liệu Next.js khuyên render JSON-LD thành thẻ script kiểu application/ld+json trực tiếp trong component trang hoặc layout, được tạo từ cùng dữ liệu với trang, và thoát ký tự < trong JSON đã serialize để ngăn chèn mã. Vì được render trên máy chủ, cả Google lẫn crawler AI đều thấy nó trong HTML thô. Dùng Article (hoặc BlogPosting) cho bài viết, Organization trong root layout, BreadcrumbList cho các trang sâu và Product cho thương mại điện tử. Công cụ tạo schema cho bạn một khối khởi đầu hợp lệ, sau đó kiểm tra trang bằng Rich Results Test của Google.

Làm thế nào để một site Next.js đủ nhanh cho Core Web Vitals?

Next.js đi kèm các thành phần xử lý những nguyên nhân thường gặp khiến Core Web Vitals kém:

• next/image: thay đổi kích thước hình ảnh, phục vụ định dạng hiện đại, tải lười theo mặc định và yêu cầu kích thước, giúp tránh dịch chuyển bố cục. Đánh dấu ảnh chính ở phần trên màn hình là ưu tiên để nó không bị tải lười (thường đó là phần tử Largest Contentful Paint).
• next/font: tự lưu trữ phông chữ và tránh sự dịch chuyển do việc thay phông chữ muộn.
• next/script: tải script bên thứ ba theo một chiến lược (afterInteractive, lazyOnload) thay vì chặn trang.
• Ít JavaScript phía client hơn: mỗi ranh giới 'use client' thêm mã phải tải về và hydrate, điều này làm nặng thêm Interaction to Next Paint trên di động.

Hãy đo dữ liệu thực tế, không chỉ điểm phòng thí nghiệm: hướng dẫn về PageSpeed Insights của chúng tôi chỉ cách đọc cả hai.

Làm thế nào để chạy một blog trên Next.js và lên top?

Một blog Next.js thường có một trong ba dạng: tệp MDX hoặc Markdown trong kho mã (đơn giản, nhưng mỗi bài viết cần một commit và một lần triển khai), một CMS headless (Sanity, Contentful, Strapi, Payload) được gọi trong Server Component, hoặc một webhook xuất bản nhận bài viết từ công cụ bên ngoài. Trong cả ba trường hợp, mẫu SEO đều giống nhau: một route động app/blog/[slug] với generateStaticParams, generateMetadata, ISR, sitemap lấy từ cùng nguồn, và một trang chỉ mục liên kết đến mọi bài viết.

Mẫu webhook tách việc xuất bản khỏi chu kỳ triển khai của bạn. Một Route Handler nhận bài viết, lưu lại, rồi làm mới các trang bị ảnh hưởng:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

SEO Next.js giúp bạn được trợ lý AI trích dẫn thế nào?

Dựng phía máy chủ là điều kiện đầu tiên cho GEO (generative engine optimization). Phân tích tháng 12/2024 của Vercel, The rise of the AI crawler, nhận thấy rằng "hiện không có crawler AI lớn nào dựng JavaScript", kể tên GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot và PerplexityBot, và đếm được 569 triệu lượt tải của GPTBot cùng 370 triệu lượt tải của Claude trên mạng lưới của họ trong một tháng. Một trang Next.js dựng sẵn văn bản, tiêu đề và JSON-LD thì tất cả các bot này đều đọc được; còn trang dựng phía client thì không.

Điều kiện thứ hai là nội dung đáng được trích dẫn: các bài viết trả lời một câu hỏi mỗi phần, có nguồn, số liệu và định nghĩa rõ ràng, được xuất bản đều đặn. Đó là phần Sorank, sản phẩm của chúng tôi, tự động hóa. Sorank là phần mềm SEO và GEO chạy theo chế độ autopilot: nó tìm từ khóa của bạn, và trình tạo bài viết blog của nó viết 20, 60 hoặc 120 bài mỗi tháng, kèm nguồn, liên kết nội bộ và hình ảnh. Trên site Next.js, nó kết nối qua webhook tùy chỉnh được mô tả ở trang cài đặt: Route Handler của bạn nhận từng bài viết, lưu lại và làm mới blog. Sau đó theo dõi lượt nhắc đến trong AI kiểm tra mỗi tháng xem ChatGPT, Claude và Gemini có trích dẫn thương hiệu của bạn hay không.

Tóm lại: dựng sẵn mọi trang bạn muốn được tìm thấy, định nghĩa metadata trên máy chủ, và lấy sitemap từ cùng nguồn với nội dung. Next.js cung cấp công cụ; thứ hạng và trích dẫn AI đến từ những gì bạn xuất bản bằng chúng. Để giữ blog Next.js luôn có bài viết, xem các gói của Sorank, từ $49 mỗi tháng và có bản dùng thử miễn phí 3 ngày.