GatsbyJSで作ったブログのページタイトル生成処理とSEOについて

公開日: 2020年06月01日最終更新日: 2022年01月28日

ページタイトルが "Home | 明日の自分のために" となっているのが気になりました。なんでトップページにHomeとついているのか、どこでつけているのか。トップページにHomeという文字列はいらないんじゃないか。

調べてみるとどうやらSEOとして分かりやすいタイトルが仕込まれているようです。検索結果一覧に表示されるときに、どんな情報が記載されているページかひと目で分かるように"ページ名 | サイト名"となっているんですね。こういうところを気にしなくても良いのでフレームワークは楽です。
SEOについてはGoogleにスターターガイドがあります。

"node_modules/gatsby-theme-blog/src/components/posts.js"を見てみると以下のようにSEOコンポーネントが設置されています。 SEOに有用なメタデータを仕込むことができます。

const Posts = ({ location, posts, siteTitle, socialLinks }) => (
  <Layout location={location} title={siteTitle}>
    <SEO title="Home" />
    <main>
      <PostList posts={posts} />
    </main>
    <Footer socialLinks={socialLinks} />
  </Layout>
)

"node_modules\gatsby-theme-blog\src\components\seo.js"を見るとtitleTemplateで表示されるタイトル名の形式を指定しています。

...
titleTemplate={`%s | ${site.siteMetadata.title}`}
...

もしページタイトルの表示を変えたければ、上記をShadowingすればできそうです。

また、SEOはReact Helmetに以下のような情報を渡すことで実現しています。

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          name: `og:image`,
          content: image,
        },
        {
          name: `og:image:alt`,
          content: imageAltText,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:image`,
          content: image,
        },
        {
          name: `twitter:image:alt`,
          content: imageAltText,
        },
        {
          name: `twitter:card`,
          content: `summary_large_image`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ]
        .concat(
          keywords.length > 0
            ? {
                name: `keywords`,
                content: keywords.join(`, `),
              }
            : []
        )
        .concat(meta)}
    />
  )

これらの情報はサイトや記事のデータから自動的に引っ張ってきてくれます。ただし、その記事を書くのは自分自身です。特に、タイトル、キーワード、記事の書き出し、画像については、検索結果の一覧に出たときに分かりやすいものにしたほうが良いでしょう。自分はあまり気にしていませんでした……。

Search Engine Optimization (SEO) and Social Sharing Cards with Gatsbyも参考になります。