Gatsby.jsでSEO対策する方法をまとめてみた【SEOプラグインも紹介】

最近はGoogleのアルゴリズムもかなり進化しているらしく、以前のようにSEO対策で大きな成果を出すことが難しくなってきました。

Googleも「とにかくユーザーのためになるコンテンツを作るんだ！」と言っていますが、それでもnoindexやcanonical、サイトマップの作成などはGoogleに正しく情報を伝えるために大事なことは変わらないはず。

ということで、今回はプラグインの力も借りながら、できる限り最短距離でGatsbyサイトのSEOを強化する方法を紹介したいと思います。

今回紹介したい内容

プラグインを活用して基本的なSEOの設定をする方法
Gatsby Plugin Next SEOを使ってnoindexなどのSEO対応をする方法
head内にHTMLタグを追加する方法（補足）
Gatsby Plugin Next SEOを使わないときの設定方法（補足）

1 専用のプラグインで基本的なSEO設定をする
2 Gatsby Plugin Next SEOを使ったSEO設定
3 補足1：head 内にタグを追加するには
- 3.1 ページごとにタグを追加するとき
4 補足2：Gatsby Plugin Next SEO を使わないとき
5 さいごに

専用のプラグインで基本的なSEO設定をする

まずは専用のプラグインで基本的なSEO設定をする方法について見ていきましょう。

robots.txt の生成

最初に紹介したいのが、gatsby-plugin-robots-txtというプラグインを使ってrobots.txtを生成する方法です。
robots.txtファイルを使うと、クローラーに対して、クロールできる（クロールできない）ページやファイルを伝えることができます。

公式サイトgatsby-plugin-robots-txt

プラグインのインストール

まずはプラグインをインストールします。

SHELL

コピーする

npm install --save gatsby-plugin-robots-txt

gatsby-config.js の編集

gatsby-config.jsにrobots.txt生成用のコードを追加します。これで設定完了です。

コピーする

siteMetadata: {
  siteUrl: 'https://www.example.com'
},
plugins: [
  {
    resolve: 'gatsby-plugin-robots-txt',
    options: {
      host: 'https://www.example.com',
      sitemap: 'https://www.example.com/sitemap.xml',
      policy: [{ userAgent: '*', allow: '/' }]
    }
  }
]

サイトマップの生成

次に紹介したいのが、サイトマップの生成です。
サイトマップの生成は、gatsby-plugin-sitemapというGatsbyプラグインで行うと便利です。

公式サイトgatsby-plugin-sitemap

プラグインのインストール

では、プラグインをインストールしていきましょう。

SHELL

コピーする

npm i --save gatsby-plugin-sitemap

gatsby-config.js の編集

gatsby-plugin-sitemapではgatsby-config.jsで出力先に指定がなければ/sitemap.xmlに生成されます。
もし別の出力先を指定したいときや、サイトマップから除外したいページがあるときは、次のようにgatsby-config.jsを編集します。

コピーする

plugins: [
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      output: `/sitemap-path.xml`,
      exclude: [`/thanks`, `/category/*`],
    }
  },
]

サイトマップは（開発環境ではなく）本番環境で自動生成される

気をつけてほしいのが、サイトマップはproductionモードでないと自動生成されないということです。

開発環境ではそのままの状態ではサイトマップが生成されませんが、gatsby build && gatsby serveコマンドを実行すれば、ローカルPCでもサイトマップが生成されるようになります。本番サイトで生成されることになるサイトマップに問題がないか確認したいときに使うといいかもしれないですね。

サイトを PWA 化する

Gatsby では、gatsby-plugin-offlineとgatsby-plugin-manifestというプラグインを使えば簡単にサイトをPWA（Progressive Web Apps）化できます。

PWAって何？

PWA はGoogleが提唱した、ウェブサイトをスマホアプリのように使える仕組みのことです。スマホで見ると「ホーム画面に追加」と表示されます。キャッシュを利用することでオフラインでも動き、プッシュ通知などの機能も使うことができます。

プラグインのインストール

SHELL

コピーする

npm install --save gatsby-plugin-offline gatsby-plugin-manifest

gatsby-config.js の編集

コピーする

plugins: [
  `gatsby-plugin-offline`,
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `GatsbyJS`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#f7f0eb`,
      theme_color: `#a2466c`,
      display: `standalone`,
      icon: `src/images/icon.png`, // This path is relative to the root of the site.
    },
  },
]

