はじめに

Gatsbyを用いて技術ブログを作ったのは良いものの、数ヶ月の間SEO対策はほったらかしにしていました。最近このブログに色々SEO対策を施したので、その方法を紹介したいと思います。

ちなみにこのブログのstarterはgatsy-starter-hello-worldです。

SEOとは

SEOとはSearch Engine Optimizationの略で日本語にすると「検索エンジン最適化」となります。GoogleやYahooなどの検索エンジンで記事が上位に表示されるようにする対策することをいいます。

Gatsbyは静的なHTMLサイトのSEO対策とは違ったアプローチが必要です。それ故に「SPAはSEOに弱い」などと言われていたのですが、GatsbyのSEO系のプラグインは充実していて、それらを使えば簡単に実装することができます。

Sitemapの生成

Sitemapは検索エンジンのクローラーがサイト構造を読み取るのを助けます。

プラグインにgatsby-plugin-sitemapが用意されているので、これをインストールします。

$ npm i gatsby-plugin-sitemap

gatsby-config.jsにてサイトのURLをなければ追加し、plugins配列に先ほどインストールしたものを追加します。

title=gastby-config.js

siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]

きちんとSitemapが作成されたかどうかはhttps://example.com/sitemap.xml にアクセスすることで確認できます。

またSitemapはSearch ConsoleでGoogleに提出しましょう。

headのmetaタグの設定

React-Helmetを用いて行います。Starterによってはもともと入っているものもあると思いますがなければインストールしてください。React-Helmetはhead内のmetaタグを設定するのに使います。

このブログの場合はHeadというmeta情報を管理するコンポーネントを作成してそこで色々設定しています。

今回はこのコンポーネントで

  1. meta設定
  2. Twitterカードの設定
  3. 言語を日本語に設定

を行ます。

完成したコードはこちらになります。下でさらに詳しい解説をします。

title=head.js

const Head = ({ title, description, lang, meta }) => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          siteUrl
          description
        }
      }
    }
  `)
  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={`${title} | ${data.site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: `${data.site.siteMetadata.description}`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: data.site.siteMetadata.author,
        },
        {
          property: `og:image`,
          content: `${data.site.siteMetadata.siteUrl}/images/tube.png`,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: `${data.site.siteMetadata.description}`,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `thumbnail`,
          content: `${data.site.siteMetadata.siteUrl}/images/tube.png`,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: `${data.site.siteMetadata.description}`,
        },
        {
          property: `og:type`,
          content: `website`,
        },
      ]}
    />
  )
}

サイトの言語の設定

サイトの言語を日本語に設定します。HelmetにhtmlAttribute=langを設定して、defaultPropsをjaにします。

title=head.js

//..省略
    <Helmet
      htmlAttributes={{
        lang,
      }}

  //..省略

    Head.defaultProps = {
      lang: `ja`,
      meta: [],
      description: ``,
}

Metaの設定

autherやsiteTitleなどの情報はgatsby-config.jsに入れておいて、そこから取り出せるようにしておきます。

title=gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "k-log",
    author: "Kebeb",
    description: `Kebebの技術ブログ。主にMERN stackの学習の記録`,
    siteUrl: `https://jujekebab.com/`,
  },

headコンポーネントのgraphQLからアクセスして設定します。

title=gatsby-config.js

        {
          property: `og:description`,
          content: `${data.site.siteMetadata.description}`,
        },

Twitterカードの設定

TwitterなどのSNSで共有した時に、いい感じのカードが表示されるようにします。
og:image,twitter:title,twitter:creator,twitter:cardさえ設定しておけば最低限の見た目にはなります。

最低限の見た目の例

作成したカードはTwitter Card Validatorを用いて下見することができます。

Urlの正規化

Canonical属性を指定します。これもプラグインで簡単に実装できます。

gatsby-plugin-canonical-urls

npm i gatsby-plugin-canonical-urlsして、gatsby-config.jsに追加するだけです。オプションでサイトのURLを追加しましょう。

title=gatsby-config.js

plugins: [
    {
      resolve: `gatsby-plugin-canonical-urls`,
      options: {
        siteUrl: `https://jujekebab.com`,
        stripQueryString: true,
      },
    },
]

robot.txt の設置

クローラーに読み取ってほしいページと読み取ってほしくないページを伝えます。

こちらもgatsby-plugin-robots-txtというプラグインが用意されているので、これを使います。

これもインストールしてgatsby-config.jsに追加するだけです。

Google Search コンソールでの登録

Google Analyticsを登録しているなら、そこからGoogle search Consoleへリンクすると簡単だと思います。

LightHouseでも高得点

LighHouseでもSEOは100点でした。あとはコンテンツの質だけだ！

まとめ

こういう目に見えない細かい作業をすると、はてなブログなどの無料ブログサイトの有り難みがわかります。もしGatsbyを使っていなかったらと思うとどれだけの作業量になるのか…。

構造化データの追加だけはやっていなかったので次回はそれについて紹介したいと思います。

参考

WPからGatsbyへ移行時に気を付けたいSEO対策一覧と導入方法

Gatsbyの検索エンジン最適化（SEO）の全まとめ

【2021年版】Google サーチコンソールの使い方。ウェブサイト改善のための活用術！

Gatsby: SEO対策（最低限やっておくこと）