【GatsbyJS製ブログ】これだけ！GatsbyにおけるSEO設定一覧！

2022年8月19日2023年12月5日

ブログをやっている人が「SEO」と聞くと、キーワード選定や、見出しタグにキーワードを入れ込んだり、という「検索上位獲得のための手法」が思い浮かびます。

ですが、とりあえずそういう「検索上位獲得のコツ」は置いておきます。

そもそも、そのキーワード（が入ったタイトルなど）をクローラーが読み取るには、メタタグの設定を上手くしておかなければいけません。

WordPressなどでも、ディスクリプションやOGPの設定をすると思います。要は、それをGatsbyではどうするんだ？という話です。だいたいGatsbyのSEOの話はこちらの設定方法が多いです。

キーワードの選定方法などのテクニック的なものは置いておいて、SEOにおいて、どんな項目を設定すればどんな効果が得られるのか、とそれをGatsbyではどうするのか？を整理していきたいと思います。

この記事はこんな人にオススメ

GatsbyでSEOの設定はどうするの？

なにを設定すべき？

まず、Gatsbyで言うところのSEO設定のメインは、<head>タグの中身<meta>タグを上手く設定する、と思っておいてください。ただ、その他の細かい設定もあるので、一覧にまとめておきます。

GatsbyのSEOで設定しておくべき項目は以下の通りです。

1．sitemapの設定

2．robots.txtの設定

3．ファビコンの設定（gatsby-plugin-manifestで設定。詳しくはこちら）

4．gatsby-plugin-react-helmet経由で<head>内の<meta>タグ設定

文字のエンコード
タイトル
メタディスクリプション
OGP情報
Twitter情報

ファビコンはSEO対策と言えるかわかりませんが、「ブログの顔」です。「認知に貢献する」という意味で、ついでに設定してしまいましょう。

ということで、以下の画像を準備しておいてください。

メイン画像（512px×512pxがオススメ。こちらの設定で、これがファビコンにもなる。）

それでは一つずつ設定していきましょう。

sitemapの設定

サーチコンソールにお知らせするためのxmlファイルを作ります。プラグインを使えば一発で出力できるようになります。楽ちん。

いつも通りインストール→gatsby-config.jsで設定するだけ。

$ yarn add gatsby-plugin-sitemap

module.exports = {
…
  plugins: [
    …
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        output: `/`, //サイトマップをルートディレクトリ直下に出力するようなオプション
      },
    },
    …
  ],
}

sitemapが作成されるのですが、デフォルトだと/sitemap/sitemap-0.xml、/sitemap/sitemap-index.xmlに作成されるはずです。

サーチコンソールに上手く登録できればこれでも問題はないのですが、ルートディレクトリ直下じゃないと上手く認識してくれないこともあります。ですので、オプションをつけてルートディレクトリ直下に出力するようにしています。

robots.txtの設定

こちらもいつも通りインストール→gatsby-config.jsで設定するだけです。

$ yarn add gatsby-plugin-robots-txt

module.exports = {
…
  plugins: [
    …
    `gatsby-plugin-robots-txt`
    …
  ],
}

ファビコンの設定

ファビコンの設定だけなら、gatsby-config.jsのsiteMetadataのiconにファビコン画像を設定してあげればOKです。

module.exports = {
  siteMetadata: {
    title: `ブログのタイトルだよ`,
    author: {
      name: `書いてる人の名前`,
      summary: `どんな人？`,
    },
    description: `ブログのディスクリプション（概要）だよ`,
    siteUrl: `${siteUrl}`,　//今回は定数として設定しけど、直接書いてもOK
    icon: `/whitebacklogo.jpg`,//←ココ。画像指定するだけ。
  },
  …
}

ですが、ついでなので、gatsby-plugin-manifestでPWA対応をしつつ、その中でファビコンを設定します。こちらの記事をご覧ください。

gatsby-plugin-react-helmet経由で<head>内の<meta>タグ設定

ここが本番です。gatsby-plugin-react-helmetを使って、<head>内にある<meta>タグを設定していきます。

gatsby-plugin-react-helmetとreact-helmetのインストール

gatsby-starter-blogを使っている場合はインストールされていることもあります。確認してインストールされていなかったらインストールしてください。

いつものようにプラグインをインストールして、gatsby-config.jsに設定しておきます。

$ yarn add gatsby-plugin-react-helmet react-helmet

