GatsbyJSに robots.txtを導入する方法

GatsbyJSに robots.txtを導入する方法

概要

Webサイトのコンテンツの中には、検索エンジンにインデックスしてもらいたくないページもあります。例えば、デモページなどは、インデックスの必要がないどころか、クロールしてもらう必要すらありません。(デモは、ただのデモですから)

このようなページについては、検索エンジンへ「クロールしなくても良いですよ」と伝えておきたいところです。そのほうが、お互いのためになります。

方法としては、Googleの公式ドキュメントに書いてある通り、「robots.txtを作成しておく」と良さそうです。robots.txtを作成すると、クロールしてほしいページとクロールしてほしくないページを検索エンジンへ伝えることができます。

Webサイトを GatsbyJSで制作しているのであれば、プラグイン gatsby-plugin-robots-txtを導入すればうまいこと robots.txtを生成できます。公式のドキュメント「gatsby-plugin-robots-txt | Gatsby」を参考にして試してみましょう。

開発環境

  • Windows10
  • Node.js: 14.18.0
  • npm: 6.14.15
  • gatsby-cli: 3.14.1
  • GatsbyJS: 4.4.0
  • インストール済みのプラグイン
    • gatsby-plugin-image
    • gatsby-plugin-sharp
    • gatsby-source-filesystem
    • gatsby-plugin-mdx
    • @mdx-js/mdx
    • @mdx-js/react
    • gatsby-transformer-sharp
    • gatsby-remark-prismjs
    • prismjs
    • gatsby-remark-external-links
    • gatsby-remark-code-titles
    • gatsby-plugin-sitemap

作業前の注意事項

  • robots.txtを導入する前に、サイトマップを作成しておくほうが良いようです。
  • 作業手順を参考にしていただいてかまいませんが、何か問題があっても責任を負えません。利用規約をご覧になり、自己責任でお願いします。

作業手順

1:プラグインをインストールする

  • コマンドラインで、プラグイン gatsby-plugin-robots-txtをインストールします。
$ npm install gatsby-plugin-robots-txt

2:gatsby-config.jsに設定を追加する

  • 公式ドキュメント「gatsby-plugin-robots-txt | Gatsby」を参考にして、gatsby-config.jsファイルの設定を行いましょう。
  • siteUrlには、もちろん「あなたが制作しいている Webサイトの URL」を入力します。
  • disallowに、クロールしなくても良いディレクトリを指定します。例えば、デモページを置いてある場所が「demo」であれば、「/demo」と書きます。また、複数ある場合は、配列の形で引数を渡すことが可能です。
gatsby-config.js
module.exports = {
  siteMetadata: {
    siteUrl: "https://gatsbyjs-test.com",
  },
  plugins: [
    {
      resolve: `gatsby-plugin-robots-txt`,
      options: {
        policy: [{
          userAgent: '*',
          allow: '/',
          disallow: '/demo',
        }],
      },
    },
  ],
};

これまでの gatsby-config.jsファイルの設定とあわせると、次のようになります。

gatsby-config.js
module.exports = {
  pathPrefix: "/gatsby-test",
  siteMetadata: {
    siteName: "(あなたのWebサイト名)",
    siteSubTitle: "(Webサイトのサブタイトル)",
    siteDescription: "(Webサイトの説明)",
    siteUrl: "https://gatsbyjs-test.com",
    siteOgpImage: "/(WebサイトのOGP画像のファイル名)",
    siteAuthor: "(Webサイトの著者名)",
  },
  plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `blog`,
        path: `${__dirname}/blog`,
      }
    },
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        gatsbyRemarkPlugins: [
          "gatsby-remark-code-titles",
          "gatsby-remark-prismjs",
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: "_blank",
              rel: "nofollow noreferrer"
            }
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 700,
            },
          },
        ],
      },
    },
    "gatsby-transformer-sharp",
    "gatsby-plugin-react-helmet",
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          "G-**********", // Google Analytics / GA
        ],
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-robots-txt`,
      options: {
        policy: [{
          userAgent: '*',
          allow: '/',
          disallow: '/demo',
        }],
      },
    },
  ],
}

4:エラーが出ないことを確認する

  • エラー無く起動できるか、「gatsby build」して、「gatsby serve」を試してみましょう。(※:公式ドキュメントには書かれていませんが、「gatsby develop」ではなく「gatsby build」のほうが良いでしょう)
  • Webブラウザで http://localhost:9000/へアクセスし、ざっと閲覧してみて挙動に問題がないことを確認します。
$ gatsby build
$ gatsby serve

5:robots.txtを確認する

  • 「gatsby build」したことで、ローカルの publicディレクトリ下に「robots.txt」が生成されているはずです。開いて確認してみましょう。
  • おおよそ、次のように記述されているはずです。もちろん、https://gatsbyjs-test.comの部分は「あなたが制作しいている Webサイトの URL」が入ります。
User-agent: *
Allow: /
Disallow: /demo
Sitemap: https://gatsbyjs-test.com/sitemap/sitemap-index.xml
Host: https://gatsbyjs-test.com

6:デプロイする

  • 本番用のサーバへ、デプロイします。(※:利用しているホスティングサービスによって方法が違うかもしれません。状況にあわせて行いましょう)
$ npm run deploy

補足:gatsby-plugin-robots-txtのオプションについて

host

  • hostには、あなたの WebサイトのURLを指定します。
  • デフォルトでは、siteMetadataの siteUrlが設定されます。つまり、すでに siteUrlを入力している場合は、指定する必要がありません。
  • siteMetadataで siteUrlを指定していない場合は、良い機会なので、siteUrlを指定しておくと良いでしょう。

sitemap

  • sitemapには、サイトマップが作成される場所を指定します。
  • GatsbyJSのバージョンが 4以降であれば、サイトマップは「https://(あなたの Webサイトのドメイン)/sitemap/sitemap-index.xml」に設置されます。gatsby-config.jsでオプションを指定しないでおけば、デフォルト値が適用されるので、指定する必要はありません。
  • 古いバージョンの GatsbyJSの場合には、生成されるサイトマップの場所が異なることがあります。おそらく、「https://(あなたの Webサイトのドメイン)/sitemap.xml」に生成されます。理由があって古いバージョンを使用している場合は、ここで指定しておく必要があります。

policy

policyには、主に次の指定をします。

User-agent

  • User-agent(ユーザーエージェント)には、検索エンジン クローラのタイプを指定します。
  • 今回のように、すべての検索エンジン クローラを対象にしたい場合は、「*(アスタリスク)」を書きます。
  • Googleだけを指定したければ、「Googlebot」と書きます。

Allow

  • Allowには、クロールしてほしいディレクトリを指定します。
  • すべてのディレクトリを対象にしたい場合は、「/(スラッシュ)」を書きます。

Disallow

  • Disallowには、クロールしてほしくない(除外してほしい)ディレクトリを指定します。
  • 今回の場合であればデモページなので、「/demo」と書きました。
  • Webサイトによっては、例えば「ログインページ(/login)」、「管理者ページ(/admin)」なども書く場合があるかもしれません。

参考資料