GatsbyJSに XMLサイトマップを導入する方法

GatsbyJSに XMLサイトマップを導入する方法

概要

Webサイトを制作しても、Googleなどの検索結果にすぐ表示されるということはまずありません。ひとつの要因として考えられるのは、検索エンジン クローラが Webサイトへやって来てうまく巡回してくれていないことです。

うまいこと巡回してもらうためには、あなたの Webサイトの存在を、検索エンジン クローラに分かり良く伝える必要があります。うまく伝えるための方法としてひとつ挙げるとしたら、XMLサイトマップを作成することです。

XMLサイトマップを作成し、Google Search Consoleで「新しいサイトマップの追加」をしておけば、やがてうまいことクロールされて Webサイトの各ページがインデックスされはじめるはずです。

GatsbyJSで制作したサイトに、XMLサイトマップを導入したいときは、プラグイン gatsby-plugin-sitemapを利用します。試してみましょう。

開発環境

  • Windows10
  • Node.js: 14.18.0
  • npm: 6.14.15
  • gatsby-cli: 3.14.1
  • GatsbyJS: 4.4.0
  • インストール済みのプラグイン
    • gatsby-plugin-image
    • gatsby-plugin-sharp
    • gatsby-source-filesystem
    • gatsby-plugin-mdx
    • @mdx-js/mdx
    • @mdx-js/react
    • gatsby-transformer-sharp
    • gatsby-remark-prismjs
    • prismjs
    • gatsby-remark-external-links
    • gatsby-remark-code-titles

作業手順

1:プラグインをインストールする

  • コマンドラインにて、プラグイン gatsby-plugin-sitemapをインストールします。
$ npm install gatsby-plugin-sitemap

2:gatsby-config.jsを編集する

  • 公式ドキュメント「gatsby-plugin-sitemap | Gatsby」を参考にして、gatsby-config.jsファイルの設定を行いましょう。
  • siteUrlには、もちろん「あなたが制作しいている Webサイトの URL」を入力します。
gatsby-config.js
siteMetadata: {
  siteUrl: "https://gatsbyjs-test.com",
},
plugins: [`gatsby-plugin-sitemap`]

これまでの gatsby-config.jsファイルの設定とあわせると、次のようになります。

gatsby-config.js
module.exports = {
  pathPrefix: "/gatsby-test",
  siteMetadata: {
    siteName: "(あなたのWebサイト名)",
    siteSubTitle: "(Webサイトのサブタイトル)",
    siteDescription: "(Webサイトの説明)",
    siteUrl: "https://gatsbyjs-test.com",
    siteOgpImage: "/(WebサイトのOGP画像のファイル名)",
    siteAuthor: "(Webサイトの著者名)",
  },
  plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `blog`,
        path: `${__dirname}/blog`,
      }
    },
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        gatsbyRemarkPlugins: [
          "gatsby-remark-code-titles",
          "gatsby-remark-prismjs",
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: "_blank",
              rel: "nofollow noreferrer"
            }
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 700,
            },
          },
        ],
      },
    },
    "gatsby-transformer-sharp",
    "gatsby-plugin-react-helmet",
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          "G-**********", // Google Analytics / GA
        ],
      },
    },
    `gatsby-plugin-sitemap`,
  ],
}

3:ローカルでビルドする

あなたのパソコン内でうまいこといくか確認するために、ビルドしてみましょう。

$ gatsby build
$ gatsby serve

4:生成された xmlファイルをローカルで確認する

publicディレクトリ内に sitemapディレクトリが生成されるはずです。さらにその sitemapディレクトリ内をご覧になってみてください。おそらく次の 2つの xmlファイルが確認できるはずです。(※:GatsbyJSのバージョンが 3系であれば、publicディレクトリ直下に生成されるようです)

  • sitemap-0.xml
  • sitemap-index.xml

5:デプロイする

問題ないようであれば、あなたが利用しているホスティングサービスへデプロイしましょう。

6:生成された xmlファイルをサーバで確認する

反映されるまで 10秒程度かかるかもしれないので、しばらく時間をおきます。

そろそろかなと思ったら、Webブラウザで「https://(あなたの Webサイトのドメイン)/sitemap/sitemap-index.xml」へアクセスします。おそらく、「https://(あなたの Webサイトのドメイン)/sitemap/sitemap-0.xml」と表示されるはずです。

7:Google Search Consoleへ追加登録する

  1. Google Search Consoleへログインし、左側のメニューにある「サイトマップ」をクリックします。
  2. URLの一部を入力する欄があるので、「sitemap/sitemap-index.xml」を貼り付けて、[ 送信 ]ボタンを押します。
  3. うまくいくと、緑色の文字で「成功しました」と表示されます。ダメなときは、赤色の文字で「取得できませんでした」と表示されます。

補足:うまくいかない場合

  • 何らかの理由で「取得できませんでした」と表示されてしまうかもしれません。すぐにうまくいかない場合でも、2週間くらい放置しておくと「成功しました」と表示されて、インデックスされはじめることがあります。そもそも、インデックスされるようにすることが目的なので、インデックスされはじめたなら、サイトマップが成功せずともあまり気にしなくても大丈夫です。
  • あるいは、「sitemap/sitemap-index.xml」ではなく、「sitemap/sitemap-0.xml」を入力するとうまくいくかもしれません。
  • Google Search Consoleの左側のメニューにある「カバレッジ」をクリックして、エラーや除外を確認し、問題があれば改善しましょう。例えば、Webサイトによっては、「クロールしないでほしいページを設定する」ほうが良い場合もあります。

補足:一部のページを除外設定したい場合

Webサイト内には、インデックスしてくれないほうが良いページもあるだろうと思います。

例えば、Googleで検索したときにタグページへのリンクが表示されたらどのように感じるでしょう。Webサイト内では意味のあるページであっても、検索結果には不向きなページがあります。

そのような除外してほしいページがある場合は、オプションの「excludes」で指定することができます。

例えば、タグページを除外したければ、タグのリストページ(/tags/)、そして、その配下のページはワイルドカードを使って(/tags/*)指定すれば OKです。

gatsby-config.js
module.exports = {
  ~中略~
  plugins: [
    ~中略~
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        excludes: [`/tags/`, `/tags/*`],
      },
    },
  ],
}

参考資料