module.exports = {
…
  plugins: [
    …
    `gatsby-plugin-react-helmet`,
    …
  ],
}

gatsby-config.jsの設定

ベースになるsiteMetadataをgatsby-config.jsに書いていきます。

const siteName = `〇〇` //ブログ名
const siteUrl = `https://〇〇` //サイトのURL

module.exports = {
  siteMetadata: {
    title: `ブログのタイトルだよ`,
    author: {
      name: `書いてる人の名前`,
      summary: `どんな人？`,
    },
    description: `ブログのディスクリプション（概要）だよ`,
    siteUrl: `${siteUrl}`,　//今回は定数として設定しけど、直接書いてもOK
    image: `/〇〇.jpg`,　//あとでサイトのOGPの画像として使う
    social: {
      twitter: `〇〇`,　//TwitterID。これもあとでTwitter周りのメタタグとして使う
    },
  },
  …
}

<meta>タグの設定

「SEOの設定を読み込んで、各ページごとにreact-helmet経由で<head>内の<meta>タグを記述していく」

という流れを、starter-blogのseo.jsを参考に書いていきます。

クマ

先にドカッとseo.jsを載せておきます！

基本的に以下の情報をmetaタグにうまいこと指定します。

言語（デフォルトで日本語）
ページタイトル
ページディスクリプション
OGP情報（SNSとかでシェアされたときに、URLを貼り付けただけで画像やタイトルが出てきますよね？あれの設定です）
ビューポート（レスポンシブ対応のため。もはやレスポンシブ対応は当たり前、やってなかったら「お前のとこ、レスポンシブ対応してねーのかよ…」という評価を受ける）

import React from 'react'
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const Seo = ({ lang, meta, title, description, ogpimage }) => {
//seo.jsを使うときに、lang, meta, title, description, ogpimageをもらいますが、
//基本的にtitle, description, ogpimageをもらってきます。lang, metaは初期値で十分。
  const { site } = useStaticQuery( //GraphQLを使って、siteMetadataの情報を拾ってきます。
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            siteUrl
            image
            social {
              twitter
            }
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description 
  //↑metaDescriptionにdescriptionをもらっていれば、description、そうでなければ、siteMetadataのdescriptionを代入
  const defaultTitle = site.siteMetadata?.title
  //↑defaultTitleにはsiteMetadataのタイトルを入れます。
  const ogpimagesrc = `${site.siteMetadata.siteUrl}${ogpimage || site.siteMetadata?.image}`
  //↑ogpimagesrcはsiteMetadataからとってきたURL＋（もらってきたogpimage or isteMetadataのimage）で、OGP画像のURLを作ります。

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null} 
      //↑どうやら％sにはtitleが入るようです。titleTemplateを使うと、この形でtitleを出力してくれます。
      meta={[
      //以下、配列でディスクリプション、OGP情報、Twitter情報、viewportを設定します。
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: `og:image`,
          content: ogpimagesrc,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.social?.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
        {
          name: `twitter:image`,
          content: ogpimagesrc,
        },
        {
          name: `viewport`,
          content: `width=device-width,initial-scale=1.0`,
        },
      ].concat(meta)}
    />
  )
}

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

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo

基本的な動作としては、それぞれのページでtitleとかdiscriptionとかを変えたいので、

① このseo.jsを使うときに「lang、meta、title、description、ogpimage」をもらいます。lang、metaはそれぞれ必要なときに「言語の変更」「metaタグの追加」があれば、もらいます。デフォルトでは「日本語」「追加metaタグなし」です。titleはページタイトル、descriptionはページディスクリプション、ogpimageはOGP画像ですので、基本的にseo.jsを使うときに情報をもらいます。

② GraphQLを使ってsiteMetadataからサイトの基本情報を拾っておきます。サイトのタイトル、ディスクリプション、OGP用の画像を取得しておきます。

③ ①と②を比較して、「①がなければ②の情報」もしくは「①と②の情報を組み合わせて」metaタグを記述していきます。

使い方

blog-post.jsなど、ブログページを作るときに以下のようにして使います。

//GraphQLで記事のタイトル、ディスクリプション、OGP画像（アイキャッチなど）を引っ張ってきて、
… 
  <Seo
    title={post.frontmatter.title}
    description={post.frontmatter.description || post.excerpt}
    ogpimage = {ogpimage} 
  />
…