開発者ドキュメント

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

getdocs

簡単にデプロイできるセットアップが必要な場合は、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 ほとんどのウェブサイトのファイル。 これは、検索エンジンのボットがさまざまな更新や、基本的にインデックスを作成する必要のあるサイトで行われるすべてのことを把握するのに役立ちます。

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

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

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

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

インストール

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

  1. 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.

  1. npm run build

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

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

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

https://your-domain/sitemap.xml

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

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

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

他にもいくつかの便利なオプションがあります 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 私たちのデータをフェッチするオプション site に関する情報が含まれています siteMetadata と siteUrlNoSlash. さらに、クエリを実行します allSitePage 取得するすべてのサイトページのURLパスを取得するには path 各グラフのプロパティ node すべてを通して edges. そして最後に、 allMarkdownRemark マークダウンで書き込まれたファイルを読み取り、それらをHTMLページに変換します。 ここで私たちは slug 内部からの各マークダウン投稿の情報 field 財産。

終わりに向かって、私たちは serialize フェッチされるデータをマップする関数 allSitePage と allMarkdownRemark. それぞれがページのURLを返します changefreq: 'daily' と priority: 0.7.

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

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

結論

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

モバイルバージョンを終了