React Helmet を利用する SEO コンポーネントを用意し、それを各ページに追加すればいい。 Tutorial の Part 8 にもそう書いてある。

https://www.gatsbyjs.org/tutorial/part-eight/

ページのタイトルと言っても、

• Web ページの集合体としてのタイトル：ここでいう "Momozowy"
• URL で一意に決まるページのタイトル：ここでいう "Gatsby でページにタイトルを付けるには React Helmet を使う"

の二つがあるだろう。

チュートリアル通りに実装していけば、 前者は gatsby-config.js 内の siteMetaData: {title: Momozowy} に、 後者は各ページの SEO タグの title 属性として指定すれば、 あとはうまいことやってくれる。安心して身を任せればいい。

余談

Gatsby でプロジェクトの構築を始めたとき、Tutorial の Part 1 と 2 に沿って進めていった。 そして完全に理解した（全然わかってない）私は、 Part 7 まで斜め読みし必要な情報を得ていった。 最後の Part 8、そのタイトル "Preparing a Site to Go Live" を 見ても、 ここに有益な情報が書いてあるとは思いもしなかった。

一昔前であれば、いたるところに「工事中」の文字を表示していたかもしれないほど 少ないコンテンツではあったが、全体の体裁を整えたのち、いよいよ公開に踏み切ろうとした。 しかし、いまだにタイトルを設定していないことに気づいたのだ。

タイトルが工事中なのはまずい。慌てて公式ドキュメントを検索したのだが、どこにも情報がない。 Gatsby 全くわからない。

結局、Tutorial の Part 8、"Add page metadata" に目的の情報を見つけたわけだが、 それだけでなく、まさしく "Keep making it better" のための様々な情報を見つけることができた。 おかげで、Lighthouse の評価において SEO のスコアを 100 にまで上げることができたし、 彼女ができて就職も決まった。

以上が、「完全に理解したと言っていいのは Tutorial を全て読んでから」だと痛感した話である。 チョットデキルようになるのはいつだろうか。