使用 next-sitemap 生成 Sitemap - Modern Next.js Blog 系列 #18
- Published on
本文同步發佈於 it 邦幫忙 2022 iThome 鐵人賽
TL;DR
這是「Modern Blog 30 天」系列第 18 篇文章，上一篇我們設定完全站 meta data 了，今天我們來用 next-sitemap 來生成 Sitemap 網站地圖，讓爬蟲了解網站結構。
這篇修改的程式碼如下：
加入 Sitemap 網站地圖
另外一個需要處理的 SEO 細節就是生成 Sitemap。Sitemap 是一個 xml 檔案，裡面標示了一個網站的所有頁面，能確保搜尋引擎爬蟲在爬取你的網站時，不會漏掉任何一頁。
Sitemap 通常放在一個網站的 /sitemap.xml 路徑，像是我這個專案的 Sitemap 就在這個網址：
https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/sitemap.xml
在 Next.js 我們能使用 next-sitemap 幫我們生成 Sitemap。
next-sitemap 支援所有渲染策略的頁面。而且以我們的部落格來說，頁面全都是 Static 靜態生成的，因此不需要做複雜設定，next-sitemap 就能根據 /src/pages 底下的結構，知道我們有哪些頁面，幫我們在執行 pnpm build 順便生成 Sitemap。
安裝 next-sitemap
已複製！pnpm add -D next-sitemap
新增 next-sitemap.config.js：
已複製！/** @type {import('next-sitemap').IConfig} */ module.exports = { siteUrl: "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app", generateRobotsTxt: true, };
修改 package.json 的 build script：
已複製！{ // ... "scripts": { // ... "build": "next build && next-sitemap --config next-sitemap.config.js" // ... } // ... }
修改 .gitignore、.eslintignore、.prettierignore，忽略生成的 sitemap：
已複製！# ... # 加入下面這兩條規則 # Sitemap related files (generated by next-sitemap) /public/robots.txt /public/sitemap*.xml
成果
完成了！使用 pnpm build，執行完就會看到 /public 路徑裡多了 sitemap.xml 和 robots.txt 了
生成的內容如下：
public/robots.txt：
已複製！# * User-agent: * Allow: / # Host Host: https://nextjs-tailwind-contentlayer-blog-starter.vercel.app # Sitemaps Sitemap: https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/sitemap.xml
public/sitemap.xml：
已複製！<?xml version="1.0" encoding="UTF-8"?> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <sitemap><loc>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/sitemap-0.xml</loc></sitemap> </sitemapindex>
public/sitemap-0.xml：
已複製！<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"> <url><loc>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</loc><lastmod>2022-10-03T14:34:13.703Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> <url><loc>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-images</loc><lastmod>2022-10-03T14:34:13.703Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> <url><loc>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-code</loc><lastmod>2022-10-03T14:34:13.703Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> <url><loc>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/markdown-demo</loc><lastmod>2022-10-03T14:34:13.703Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> <url><loc>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/sample-post</loc><lastmod>2022-10-03T14:34:13.703Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> </urlset>
執行 pnpm build 的最後，next-sitemap 也會跟你說它幫你生成了 Sitemap 相關檔案：
這篇修改的程式碼如下：
References
下一篇
這篇我們做完的 Sitemap 生成，下一篇我們來處理非常相似的 RSS feed 生成！