🔎

Gatsby製ブログのSEO対策

2021/02/19に公開

Gatsby.js

はじめに

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,
      },
    },
]