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