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.