もしプリキャッシュしたいページやService Worker用のJSファイルを使用する場合には、次のように指定することができます。

コピーする

{
  resolve: `gatsby-plugin-offline`,
  options: {
    precachePages: [`/about-us/`, `/projects/*`],
    appendScript: require.resolve(`src/custom-sw-code.js`),
  },
},

Favicon の設定

次に紹介したいのが、gatsby-plugin-manifestを使ってファビコンを設定する方法です。

公式サイトgatsby-plugin-manifest

ちなみにgatsby-plugin-manifestはgatsby-plugin-offlineと組み合わせて簡単にPWA化することができるので、せっかくファビコンを設定するなら一緒にPWAにも対応させておくのがオススメです。PWA化する方法はこちらで紹介しています。

プラグインのインストール

まずプラグインをインストールします。

SHELL

コピーする

npm install --save gatsby-plugin-manifest

画像を用意

では、ファビコンとして表示したい画像を用意しましょう。以下は注意しておきたいポイントになります。

（画像の配置場所とファイル名）

ファビコン用の画像はimages/icon.pngなど、管理しやすいディレクトリ名やファイル名をつけておきます。

（画像サイズ）

アイコンのサイズは指定しない限り 512×512 が最大サイズになるので、512×512 以下のサイズで用意しておけば大丈夫です。ブラウザでも通常は正方形のファビコンが表示されるので、特な理由がなければ正方形の画像を用意しておくといいんじゃないかと思います。

（画像のファイル形式）

ファイル形式は JPEG や PNG、WebP、TIFF、GIF、SVG を使用できます。ちなみにジェネレーターを使ったり、.ico というファイル形式に変換しなくても大丈夫です。

複数サイズのファビコンを設定するとき

もし複数サイズのファビコンを設定したい場合には、次のようにiconsオプションを追加すれば大丈夫です。

コピーする

plugins: [
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `GatsbyJS`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#f7f0eb`,
      theme_color: `#a2466c`,
      display: `standalone`,
      // Faviconの設定
      icon: `src/images/icon.png`, // This path is relative to the root of the site.
      icons: [
        {
          src: `/favicons/android-chrome-192x192.png`,
          sizes: `192x192`,
          type: `image/png`,
        },
        {
          src: `/favicons/android-chrome-512x512.png`,
          sizes: `512x512`,
          type: `image/png`,
        },
      ], // Add or remove icon sizes as desired
    },
  },
],

RSS の設定

RSS フィードについては、gatsby-plugin-feedで実装できます。

具体的な使い方については、以下のサイトの記事が分かりやすいと思います。

参考Gatsby サイトに RSS フィードを追加しました（R note）

Gatsby Plugin Next SEOを使ったSEO設定

Gatsby サイトでnoindexやcanonicalなどの設定を行うときにオススメしたいのが、Gatsby Plugin Next SEOというプラグインです。

デフォルトのGatsbyサイトでもSEOコンポーネントを使ってSEO関連の設定ができるのですが、Gatsby Plugin Next SEOの方がSEOコンポーネントよりも細かい設定ができて便利なんじゃないかと思います。

公式サイトGatsby Plugin Next SEO

※　デフォルトのSEOコンポーネントで設定を進める場合についてもこのページの下の方で紹介しています。Gatsby Plugin Next SEOを使わずに設定したいという方はこちらをご覧ください。

プラグインのインストール

SHELL

コピーする

npm install --save gatsby-plugin-next-seo react-helmet-async

基本的な使い方

では、基本的な使い方について見ていきましょう。

サイト全体のSEO設定

gatsby-config.jsファイルではGatsby Plugin Next SEO のオプションを使って、次のようにサイトの全体的なSEO設定ができます。

コピーする

plugins: [
  {
    resolve: 'gatsby-plugin-next-seo',
    options: {
      openGraph: {
        type: 'website',
        locale: 'ja_JP',
        url: 'https://www.example.com',
        site_name: 'SiteName',
      },
      twitter: {
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
      },
    },
  },
]

各コンポーネントごとの設定

gatsby-config.jsよりももう少し細かい設定やページごとの設定をするときには、Gatsby Plugin Next SEOのGatsbySeoコンポーネントを使います。

細かく説明するよりもコードを見てもらった方が分かりやすいような気がするので、まずはこちらをご覧ください。

コピーする

