Gatsby.jsサイトのカスタムサイトマップを作成する方法

簡単にデプロイできるセットアップが必要な場合は、Gatsby.jsを使用してReactで静的サイトを構築できます。これらは、優れた速度とスムーズな開発者エクスペリエンスを提供します。 Gatsbyは、ブログ、マーケティング、eコマースサイトで使用する開発者とともに一貫して成長しています。

毎回、検索エンジンのクローラーがオーガニック検索のランキングを向上させるのに役立つサイトを構築します。グーグルのような検索エンジンがあなたのサイトのアーキテクチャを理解し、それをインテリジェントに索引付けできることを確認する必要があります。サイトのルートにsitemap.xmlファイルを含めることで、これらすべてを行うことができます。

Gatsby.jsおよびJAMstackサイトの人気が高まるにつれ、このチュートリアルでは、Gatsbyを利用したWebサイトにカスタムXMLサイトマップファイルを自動的に生成します。

XMLサイトマップ

Webサイトは、 About 、 Contact 、 Blog 、Subscriptionなどの複数のWebページで構成されています。サイトマップファイルは、これらすべてのページのリストを保持して、Googleなどの検索エンジンにサイトコンテンツの構成について通知します。 Googlebotのような検索エンジンのウェブクローラーはこのファイルを読み、サイトをインテリジェントにクロールします。

Webの黎明期には、手動で生成された箇条書きリストであるHTMLサイトマップが流行していました。しかし、その人気と重要性のために、サイトマップはHTMLではなくXML形式で公開されます。これは、対象読者が人ではなく検索エンジンであるためです。

したがって、XMLサイトマップファイルは、Webサイトに存在するすべてのページについて検索エンジンと通信します。

サイトマップファイルを追加することの重要性

検索エンジン最適化（SEO）を考えると、サイトマップは非常に重要です。ただし、検索ランキングには影響しません。代わりに、インデックスが作成されていないWebページがある場合、サイトマップは検索エンジンにそのページについて適切にインデックスを作成するように指示します。

サイトマップは、新しいサイトと古いサイトの両方にとって等しく重要です。特にサイトが比較的新しい場合は、検索エンジンが新しいサイトの投稿やページを見つけるのが難しいため、サイトを追加することをお勧めします。あなたはそれを最大限に活用するために検索エンジンの仕事をできるだけ簡単にしたいです。

sitemap.xmlファイルはほとんどのWebサイトにあります。これは、検索エンジンのボットがさまざまな更新や、基本的にインデックスを作成する必要のあるサイトで行われるすべてのことを把握するのに役立ちます。

Gatsbyにサイトマップを追加する

Gatsbyの重要なハイライトの1つは、単純なNPMパッケージを介してGatsbyAPIを実装するプラグインのコレクションが増えていることです。

これで、サイトマップを作成するために、わざわざ数行のコードを記述する必要がなくなりました。 gatsby-plugin-sitemapと呼ばれるサイトマップファイルを生成するGatsbyプラグインがあります。

このチュートリアルを続行する前に、Gatsbyサイトを稼働させる必要があります。

インストール

gatsby-plugin-sitemap パッケージをインストールするには、ルートフォルダーで次のコマンドを実行します。

npm install --save gatsby-plugin-sitemap

プラグインの使用：gatsby-plugin-sitemap

これでプラグインが正常にインストールされたので、このプラグインをgatsby-config.jsファイルに追加します。ギャツビーに不慣れな人への簡単なリマインダー。 gatsby-config.jsファイル内には、ルートフォルダーに配置されているすべてのサイト構成オプションがあります。

これらの構成オプションの1つは、プラグイン用です。ここには、GatsbyAPIを実装するプラグインの配列があります。一部のプラグインは名前でリストされていますが、他のプラグインもオプションを使用する場合があります— gatsby-plugin-sitemapにもオプションがあります。

したがって、gatsby-config.jsファイルに次のコード行を追加します。

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Your Site Title',
    siteUrl: 'https://yoursite.com',
  },
  plugins: ['gatsby-plugin-sitemap'],
}

