sitemap 顧名思義就是一個網站的地圖，當我們把應用放到網路上後，希望別人能夠搜尋的到，這時候要仰賴搜尋引擎的幫忙，因為現今瀏覽網頁都是先透過入口網站再到達目的地，我們可以把自己網站的地圖（有些什麼 endpoint）整理好，提交給搜尋引擎，這時搜尋引擎就能夠爬我們的網頁，然後顯示在搜尋結果當中。
以下的步驟是某天需要建立部落格的 sitemap 時，詢問 chatgpt 得到的結果，整體流程簡單而且可以使用，因此留下這篇文章當紀錄XD，下方的例子是以 nextjs 當範例。
安裝需要的套件
npm install sitemap-generator
寫 script 產生 xml 檔
可以在專案的目錄中建立sitemap.js，記得要把 your-website-url.com 換成需要的網址。
// sitemap.js
const SitemapGenerator = require('sitemap-generator');
const path = require('path');
// Define the URL of your website
const baseUrl = 'https://your-website-url.com';
// Define the path where the sitemap will be saved
const outputPath = path.resolve(__dirname, 'public', 'sitemap.xml');
// Create a new instance of the SitemapGenerator
const generator = SitemapGenerator(baseUrl, {
filepath: outputPath,
});
// Register event listeners for the generator
generator.on('done', () => {
console.log(`Sitemap generated at ${outputPath}`);
});
// Start the generator
generator.start();
執行 script
node sitemap.js
在 next.config.js 中加入 sitemap
// next.config.js
module.exports = {
// Other Next.js configurations...
async rewrites() {
return [
// Other rewrites...
// Add a rewrite for the sitemap
{
source: '/sitemap.xml',
destination: '/_next/static/sitemap.xml',
},
];
},
};
用 npm run dev 跑起來，找到 sitemap
在 local 跑起來後，可以直接看到產生好的 sitemap http://127.0.0.1:3000/sitemap.xml，接著只要把這個網址再提交給搜尋引擎就 ok 哩。