TL;DR

這是「Modern Blog 30 天」系列第 18 篇文章，上一篇我們設定完全站 meta data 了，今天我們來用 next-sitemap 來生成 Sitemap 網站地圖，讓爬蟲了解網站結構。

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day17-open-graph-meta...day18-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 相關檔案：

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day17-open-graph-meta...day18-sitemap

References

• iamvishnusankar/next-sitemap: Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.

下一篇

這篇我們做完的 Sitemap 生成，下一篇我們來處理非常相似的 RSS feed 生成！