Web開発ブログ

Next.jsでサイトマップとrobots.txtをnext-sitemapを使って自動生成する

Next.js

更新

2023/07/30

作成

2023/07/23

使用したバージョン
Next.js 13.4.7
next-sitemap 4.1.8

Webサイトを検索エンジンに手早く認識されるためにサイトマップを作成することにした。

Next.jsを使用している場合、next-sitemapを使うと簡単に生成できる。

next-sitemapのインストール。


npm i next-sitemap

package.jsonと同じディレクトリにnext-sitemap.config.jsを作成し設定を書く。


/** @type {import('next-sitemap').IConfig} */
module.exports = {
    siteUrl: 'https://financial-programmer.net/',
    generateRobotsTxt: true
};

robot.txtも生成する場合は、generateRobotsTxt: trueにする。

デフォルトではpublicディレクトリに生成されるが、変更したい場合はoutDir: './～'で変更できる。

コマンドでnpx next-sitemapを実行すると指定したディレクトリにsitemap.xml、sitemap-0.xml、robots.txtが生成される。

sitemap.xmlはサイトマップインデックスとなっている。


<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap><loc>https://financial-programmer.net/sitemap-0.xml</loc></sitemap>
</sitemapindex>

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://financial-programmer.net</loc><lastmod>2023-07-23T05:31:29.602Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://financial-programmer.net/blog/chakraui-container-center</loc><lastmod>2023-07-23T05:31:29.602Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
...

サイトマップが複数ファイルに別れているのは、サイトマップサイズが大きい場合は分割することがGoogleで推奨されているためである。

サイトマップのサイズに関する制限: どの形式についても、1 つのサイトマップに対してサイズに関する上限（圧縮していない状態で 50 MB）と URL の件数に関する上限（50,000 件）が設けられています。ファイルサイズがこれより大きい場合、または URL の件数がこれより多い場合は、サイトマップを複数に分割する必要があります。

サイトマップサイズが大きくならない場合は、分割しなくても問題ない。

generateIndexSitemap: falseに設定することでsitemap.xmlに個別ページの情報が記載されることになる。

robots.txtはデフォルトではすべてのページをクローリングできるようになっている。


# *
User-agent: *
Allow: /
# Host
Host: https://financial-programmer.net/
# Sitemaps
Sitemap: https://financial-programmer.net/sitemap.xml

ビルド後に毎回サイトマップ生成を行いたい場合はpackage.jsonのscriptsを変更する。


"scripts": {
    "build": "next build && next-sitemap",
    ...
}

Windows環境でoutput:'export'を設定するとサイトマップが生成されない問題

next.config.jsでSSGにするためoutput: "export"にしている場合は次のような設定する。


/** @type {import('next-sitemap').IConfig} */
module.exports = {
    siteUrl: 'https://financial-programmer.net/',
    output: 'export',
    outDir: 'out',
    sourceDir: 'out'
};

しかし、現在のバージョンでこうするとWindows環境だと機能しなくなる。

ソースを見てみると、ビルドにより生成されたHTMLファイルをfast-globで取得してサイトマップを生成していた。

問題はfast-globに渡すHTMLファイルがあるディレクトリのパスがバックスラッシュを含むパスだったこと。


これだとダメ
C:\Users\～
これならOK
C:/Users/～

パスはnode_modules\next-sitemap\dist\esm\utils\path.jsにあるgetPathで生成している。

これをreplaceで「\」を「/」に置き換えるとちょんと機能するようになった。


export const getPath = (...pathSegment) => {
    return path.resolve(process.cwd(), ...pathSegment).replace(/\\/g, '/');
};

ただこんなことしなくとも、ビルドすると.nextディレクトリも生成されるのでoutput: 'export'を設定せずともサイトマップを生成することは可能である。


/** @type {import('next-sitemap').IConfig} */
module.exports = {
    siteUrl: 'https://financial-programmer.net/',
    outDir: 'out',
    sourceDir: '.next'
};

追記

icon.tsxでファビコン用のアイコンを作るとそのURLもサイトマップに記載されてしまう問題も発生した。

lastmodもページごとに設定したい。

少し手間はかかるが、Next.jsのサイトマップ作成機能を使うことにした。

Next.jsでサイトマップを自動で作成してlastmodにファイルの更新日時を設定する