import React from 'react';
import { GatsbySeo } from 'gatsby-plugin-next-seo';
export default ({ children }) => (
  <>
    <GatsbySeo
      title='Using More of Config'
      description='This example uses more of the available config options.'
      canonical='https://www.canonical.ie/'
      openGraph={{
        url: 'https://www.url.ie/a',
        title: 'Open Graph Title',
        description: 'Open Graph Description',
        images: [
          {
            url: 'https://www.example.ie/og-image-01.jpg',
            width: 800,
            height: 600,
            alt: 'Og Image Alt',
          },
          {
            url: 'https://www.example.ie/og-image-02.jpg',
            width: 900,
            height: 800,
            alt: 'Og Image Alt Second',
          },
          { url: 'https://www.example.ie/og-image-03.jpg' },
          { url: 'https://www.example.ie/og-image-04.jpg' },
        ],
        site_name: 'SiteName',
      }}
      twitter={{
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
      }}
    />
    <div>{children}</div>
  </>
)

けっこう細かい設定ができますよね。
Twitterハンドルなどgatsby-config.jsで設定できる項目と重複しているところがありますが、gatsby-config.jsよりもGatsbySeoコンポーネントでの指定の方が優先して適用されます。このあたりはわりと感覚に合っているんじゃないかと思います。

noindex を設定する

noindex とは

noindexを使うと、Google などの検索エンジンに、そのページをインデックスしないようにリクエストできます。

noindex の設定方法

Google などの検索エンジンにサイトをインデックスしてほしくないときには、次のようにmetaタグを使ってhead内にnoindexディレクティブを追加します。

HTML

コピーする

<head>
  <meta name="robots" content="noindex" />
</head>

インデックスされているか確認するには

インデックスしてほしいページがちゃんとインデックスされているか確認するには、Google サーチコンソールの URL 検査（旧：Fetch as Google）を使うと便利です。詳しい確認方法については、以下のサイトが分かりやすいと思います。

参考URL 検査ツールの使い方徹底解説（うるチカラ）

ページごとに noindex を設定するとき

Gatsby Plugin Next SEO でページごとにnoindexを設定するには、GatsbySeoコンポーネントを使います。

コピーする

import React from 'react';
import { GatsbySeo } from 'gatsby-plugin-next-seo';
export default () => (
  <>
    <GatsbySeo noindex={true} />
  </>
)

これで次のような HTML が生成されます。

通常のrobtsの指定と一緒にgooglebotが指定されていたり、contentの中もnoindexとfollowが指定されていますね。

HTML

コピーする

<meta name="robots" content="noindex,follow">
<meta name="googlebot" content="noindex,follow">

サイト全体に noindex を設定するとき

では、サイト全体に noindex を設定する方法についても確認していきましょう。

サイト全体を noindex にするには、gatsby-config.jsで~~タイプするのが嫌になる~~dangerouslySetAllPagesToNoIndexオプションを使います。

コピーする

plugins: [
  {
    resolve: "gatsby-plugin-next-seo",
    options: {
      dangerouslySetAllPagesToNoIndex: true,
    },
  },
]

ページごとにnoindexを設定するとき

ページごとにnoindexを設定するときには、GatsbySeoコンポーネントを使って設定することができます。

コピーする

import { GatsbySeo } from 'gatsby-plugin-next-seo';
export default () => (
  <>
    <GatsbySeo noindex={false} />
  </>
)

※ このあたりは好みになりますが、Layoutのような共通コンポーネントに noindex を設定する方法でも、dangerouslySetAllPagesToNoIndexを使わずにサイト全体に noindex をかけやすいんじゃないかと思います。

nofollow を設定する

nofollowについても、noindexと同じように Gatsby Plugin Next SEO で設定することができます。

nofollow とは

nofollowは、検索エンジンのクローラーに対して、リンク先をクロールしないように指示できます。掲示板やコメント内のリンクのように、信頼できないコンテンツがあるときに使います。

サイト全体に nofollow を設定するとき

サイト全体に nofollow を設定するには、noindexのときと同じようにgatsby-config.jsでdangerouslySetAllPagesToNoFollowをtrueにします。

コピーする

plugins: [
  {
    resolve: "gatsby-plugin-next-seo",
    options: {
      dangerouslySetAllPagesToNoFollow: true,
    },
  },
]

ページごとに nofollow を設定するとき

ページごとにnofollowを設定する方法についても、noindexと同じようにGatsbySeoコンポーネントでページごとの設定ができます。

