next-sitemap (日本語)

この記事の説明の中で、hreflang Korea と Japan がそれぞれ'kr'と'jp'から'ko'と'ja'に変更されました。2023 年 11 月 12 日

Next-sitemap は Next.js プロジェクトのサイトマップ生成を簡単にサポートするパッケージです。サイトマップの生成を自動化して SEO(検索エンジン最適化)を助けます。 この内容は参考文献を元に個人でまとめたものです。


Installation

プロジェクトフォルダーでnpmまたはyarnを使用してパッケージをインストールします。

Installation

npm install next-sitemap 

Usage

直接使用する前に、ルートフォルダーに next-sitemap.config.js という名前の設定ファイルを作成します。

  • Name
    SITE_URLの登録
    Type
    使い方
    Description

    siteUrl: https://example.com の例です。必ず自分のURLを登録しましょう!

  • Name
    package.jsonのscriptを修正
    Type
    使い方
    Description

    dev, build, start などさまざまなスクリプトが存在する場合があります。その下に postbuild を作成し、以下の例のように入力します。

next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

package.json

"scripts": {
  "build": "next build",
  "postbuild": "next-sitemap --config next-sitemap.config.js"
}

Customization

Next-sitemapで利用可能な主要なオプションは以下の通りです。必須の要素以外にも、さまざまな追加機能があります。

説明

  • Name
    sitemapSize
    Type
    カスタマイズ
    Description

    デフォルト値は5000です。1つのsitemapファイルに含まれるURLの最大数を指定します。このオプションは、大きなプロジェクトで複数のsitemapファイルに分割する必要がある場合に便利です。10,000以上は推奨されません。

  • Name
    exclude(array)
    Type
    カスタマイズ
    Description

    サイトマップ作成時に除外したいURLパスを配列形式で追加します。例: [/secret-page, 'hidden']

  • Name
    extraPaths(array)
    Type
    カスタマイズ
    Description

    sitemapに追加で含めたいURLパスを配列形式で追加します。例: [/extra-page', '/special']

  • Name
    excludelndex(boolean)
    Type
    カスタマイズ
    Description

    デフォルト値はfalseです。trueに設定すると、すべてのindexページがサイトマップから除外されます。

  • Name
    sourceDir(string)
    Type
    カスタマイズ
    Description

    デフォルト値はnextです。ページが生成されるディレクトリを設定します。ほとんどの場合、デフォルト値を変更する必要はありません。

  • Name
    outDir(string)
    Type
    カスタマイズ
    Description

    デフォルト値はpublicです。生成されたサイトマップファイルの保存場所を設定します。ほとんどの状況ではデフォルト値が適切です。

  • Name
    robotsTxtOptions(object)
    Type
    カスタマイズ
    Description

    generateRobotsTxtオプションがtrueの場合に使用され、オブジェクト内でpolicy、sitemap、hostなどの詳細な設定が可能です。

next-sitemap.config.js

module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  exclude: ['/secret', '/private'],
  extraPaths: ['/extra', '/special'],
  excludeIndex: true,
  sourceDir: '.next',
  outDir: 'public',
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://example.com/extra-sitemap.xml',
    ],
    policy: [
      { userAgent: '*', disallow: '/private' },
    ],
  }
}

スムーズな SEO next-sitemap.config.js

スムーズなSEO運用と多言語サイトを最適化しました。また、MDX拡張子もサイトマップに含めるための関数を作成し、適用しました。 siteUrl は必ず自分のドメインに修正する必要があります。また、多言語サービスがない場合、alternateRefs コードは不要です。さらに、pages が mdx でない場合、additionalPaths も記述する必要はありません。 個人プロジェクトの要件に応じて、optional を適切に使用することで、優れた SEO 運用が可能です。robotsTxtOptions の場合、将来の制御のために追加しました。全てを許可する場合は細分化の代わりに統一して使用しても構いません。

  • Name
    changefreq
    Type
    Description

    サイトマップ内の各URLの変更頻度を 'daily' に設定します。

  • Name
    priority
    Type
    Description

    サイトマップ内の各URLの優先順位を 0.7 に設定します。

  • Name
    sitemapSize
    Type
    Description

    1つのsitemapファイルに含まれるURLの最大数を 5000 に設定します。

  • Name
    exclude
    Type
    Description

    除外したいURLのパスを指定する配列が空です。すべてのパスが含まれます。

  • Name
    alternateRefs
    Type
    Description

    多言語サイトに対する代替リンクを設定します。ホームページには韓国語、英語、日本語のバージョンがあります。

  • Name
    additionalPaths
    Type
    Description

    追加で含めたいパスを非同期関数として設定します。'/pages'からすべてのMDXファイルを見つけてsitemapに追加します。

next-sitemap.config.js

module.exports = {
  siteUrl: 'http://example.com',
  changefreq: 'daily',
  priority: 0.7,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  exclude: [],
  alternateRefs: [
    {
      href: 'https://example.com/kr',
      hreflang: 'ko',
    },
    {
      href: 'https://example.com/en',
      hreflang: 'en',
    },
    {
      href: 'https://example.com/jp',
      hreflang: 'ja',
    },
  ],
  transform: async (config, path) => {
    return {
      loc: path,
      changefreq: config.changefreq,
      priority: config.priority,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
  additionalPaths: async (config) => {
  const allMdxFiles = findAllMdxFiles('./pages')
    return allMdxFiles.map((file) => ({
      loc: `${config.siteUrl}/${file}`,
      changefreq: config.changefreq,
      priority: config.priority,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }))
  },
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '\*',
        allow: '/',
      },
      {
        userAgent: 'Googlebot',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Bingbot',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yeti',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yahoo! Slurp',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yahoobot', // Japan Yahoo
        allow: '/',
        disallow: [],
      },
    ],
    additionalSitemaps: ['https://example/sitemap-0.xml'],
  },
}