プロジェクトの詳細に応じて、siteMetadata内でtitleとsiteUrlを変更してください。

サイトマップファイルの生成

サイトマップを作成するには、本番ビルドを生成してサーバーを起動する必要があります。端末で次のコマンドを入力し、ENTERを押します。

npm run build

数秒待つと、Gatsbyで機能するサイトマップが表示されます。

デフォルトでは、サイトマップはpublicというフォルダーであるWebサイトのルートに生成されます。サイトを展開すると、/sitemap.xmlからアクセスでき、現在ユーザーがアクセスできるサイトのすべてのページが表示されます。

次のURLを使用してサイトのサイトマップにアクセスできます。

https://your-domain/sitemap.xml

gatsby-plugin-sitemap プラグインは高度なカスタムオプションをサポートしているため、このデフォルト機能はそれに応じて変更できます。これらのオプションを少し深く掘り下げてみましょう。

gatsby-plugin-sitemapの詳細オプション

gatsby-plugin-sitemap は、sitemap.xmlファイルをより細かく制御するためにカスタマイズできるさまざまな高度なオプションをサポートしています。これらのいくつかを見てみましょう：

output：デフォルトのファイル名はsitemap.xmlで、outputオプションを使用して出力ファイルの名前を変更できます。たとえば、output: '/some-other-sitemap.xml',の場合、URLはhttps://your-domain/some-other-sitemap.xmlになります。
exclude：このオプションは、何らかの理由でサイトマップからリンクを除外するのに役立ちます。
query：siteMetadata、siteURL、allSitePageなどの情報をフェッチするカスタムGraphQLクエリ。

sitemapSizeとsitemap indexには、他にもいくつかの便利なオプションがあります。詳細はこちらの公式プラグインリポジトリにアクセスできます。

カスタマイズされたオプションの例

たとえば、このチュートリアルでは、プラグインのオプションをカスタマイズして、選択したデータを生成しています。ここでは、GraphQLクエリをカスタマイズしました。

 {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        query: `{
          site {
            siteMetadata {
              siteUrlNoSlash
            }
          }
          allSitePage {
            edges {
              node {
                path
              }
            }
          }
          allMarkdownRemark {
            edges {
              node {
                fields {
                  slug
                }
              }
            }
          }
        }`,
        serialize: ({ site, allSitePage, allMarkdownRemark }) => {
          let pages = []
          allSitePage.edges.map(edge => {
            pages.push({
              url: site.siteMetadata.siteUrlNoSlash + edge.node.path,
              changefreq: `daily`,
              priority: 0.7,
            })
          })
          allMarkdownRemark.edges.map(edge => {
            pages.push({
              url: `${site.siteMetadata.siteUrlNoSlash}/${
                edge.node.fields.slug
              }`,
              changefreq: `daily`,
              priority: 0.7,
            })
          })

          return pages
        },
      },
    },

ここでは、queryオプションを使用して、siteMetadataおよびsiteUrlNoSlashに関する情報を含むsiteのデータをフェッチします。さらに、allSitePageにクエリを実行して、すべてのedgesを介して各グラフnodeのpathプロパティを取得するすべてのサイトページのURLパスを取得します。そして最後に、マークダウンで書き込まれたファイルを読み取り、それらをHTMLページに変換するallMarkdownRemarkを使用します。ここでは、fieldプロパティ内から各マークダウン投稿のslug情報を取得しています。

最後に、serialize関数を呼び出して、allSitePageおよびallMarkdownRemark用にフェッチされたデータをマップしました。それぞれがchangefreq: 'daily'とpriority: 0.7のページURLを返します。

これは、gatsby-plugin-sitemapのカスタムオプションを試してみた1つのデモンストレーションであり、プロジェクトの要件に応じて実行できます。

Gatsby.jsここのライブサイトマップデモにアクセスできます。

結論

Gatsby.jsを使用すると、サイトマップの生成をより管理しやすくなります。 gatsby-plugin-sitemap を使用してsitemap.xmlファイルを作成した結果は、Gatsby.jsを使用する開発者のエクスペリエンスが向上していることを示しています。