Hướng Dẫn Tạo Sitemap Trong Next.js Với Gói next-sitemap

Trong bài viết này, tôi sẽ hướng dẫn bạn cách tự động hóa quy trình tạo sitemap cho dự án Next.js của mình bằng cách sử dụng gói next-sitemap. Việc này không chỉ giúp bạn làm cho trang web dễ dàng được lập chỉ mục hơn mà còn cải thiện đáng kể SEO.

Giới Thiệu Về Gói NPM next-sitemap

Gói next-sitemap được phát triển và duy trì bởi Vishnu Sankar, là một trong những công cụ phổ biến nhất cho việc tạo sitemap trong Next.js với hơn 3,4 nghìn sao trên GitHub. Bạn có thể tìm thấy gói này tại địa chỉ: https://github.com/iamvishnusankar/next-sitemap. Gói này giúp bạn tạo sitemap một cách dễ dàng và hiệu quả, góp phần quan trọng trong việc tối ưu hóa SEO cho trang web của bạn.

Các Bước Tạo Sitemap

Bước 1: Cài Đặt Gói next-sitemap

Đầu tiên, bạn cần cài đặt gói next-sitemap trong dự án Next.js của mình:

npm install next-sitemap

Bước 2: Tạo Tệp Cấu Hình next-sitemap.config.js

Tiếp theo, bạn tạo một tệp có tên là next-sitemap.config.js ở thư mục gốc của dự án. Đừng quên giữ nguyên tên tệp để gói hoạt động chính xác:

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (tùy chọn)
  // ...các tùy chọn khác
}

Bước 3: Thêm Script Vào package.json

Bạn cần thêm đoạn mã sau vào phần scripts trong tệp package.json:

"scripts": {
  "build": "next build",
  "postbuild": "next-sitemap"
}

Nếu bạn sử dụng pnpm, hãy tạo tệp .npmrc trong thư mục gốc hoặc thay đổi dòng build thành build: "next build && next-sitemap".

Bước 4: Chạy Lệnh Xây Dựng

Chạy lệnh sau để xây dựng dự án và tự động tạo sitemap:

npm run build

Bước 5: Kiểm Tra Tệp sitemap.xml

Sau khi quá trình xây dựng hoàn tất, bạn sẽ thấy tệp sitemap.xml và tệp robots.txt trong thư mục gốc của dự án:

| app
    | /pages
    | /public
        | /sitemap.xml
        | /robots.txt

Nếu bạn không cần tệp robots.txt, có thể thiết lập generateRobotsTxt: false trong tệp cấu hình.

Tùy Chỉnh Sitemap.xml Nâng Cao

Theo mặc định, tất cả các trang sẽ có cùng mức độ ưu tiên, nhưng bạn có thể tùy chỉnh mức độ ưu tiên cho trang chủ và các trang khác như sau:

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  changefreq: 'daily',
  priority: 0.8,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  transform: async (config, path) => {
    let priority = config.priority
    let changefreq = config.changefreq
    // Đặt mức độ ưu tiên cao hơn cho trang chủ
    if (path === '/') {
      priority = 1.0 // Mức độ ưu tiên cao nhất cho trang chủ
      changefreq = 'hourly' // Tần suất thay đổi cho trang chủ
    }

    return {
      loc: path,
      changefreq: config.changefreq,
      priority: priority,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
}

Cách Loại Trừ Trang Khỏi Sitemap

Nếu bạn muốn loại trừ một số trang khỏi sitemap, ví dụ như /blank/*, bạn có thể thêm đoạn mã sau vào tệp cấu hình:

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  changefreq: 'daily',
  priority: 0.8,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  transform: async (config, path) => {
    // Mã tương tự như trên
  },
  exclude: ['/blank/*'],
}

Kết Luận

Bài viết này đã hướng dẫn bạn cách tự động hóa quy trình tạo sitemap bằng cách sử dụng gói next-sitemap trong Next.js. Bạn cũng đã học cách tùy chỉnh cấu hình sitemap theo nhu cầu của mình. Hy vọng rằng hướng dẫn này sẽ giúp bạn cải thiện SEO cho trang web của mình một cách hiệu quả.
source: viblo