Next.jsでサイトマップを作ってGoogle Search Consoleに登録する

Engineering
この記事を書いた人

PharmaXというオンライン薬局のスタートアップで薬剤師・エンジニアとして働いています。Rails・React・TypeScriptなどを書きます。英語が得意でTOEIC900点・通訳案内士資格取得。主に薬剤師の働き方やプログラミング、英語学習について書きます。当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
>> 詳しいプロフィール

Tomoyuki Katoをフォローする

 

next-sitemapというライブラリを使ってNext.jsで実装したアプケーションのサイトマップを作った時の作業メモ。

 

next-sitemapの設定方法

next-sitemap』というライブラリを使うと、Next.jsで実装したアプリケーションのサイトマップを簡単に作ることができる。

 

next-sitemapをインストールする

next-sitemapのインストールは、以下のコマンドをターミナルで叩くだけで良い。

yarn add next-sitemap

 

package.jsonを更新する

package.jsonにpostbuildを追加する。

"scripts": {
    "dev": "next -p 8080",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap"
  },

 

configファイルを作成する

プロジェクトのルートに『next-sitemap.config.js』という名前のファイルを作成する。

 

ファイルを作成したら、以下のように書く。

module.exports = {
  siteUrl: "https://hogehoge.com",
};

 

sitemapを作成する

最後に以下のコマンドをターミナルで叩いてsitemapを作成する。

yarn build

 

publicディレクトリに、sitemap.xmlが作られていれば成功。

 

Google Serch Consoleに登録する

サイトマップのURLを入力の部分に、sitemap.xmlと入力して送信する。

 

next-sitemapのそのほか便利な設定

最後に知っておくと便利な設定について調べたことを書いておく。

先ほど作った『next-sitemap.config.js』に追記することによって、サイトマップをカスタマイズできる。

 

例えば、以下のような感じ。

module.exports = {
  siteUrl: "https://hogehoge.com",
    generateRobotsTxt: true,
  sitemapSize: 7000,
  ・・・・・・・・
    ・・・・・・・・
};

 

<sitemapBaseFileName>

sitemapの名前を設定する項目。

 

stringで設定する。

例えば、”sitemap-hogehoge”と設定すると、sitemap-hogehoge.xmlというファイルが作られる。

 

デフォルトだとsitemap.xmlになる。

sitemap.xmlのままだと、自分のサイトがスクレイピングされやすくなってしまうので、わかりにくい名前に設定しておくと良さそう。

 

<generateRobotsTxt>

robots.txtを作るかどうかを設定する項目。

booleanで設定。

 

robots.txtとは、検索エンジンのクローラに対して、サイトのどの URL にアクセスしてよいかを伝えるもので、SEOに良い影響を及ぼすと言われている

 

<sitemapSize>

サイトマップを自動で分割して作成してくれる項目。

numberで設定する。

デフォルトでは5000が設定されている。

 

<exclude>

特定のページのサイトマップを作りたくない場合に設定する項目。

以下のようにpathを設定すると、以下のpathのサイトマップが作られなくなる。

/*のように書くと、/piyopiyo以下のpath全てがサイトマップから除外してくれる。

exclude: ["/hogehoge", "/piyopiyo/*"],

 

そのほかにもいくつか設定項目があるので、興味があればチェックしてみてください。

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