yukinaka[log]

Gatsby.js + NetlifyのBranch deploysでnoindexを付与する

NetlifyのDeploy previewsでは、Netlifyが自動でx-robots-tag: noindexを設定してくれているため、特に意識する必要はありません。

しかし、Branch deploysでは同じように設定されていないため付与したい場合、自分で<meta name="robots" content="noindex" /> をコード上に埋め込む必要があります。

私はGatsby.jsをメインで使っているため、Gastby上でどう設定したかについて記載します。

Gatsbyでhtml.jsを作成

デフォルトでmetaタグの記述などはGatsby.jsのプロジェクト上には最初になく、デフォルトの設定が使用されるようになっています。そのため、html.jsを作成して、カスタマイズできるようにする必要があります。

公式のサイトにもあるように、以下のようにhtml.jsをsrc/ に作成します。

cp .cache/default-html.js src/html.js

https://www.gatsbyjs.org/docs/custom-html/

Gatsbyでnoindexの記述をいれる

そうしたら、head内に<meta name="robots" content="noindex" /> の記述をして終わりです。

html.js
{process.env.GATSBY_ACTIVE_ENV === 'development' && (
  <meta name="robots" content="noindex" />
)}

ここでハマったのが、NODE_ENVはGatsbyの予約された環境変数になっており、process.env.NODE_ENVで分岐させてもgatsby buildのコマンドではすべてNODE_ENVはproductionになります。 ※gatsby developの場合はdevelopment

Reserved Environment Variables

そのためGATSBY_ACTIVE_ENVなど別の環境変数を使用して、条件分岐させる必要があります。

html.jsへの記述が終わったら、環境変数の設定をして終わりです。私はnetlify.tomlを使用して設定います。

netlify.toml
[context.deploy-preview.environment]
  GATSBY_ACTIVE_ENV = "development"
   ...
[context.branch-deploy.environment]
  GATSBY_ACTIVE_ENV = "development"
  ...

File-based configuration

これでproduction buildではnoindexの記述はなく、Branch deploysにはnoindexが付与されるようになります。

  • gatsby
© 2020