GatsbyJSで、robots.txtを使い、sitemapを設定する。

2020-08-16

こんにちは、0371です。

「そういえば、ブログにはsitemapが必要だったなあ」と気がついたので、設定することにしました。
robots.txtでクローラーに伝える方法でやっていきます。

必要なもの

1. GatsbyJSを使用したサイト
2. ターミナル
3. やる気、元気、少しの時間

設定方法

gatsby-plugin-sitemap, gatsby-plugin-robots-txtをインストールします。

yarn add gatsby-plugin-sitemap gatsby-plugin-robots-txt

次に、gatsby-config.jsの中を変えていきます。
インストールしたgatsby-plugin-sitemap, gatsby-plugin-robots-txtの追加。
そして、siteMetadataにsiteUrlを追加しましょう。

module.exports = {
/* Your site config here */
  siteMetadata: {
    siteUrl: `https://0371.blog`,
  },
  plugins: [
    `gatsby-plugin-sitemap`,
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        host: 'https://0371.blog',
        sitemap: 'https://0371.blog/sitemap.xml',
        policy: [{ userAgent: '*', allow: '/' }]
      }
    },
  ],
}
// 他の設定は省略しています。

これで、gatsby build && gatsby serve を実行してみましょう。
publicディレクトリにrobots.txt, sitemap.xmlが生成されていたら成功です。
あとはサイトをデプロイすると、少し期間を置いてからクローラーが見つけてくれます。

参考

gatsby-plugin-sitemap
"https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/"

gatsby-plugin-robots-txt
"https://www.gatsbyjs.com/plugins/gatsby-plugin-robots-txt/"

感想

俺もネットの海を穏やかに漂うクローラーになりたい。