gatsbyでsitemapを自動作成

今回はgatsbyでseo対策をしていきます、デフォルトでsitemap作成機能がないので自作する必要があります。

sitemapとは

sitemapとは、ウェブサイト内のページを構造化したものです。これは、検索エンジンにウェブサイト内のページを把握してもらうためのもので、検索エンジンがサイト内をスキャンしやすくなるとともに、ユーザーがサイト内を探索する際にも役立ちます。

サイトマップはXMLフォーマットで記述され、通常は次のようなURLでアクセスできます。

http://example.com/sitemap.xml

このXMLファイルには、サイト内のページや画像、ビデオなどが構造化されて記述されます。検索エンジンはこのXMLファイルを読み込み、サイト内をスキャンします。

サイトマップを作成することで、検索エンジンによりよくサイト内を把握されるようになり、検索結果に表示されるようになるとともに、サイト内を探索する際にも便利になります。

Gatsbyでの実装方法

gatsby-plugin-sitemapを使用することで、にsitemapを作成することができます。まず、gatsby-config.jsに次のようにプラグインを追加します。

インストール

npm install gatsby-plugin-sitemap

または

node 16だったので5.3.0を入れます

yarn add 'gatsby-plugin-sitemap@^5.3.0' 

[gatsby-config.js]

siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      output: '/' // 生成先をルートディレクトリに変更
    }
  }
]

yarn build
yarn serve

gatsbyが起動した時点でsitemapが自動的に生成されます。生成されたsitemapは、次のURLでアクセスできます。

http://localhost:9000/sitemap-index.xml
http://localhost:9000/sitemap-0.xml

もし、特定のページを除外したい場合は、gatsby-plugin-sitemapの設定オプションを使用することで、除外することができます。詳しくは、gatsby-plugin-sitemapのドキュメントを参照してください。

strapiとの連携

Gatsby.jsとStrapiを連携することで、サイトマップを作成することができます。

gatsbyとstrapiの連携はすでにできているものと考えてサンプルコードを記載します。

[gatsby-config.js]

siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [
  {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                siteUrl
              }
            }
            allStrapiArticle {
              edges {
                node {
                  slug
                  updatedAt(formatString: "YYYY-MM-DD")
                }
              }
            }
            allSitePage {
              nodes {
                path
              }
            }
          }
        `,
        output: "/",
        entryLimit: 45000,
        resolvePages: ({
          allSitePage: { nodes: allPages },
          allStrapiArticle: { edges: posts },
        }) => {
          const blogPosts = posts.reduce((acc, edge) => {
            const { slug, updatedAt } = edge.node
            acc[`/article/${slug}`] = { updatedAt }
            return acc
          }, {})
          return allPages.map((page) => {
            const { path } = page
            const base = { path }
            return { ...base, ...blogPosts[path] }
          })
        },
        excludes: ["/404?(.*)", "/contact", "/thanks", "/**/privacy"],
        serialize: ({ path, updatedAt }) => {
          const site = {
            url: path,
            changefreq: `weekly`,
            priority: updatedAt ? 0.7 : 0.5,
          }
          if (!updatedAt) return site

          const lastmod = { lastmod: updatedAt }
          return { ...site, ...lastmod }
        },
      },
  }
]

上記のコードはあくまでサンプルで実際に使う際にはいじる必要があると思います。