GatsbyブログにXMLサイトマップを追加する

はじめに

GatsbyサイトにXMLサイトマップを追加する方法を調べたので解説します。

XMLサイトマップは、人が読むためのものではなく、Googleがサイトの構造を理解するためのものです。

プラグインを使って簡単に作成することができました。

XMLサイトマップとは

Googleにページ構造をお知らせするためのXMLファイル。

Googleの検索データベースにWebページのURLが登録されることを「インデックスされる」と言います。Googleにインデックスされるためには、

• インデックスされているページからリンクを貼る
• XMLサイトマップを登録する

という方法があるそうです。

基本的にちゃんとしたウェブサイトにはXMLサイトマップが設定されています。企業のHPに行って、後ろに/sitemap.xmlを付けてみると出てきたりします（JR東とかauとか…）。

利用するプラグイン

公式ホームページでも紹介されていたgatsby-plugin-advanced-sitemapを使ってみます。

プラグインのインストール

$ npm install --save gatsby-plugin-advanced-sitemap

gatsby-config.jsの設定

gatsby-config.jsに、サイトのURLと、プラグイン利用設定を追加しました。

 module.exports = {
  siteMetadata: {
    title: `タイトル`,
    author: {
      name: `筆者の名前`,
      summary: `ブログのサマリー`,
    },
    // description: `A starter blog demonstrating what Gatsby can do.`,
    description: `ブログのサマリー`,
    siteUrl: `サイトのURL`,    social: {
      twitter: `ユーザ名`,
    },
  },
  plugins: [    ・・・・・    `gatsby-plugin-advanced-sitemap`,  ],}

ビルドして確認

サイトマップは、

ブログURL.sitemap.xml

に作成されます。

本ブログでも無事に作成されていました。 https://bunsugi.com/sitemap.xml

おわりに

プラグインを使って、XMLサイトマップを簡単に作成することができました。 これをGoogleサーチコンソールに登録します。