Gatsby.js - メタデータの設定(SEO)

1. プラグインとメタデータの設定

はじめにコンポーネントを使用して<head>内のメタデータを管理できるようにするプラグインをインストールします。

npm install gatsby-plugin-react-helmet react-helmet

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

gatsby-plugin-react-helmet | Gatsby

プラグインをインストールしたらgatsby-config.jsにサイトのメタデータとインストールをしたプラグインを追加します。ここに記述するサイトのメタデータを<head>内のメタデータとして使用するので環境に合わせて増やしたり減らしたりします。

//gatsby-config.js

//URLの末尾にスラッシュはつけない
//imageは'static'フォルダに配置した画像へのパス
{
  /* Meta */
  siteMetadata: {
    title: "SiteName",
    description: "description",
    author: `author`,
    siteUrl: `https://sitename.com`,
    lang: `ja`,
    image: `/ogp.png`,
    twitterName: `@xxxx`,
  },

  /* Plugins */
  plugins: [

    `gatsby-plugin-react-helmet` //追加

    ]
}

2. SEO コンポーネントの作成

サイトのメタデータ、プラグインの設定などが終わったら、どのページでも呼び出せるようにコンポーネントを作成します。書き方は色々あると思いますが、ここでは下記のように記述しています。

//seo.js
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useLocation } from "@reach/router"
import { useStaticQuery, graphql } from "gatsby"

function SEO({ title, description, image, siteUrl }) {
  const { pathname } = useLocation()
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            lang
            image
            description
            siteUrl
            twitterName
          }
        }
      }
    `
  )

  const defaults = site.siteMetadata

  //ページ内に設定がなければ、gatsby-config.jsで設定したものを出力
  const seo = {
    title: title || defaults.title,
    description: description || defaults.description,
    image: `${siteUrl}${image || defaults.image}`,
    url: `${siteUrl}${pathname || ""}`,
  }

  return (
    <Helmet title={seo.title}>
      <html lang={defaults.lang} />
      <link rel="canonical" href={seo.url} />
      <meta name="description" content={seo.description} />
      <meta name="image" content={seo.image} />
      {/* OGP */}
      <meta property="og:url" content={seo.url} />
      <meta property="og:site_name" content={seo.title} />
      <meta property="og:title" content={seo.title} />
      <meta property="og:description" content={seo.description} />
      <meta property="og:image" content={seo.image} />
      {/* Twitter */}
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:creator" content={defaults.twitterName} />
      <meta name="twitter:title" content={seo.title} />
      <meta name="twitter:description" content={seo.description} />
      <meta name="twitter:image" content={seo.image} />
    </Helmet>
  )
}

SEO.defaultProps = {
  title: null,
  description: null,
  image: null,
  lang: null,
}

SEO.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  image: PropTypes.string,
  lang: PropTypes.string,
}

export default SEO

Adding Page Metadata | Gatsby
Location Data from Props | Gatsby

3. コンポーネントを呼び出す

コンポーネントを呼び出して使用するときは下記のように使用します。記事ページのようなページごとに変化させたいときは、下記のようにgraphqlからページのタイトルなどを呼び出します。静的なページの場合はtitle="About Page"のような書き方もできます。

import SEO from "../components/seo"

...

const post = data.markdownRemark

...

<Layout>
<SEO
  title={post.frontmatter.title}
  description={post.excerpt}
  pathname={location.pathname}
/>

...

4. SEO 関係で良さそうなプラグイン

PWA 対応

PWA (Progressive Web Apps)というモバイル環境でネイティブアプリのような形で利用できるようになるプラグインがgatsby-plugin-manifestというプラグイン。gatsby-plugin-offlineというプラグインもインストールするとオフライン環境でもサイトが見られるようになります。ネイティブアプリのように使うには、iPhone の場合だと Safari でサイトを開いてサイトをホーム画面に追加することで機能します。このサイトでも試しに使ってみていますが、ブラウザの「ひとつ前に戻る」が使えなくなるのでサイトの設計によっては向かない場合もあるかもしれません。SEO 的には、Google の Lighthouse で PWA 対応に点数が付くので良いかもしれません。

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

yarn add gatsby-plugin-manifest gatsby-plugin-offline

プラグインの設定

//gatsby-config
plugins: [
  //s
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`, //アプリ起動時の背景色
        theme_color: `#a2466c`, //スマホのWifiアイコンなどがある上部の色を指定
        display: `standalone`,
        icon: `src/images/icon.png`, //512x512px
      },
    },
  //e
  ],

gatsby-plugin-manifest | Gatsby
gatsby-plugin-offline | Gatsby

サイトマップ作成

サイトマップを作成してくれるプラグイン。gatsby build && gatsby serveというコマンドでローカル環境でもテストできる。

npm install gatsby-plugin-sitemap

yarn add gatsby-plugin-sitemap

プラグインの設定

//gatsby-config
siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [
  `gatsby-plugin-sitemap`
  ]

gatsby-plugin-sitemap | Gatsby

robots-txt 作成

robots.txt(サイトのどのページやファイルをリクエストできるかできないか、検索エンジンクローラに知らせるもの)を作成してくれるプラグイン

npm install gatsby-plugin-robots-txt

yarn add gatsby-plugin-robots-txt

プラグインの設定

//gatsby-config
siteMetadata: {
    siteUrl: 'https://www.example.com'
  },
  plugins: ['gatsby-plugin-robots-txt']

gatsby-plugin-robots-txt | Gatsby
Robots.txt の仕様 Google Developers