コピーする

import React from 'react';
import { GatsbySeo } from 'gatsby-plugin-next-seo';
export default () => (
  <>
    <GatsbySeo nofollow={true} />
  </>
)

このとき生成される HTML はこちらになります。

HTML

コピーする

<meta name="robots" content="index,nofollow">
<meta name="googlebot" content="index,nofollow">

canonical を設定する

Gatsby Plugin Next SEOを使った設定の最後に紹介したいのは、重複コンテンツ対策で重要なcanonicalです。

canonical とは

名前からしてややこしそうな canonical ですが、低評価からページを守るような使い方ができます。canonical は検索エンジンに重複ページと認識されることを避けるために<link rel="canonical" href="..." />のように使います。

canonical が必要になるケース

たとえば通販サイトでは、色違いの商品のようにページが別々でも内容が似ていることありますよね。そういった場合、何も設定しないと重複コンテンツとしてページの評価を下げられてしまうことがあります。
ユーザーの利便性を考えてちゃんと運用しているのに評価を下げられてはたまりませんし、正しい評価をされているとも言えないですよね。このようなときに canonical が役に立ちます。

参考重複した URL を統合する(Google Search Console ヘルプ)

canonical の使い方

canonical はheadタグの中で正規化させたい URL を指定します。
※ hrefには相対パスではなく「https://example.com」のような絶対パスで指定してください。

HTML

コピーする

<head>
  <link rel="canonical" href="https://example.com/dresses/green-dresses" />
</head>

評価対象にしたいページがモバイル専用ページのときには、rel="alternate" リンクを追加します。

HTML

コピーする

<head>
  <link rel="alternate" media="only screen and (max-width: 640px)"  href="http://m.example.com/dresses/green-dresses" />
</head>

canonical を使うときの注意点

canonical を使うときに非常に間違いやすいのが、canonical を使うときには、評価対象にしたいページも含めて、重複ページすべてに共通の URL を指定するということです。
たとえば色違いの 5 色の服を紹介するページがあるとき、赤を評価対象にするときでも、赤も含めた 5 色すべてに canonical を設定することが必要になります。

ちなみに、canonicalを設定すれば、コンテンツが重複しているからといって、評価対象にしたいページ以外を noindex にする必要はありません。

共通コンポーネントに設定を追加

サイト全体に canonical 設定をするときも、それぞれのページで canonical を設定するときも、Layoutのような共通のコンポーネントに次のようなコードを追加します。

コピーする

import React from 'react';
import { GatsbySeo } from 'gatsby-plugin-next-seo';
export default () => (
  <>
    <GatsbySeo
      canonical='https://www.example.com'
    />
  </>
)

補足1：head 内にタグを追加するには

ここからは補足的な内容だけど、Gatsbyサイトを運用するときに知っておくときっと役に立つ内容になります。

ウェブサイトを開発したり運用していると、head内にタグを追加したいことありますよね。そういった場合に便利なのがreact-helmetです。

ページごとにタグを追加するとき

使い方は簡単で、Helmetコンポーネントでhead内に追加したいタグを囲んであげるだけです。scriptタグ以外にも、linkやmetaなども同じようにhead内に追加できます。

コピーする

import { Helmet } from "react-helmet"
export default () => {
  return (
    <>
      <Helmet>
        <script>...</script>
      </Helmet>
    </>
  )
}

lang属性などHTML属性を追加したいときには、次のように指定します。

コピーする

import React from 'react';
import { Helmet } from "react-helmet"
export default () => (
  <>
    <Helmet
      htmlAttributes={{
        lang: "ja",
      }}
    />
  </>
)

補足2：Gatsby Plugin Next SEO を使わないとき

先ほどはGatsby Plugin Next SEOを使ってnoindexの設定方法などを紹介しましたが、Gatsby Plugin Next SEO を使わずに設定する方法についても紹介しておきたいと思います。

サイトの lang 属性を”ja”にする

Gatsby Plugin Next SEOではlocale: 'ja_JP'で設定することができましたが、Gatsby Plugin Next SEOを使わない場合にはSEOコンポーネントで設定すると便利です。上で紹介したように、react-helmetでも設定できます。

SEO コンポーネントを使うとき

SEOコンポーネントを使ってlang属性を変更するとき、src/components/seo.jsファイルのdefaultPropsを次のように変更します。

コピーする

