Gatsbyがはじめての方は下記の記事も参考にしてください。

React製静的サイトジェネレーターGatsby使ってみた

インストール

下記コマンドでプラグインをインストールします。
react-helmetはReactのコンポーネントですが、それをGatsbyのプラグインで利用できるようにしたのがgatsby-plugin-react-helmetですね。

$ npm install --save gatsby-plugin-react-helmet react-helmet

プロジェクトルートにあるgatsby-config.jsを編集してこのプラグインを使えるようにします。

gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-react-helmet`]
}

これで準備完了。

使ってみる

試しにindexページに設定してみましょう。

page/index.js
import React from 'react'
import Helmet from "react-helmet"


export default () => (
  <div>
    <Helmet
      htmlAttributes={{
        lang: 'ja',
      }}
      title="Gastbyサンプル"
      meta={[
        { name: 'description', content: 'このページはGastbyサンプルです。' }
      ]}
    />
  </div>
)

Helmetの部分はこんな感じにタグっぽく書いてもOKです。

<Helmet>
  <title>Gastbyサンプル</title>
  <meta name="description" content="このページはGastbyサンプルです。" />
  <html lang="ja" />
</Helmet>

外部コンポーネント化

head要素は各ページで共通で使用する部分もあるのでHelmetの部分は外部コンポーネントにした方がいいですね。
例えばsrc/components/head.jsを下記のように作成してみます。

src/components/head.js
import React from 'react'
import Helmet from "react-helmet"


export default (props) => (
  <Helmet
    htmlAttributes={{
      lang: 'ja',
    }}
    title={ (props.title ? props.title + ' | ' : '') + "サイトタイトル"  }
    meta={[
      {
        name: 'description',
        content: props.description || 'Gastbyサンプル'
      }
    ]}
  />
)

あとはコンポーネントをインポートして配置するだけで使えます。
index.jsを下記のように編集してみましょう。

src/page/index.js
import React from 'react'
import Head from '../components/head'


export default () => (
  <div>
    <Head />
  </div>
)

下層ページではpropsを設定して、細かく調節できます。

<Head
  title="自己紹介"
  description="自己紹介ページです。"
/>

以上、react-helmetの基本的な使い方がわかったと思いますが、react-helmetはスターターデーマによっては最初から組み込まれているのがあるので、基本的にはそちらを使用した方がいいかと思います。

gatsby-plugin-react-helmet