Cách tạo Sitemap trong NextJS bằng cách sử dụng gói next-sitemap

Trong bài viết này, tôi sẽ giải thích cách bạn có thể tự động hóa quy trình tạo sitemap bằng cách sử dụng gói next-sitemap.

Giới thiệu về gói NPM next-sitemap

next-sitemap là một gói được Vishnu Sankar tạo ra và bảo trì và là gói phổ biến nhất để tạo sơ đồ trang web trong NextJS với hơn 3,4 nghìn sao trên GitHub. Bạn có thể tìm thấy nó tại đây: https://github.com/iamvishnusankar/next-sitemap

Mục đích của gói này khá đơn giản nhưng rất quan trọng nếu bạn muốn cải thiện SEO cho trang web của mình. Kiểm tra mục đích tự xác định của gói bên dưới.

Hãy cùng bắt đầu nhé

Bước 1: Cài đặt gói

npm install next-sitemap

Bước 2: Tạo một tệp next-sitemap.config.jst trong thư mục gốc của dự án của bạn

Giữ nguyên tên tập tin next-sitemap.config.js, nếu không nó sẽ không hoạt động.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

Bước 3: Thêm đoạn mã sau vào package.json

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

Thận trọng: Khi sử dụng pnpm bạn cần tạo tệp .npmrc trong thư mục gốc của dự án nếu bạn muốn sử dụng bước postbuild hoặc bạn chỉ cần định nghĩa build là build: "next build && next-sitemap", xóa rồi tiếp tục.

Bước 4: Chạy lệnh build

npm run build

Bước 5: Kiểm tra tệp sitemap.xml trong thư mục gốc của dự án của bạn

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

khi build thành công, bạn sẽ thấy tệp a sitemap.xml và robots.txt trong thư mục gốc của dự án. Nếu bạn không muốn tệp robots.txt, bạn có thể thiết lập generateRobotsTxt: false trong tệp next-sitemap.config.js.

Cách cấu hình url trong sitemap.xml nâng cao

Theo mặc định, gói sẽ gán cùng mức độ ưu tiên cho tất cả các trang, nhưng tôi muốn mức độ ưu tiên của trang chủ là 1.0 và các trang khác là 0.8. Tôi có thể thực hiện điều đó bằng cách thêm đoạn mã sau vào tệp next-sitemap.config.js.

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  changefreq: 'daily',
  // here is the new code
  priority: 0.8,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  transform: async (config, path) => {
    let priority = config.priority
    let changefreq = config.changefreq
    // Set higher priority for home and team pages
    if (path === '/') {
      priority = 1.0 // Highest priority for the homepage
      changefreq = 'hourly' // Change frequency for the homepage, hourly is just an example consult the sitemap documentation or your SEO expert
    }

    return {
      loc: path, // => this will be exported as http(s)://<config.siteUrl>/<path>
      changefreq: config.changefreq,
      priority: priority, // Dynamic priority based on the page
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
}

Cách loại trừ các trang khỏi sitemap.xml

Ví dụ trên trang web sau , tôi không muốn đưa nội dung /blank/* như thế này vào tệp sitemap.xml. Tôi có thể làm điều đó bằng cách thêm mã sau vào tệp next-sitemap.config.js.

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
    // Set higher priority for home and team pages
    if (path === '/') {
      priority = 1.0 // Highest priority for the homepage
      changefreq = 'hourly' // Change frequency for the homepage, hourly is just an example consult the sitemap documentation or your SEO expert
    }

    return {
      loc: path, // => this will be exported as http(s)://<config.siteUrl>/<path>
      changefreq: config.changefreq,
      priority: priority, // Dynamic priority based on the page
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
  // here is the new code
  exclude: ['/blank/*'],
}

Kết luận

Trong bài viết này, tôi đã giải thích cách tự động hóa quy trình tạo sơ đồ trang web bằng gói next-sitemap. Tôi cũng giải thích cách tùy chỉnh tệp sitemap.xml theo yêu cầu của bạn. Tôi hy vọng bạn thấy bài viết này hữu ích.