SEO.defaultProps = {
  lang: `ja`, // lang: `en` → `ja` に変更
  meta: [],
  description: ``,
}

これでlang属性がjaになりました。

HTML

コピーする

<html lang="ja" data-react-helmet="lang">
...
</html>

noindex を追加する

次はGatsby Plugin Next SEOを使わずにnoindexを設定する方法です。

ページごとに noindex を設定するとき

ページごとに noindex を設定したいときには、次のようにSEOコンポーネントのmeta属性を使うのが便利です。

コピーする

<SEO
  meta={[
    { name: "robots", content: "noindex, follow" },
    { name: "googlebot", content: "noindex, follow" },
  ]}
/>

生成される HTML は次のようになります。

HTML

コピーする

<meta name="robots" content="noindex, follow" data-react-helmet="true">
<meta name="googlebot" content="noindex, follow" data-react-helmet="true">

ちなみにTypeScriptでも同じ方法でSEOコンポーネントを使うことができます。

サイト全体を noindex にするとき

サイト全体にnoindexを設定する場合には、Layoutのような共通コンポーネントの中でHelmetコンポーネントを使えば簡単にサイト全体をnoindexにできます。

コピーする

import { Helmet } from "react-helmet"
export default () => {
  return (
    <>
      <Helmet>
        <meta name="robots" content="noindex, follow" />
        <meta name="googlebot" content="noindex, follow" />
      </Helmet>
    </>
  )
}

canonical を設定する

最後にGatsby Plugin Next SEO を使わずに canonical を設定する方法についても見ていきましょう。

canonicalを設定する場合にも、react-helmetを使うのが便利です。下のようにlinkタグをHelmetコンポーネントで囲んであげれば、head内にcanonicalの設定が追加されます。

コピーする

import { Helmet } from "react-helmet"
export default () => (
  <>
    <Helmet>
      <link rel="canonical" href="https://example.com/dresses/green-dresses" />
    </Helmet>
  </>
)

さいごに

今回はGatsby.jsのSEO設定についてまとめてみました。

SEOコンポーネントを使った設定も紹介してきましたが、やっぱりプラグイン便利ですね。プラグインについてはこちらの記事でまとめているので、よかったらこちらもご覧ください。

2020年8月28日Gatsby.jsのおすすめプラグインをまとめてみた

それでは今回はこのあたりで。最後まで閲覧ありがとうございました。

専用のプラグインで基本的なSEO設定をする

robots.txt の生成

プラグインのインストール

gatsby-config.js の編集

サイトマップの生成

プラグインのインストール

gatsby-config.js の編集

サイトマップは（開発環境ではなく）本番環境で自動生成される

サイトを PWA 化する

プラグインのインストール

gatsby-config.js の編集

Favicon の設定

プラグインのインストール

画像を用意

（画像の配置場所とファイル名）

（画像サイズ）

（画像のファイル形式）

複数サイズのファビコンを設定するとき

RSS の設定

Gatsby Plugin Next SEOを使ったSEO設定

プラグインのインストール

基本的な使い方

サイト全体のSEO設定

各コンポーネントごとの設定

noindex を設定する

noindex とは

noindex の設定方法

インデックスされているか確認するには

ページごとに noindex を設定するとき

サイト全体に noindex を設定するとき

ページごとにnoindexを設定するとき

nofollow を設定する

nofollow とは

サイト全体に nofollow を設定するとき

ページごとに nofollow を設定するとき

canonical を設定する

canonical とは

canonical が必要になるケース

canonical の使い方

canonical を使うときの注意点

共通コンポーネントに設定を追加

補足1：head 内にタグを追加するには

ページごとにタグを追加するとき

補足2：Gatsby Plugin Next SEO を使わないとき

サイトの lang 属性を”ja”にする

SEO コンポーネントを使うとき

noindex を追加する

ページごとに noindex を設定するとき

サイト全体を noindex にするとき

canonical を設定する

さいごに

関連記事

Alpine.jsの基本的なディレクティブの使い方

Gatsby.jsって何？知っておきたい基礎知識やメリットを徹底解説

Alpine.jsでシンプルなカウンターと展開可能なパネルを作ってみた

高性能サーバーNetlifyの知っておきたい便利な機能まとめ

無料でも使える高機能サーバーNetlifyって何？基本情報から公開までの流れを解説

【ZEIT Now】Gatsbyサイトを無料サーバーVercelで公開する方法を徹底解説