最近はGoogleのアルゴリズムもかなり進化しているらしく、以前のようにSEO対策で大きな成果を出すことが難しくなってきました。
Googleも「とにかくユーザーのためになるコンテンツを作るんだ!」と言っていますが、それでもnoindex
やcanonical
、サイトマップの作成などはGoogleに正しく情報を伝えるために大事なことは変わらないはず。
ということで、今回はプラグインの力も借りながら、できる限り最短距離でGatsbyサイトのSEOを強化する方法を紹介したいと思います。
- プラグインを活用して基本的なSEOの設定をする方法
- Gatsby Plugin Next SEOを使ってnoindexなどのSEO対応をする方法
- head内にHTMLタグを追加する方法(補足)
- Gatsby Plugin Next SEOを使わないときの設定方法(補足)
目次
専用のプラグインで基本的なSEO設定をする
まずは専用のプラグインで基本的なSEO設定をする方法について見ていきましょう。
robots.txt の生成
最初に紹介したいのが、gatsby-plugin-robots-txtというプラグインを使ってrobots.txt
を生成する方法です。
robots.txtファイルを使うと、クローラーに対して、クロールできる(クロールできない)ページやファイルを伝えることができます。
プラグインのインストール
まずはプラグインをインストールします。
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プラグインで行うと便利です。
プラグインのインストール
では、プラグインをインストールしていきましょう。
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)化できます。
プラグインのインストール
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-offlineと組み合わせて簡単にPWA化することができるので、せっかくファビコンを設定するなら一緒にPWAにも対応させておくのがオススメです。PWA化する方法はこちらで紹介しています。
プラグインのインストール
まずプラグインをインストールします。
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 Plugin Next SEOを使ったSEO設定
Gatsby サイトでnoindex
やcanonical
などの設定を行うときにオススメしたいのが、Gatsby Plugin Next SEOというプラグインです。
デフォルトのGatsbyサイトでもSEO
コンポーネントを使ってSEO関連の設定ができるのですが、Gatsby Plugin Next SEOの方がSEOコンポーネントよりも細かい設定ができて便利なんじゃないかと思います。
※ デフォルトのSEOコンポーネントで設定を進める場合についてもこのページの下の方で紹介しています。Gatsby Plugin Next SEOを使わずに設定したいという方はこちらをご覧ください。
プラグインのインストール
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 }) => (<><GatsbySeotitle='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
ディレクティブを追加します。
<head><meta name="robots" content="noindex" /></head>
インデックスされているか確認するには
インデックスしてほしいページがちゃんとインデックスされているか確認するには、Google サーチコンソールの URL 検査(旧:Fetch as Google)を使うと便利です。詳しい確認方法については、以下のサイトが分かりやすいと思います。
ページごとに 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
が指定されていますね。
<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 はこちらになります。
<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 が役に立ちます。
canonical の使い方
canonical はhead
タグの中で正規化させたい URL を指定します。
※ href
には相対パスではなく「https://example.com」のような絶対パスで指定してください。
<head><link rel="canonical" href="https://example.com/dresses/green-dresses" /></head>
評価対象にしたいページがモバイル専用ページのときには、rel="alternate"
リンクを追加します。
<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 () => (<><GatsbySeocanonical='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 () => (<><HelmethtmlAttributes={{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 lang="ja" data-react-helmet="lang">...</html>
noindex を追加する
次はGatsby Plugin Next SEOを使わずにnoindex
を設定する方法です。
ページごとに noindex を設定するとき
ページごとに noindex を設定したいときには、次のようにSEOコンポーネントのmeta
属性を使うのが便利です。
<SEOmeta={[{ name: "robots", content: "noindex, follow" },{ name: "googlebot", content: "noindex, follow" },]}/>
生成される 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コンポーネントを使った設定も紹介してきましたが、やっぱりプラグイン便利ですね。プラグインについてはこちらの記事でまとめているので、よかったらこちらもご覧ください。

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