© 2025 JWS

Next.jsで日本語URLを扱う場合の注意点

  • Next.js
  • JavaScript

目次

  1. Sitemap.xmlを日本語URL にしていると上手く動作してくれない
  2. Next.jsでSitemap を生成する
    1. 参考
  3. canonical も忘れずに
  4. まとめ

ブログのファイル名と画像パス等設定するときに何かと分かりやすいので、採用していたのですが、リリース後、SEO 周りの設定で色々問題が出てきていたので、注意点をまとめます。

Sitemap.xmlを日本語URL にしていると上手く動作してくれない

これはNext.jsに限った話ではないのですが、エンコードをせず、日本語のままsitemap.xmlに登録すると、正しく認識されません。

サーチコンソール上では読み込むが、反映されない？感じになります。

そのため、エンコードの加工を加えてからsitemap.xmlに記述する必要があります。

Next.jsでSitemap を生成する

サイトマップは、next-sitemapで導入すると簡単です。

ただ、URLをエンコードさせる方法が、日本語のサイトで説明しているページが無かったので、苦戦しました。。

transformというプロパティでencodeURLにpathを渡してあげることで、実装できます。

以下のような感じです。

// sitemap.config.js
module.exports = {
  siteUrl: 'https://jws.work',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  transform: async (config, path) => {
    return {
      loc: encodeURI(path)
    };
  },
  outDir: './out'
};

参考

canonical も忘れずに

canonicalについても忘れずにencodeURIしておく必要がある。

<NextSeo canonical={encodeURI(`https://jws.work/blog/${props.blog.slug}/`)} />

まとめ

上記設定を行うことで、ようやく日本語 URL を正しくクロールしてもらえるようになりました。

日本語 URL を扱う際は、諸々設定忘れずに。

Share

Blogs