こんにちわ、ちょっと株式会社 エンジニアのたっちーです。

今回は、GatsbyJSを利用する上でおすすめのプラグインを紹介したいと思います。

それは、「gatsby-plugin-next-seo」です！

このプラグインは、next-seo を元に作られたプラグインなのですが、このパッケージがとても優秀なんです！！

元々、Next.jsで利用するのを目的として作成されたものなのですが、このプラグインによりGatsbyJSでも利用できるようになったので個人的にはとても感極まります。

基本の使い方

それでは、このプラグインの導入方法について少し、解説します。

インストール

メインのプラグインとその依存関係を追加します。

yarn add gatsby-plugin-next-seo react-helmet-async

GatsbyConfigにプラグインを追加する

gatsby.config.js(ts)にプラグインを追加します。

module.exports {
  // ...
  plugins: [
    // ...
    'gatsby-plugin-next-seo'
  ],
}

デフォルト設定をする場合

optionsに値を渡してあげることで、ページ全体のデフォルト値を設定することができます。
詳しい値の内容は、こちらを参照ください

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

ページにSEO情報を追加する

各ページ毎にtitleやdescriptionなどを設定する際はGatsbySeoタグを用いて設定していきます。

import React from 'react';
import { GatsbySeo } from 'gatsby-plugin-next-seo';

export default () => (
  <>
    <GatsbySeo
      title='Simple Usage Example'
      description='A short description goes here.'
    />
    <p>Simple Usage</p>
  </>
);

以上で基本的な利用方法の解説になります。
今まで、SEOコンポーネントを自作していたりとしていましたが、こういったプラグインで、解決できることが増えていくといいなと思ってます。

基本的な使い方以外にも構造化マークアップのためのタグなど、このプラグインやnext-seoには、SEOに関する様々なサポートが含まれています。
是非、公式のREADMEにも足を運んでみてください！