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

当サイトは、ブログを日本語 URL にしています。ブログのファイル名と画像パス等設定するときに何かと分かりやすいので、採用していたのですが、リリース後、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'
};

参考

• next-sitemap
• Next.js に next-sitemap を導入して超手軽にサイトマップ sitemap.xml を生成しよう

canonical も忘れずに

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

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

まとめ

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

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