Gatsby.js スタティックサイトのチュートリアル Part 11 Final

Gatsby.js で MDX を使用したブログサイトを作成するチュートリアルの Part11（最終回）です。SEO コンポーネントの使い方を確認してこのチュートリアルを終わりにしたいと思います。

メタデータを追加する

まず、gatsby-config.js の siteMetadata に情報を追加しておきます。

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Static Site Tutorial`,
    description: `This is a sample site for learning Gatsby.js.`,
    image: `/gatsby-icon.png`,
    siteUrl: `https://www.xxxxxxxxxxx.com`,
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/blog`,
      }
    },
    `gatsby-plugin-mdx`,
    `gatsby-transformer-sharp`,
  ],
};

上記のように画像を image に指定する場合、ルートに static というフォルダを作成しその中に画像を保存すれば良いようです。

siteUrl に使用するドメインを指定します。

次に src フォルダ内に hooks というフォルダを作成し、その中に useSiteMetadata フックを作成します。

use-site-metadata.js

import { graphql, useStaticQuery } from "gatsby"

export const useSiteMetadata = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          description
          image
          siteUrl
        }
      }
    }
  `)

  return data.site.siteMetadata
}

このフックを使用すれば siteMetadata が動的に取得できるので seo.js を下記のように変更します。

src/components/seo.js

import React from "react"
import { useSiteMetadata } from "../hooks/use-site-metadata"

const Seo = ({ title, description, pathname, children }) => {
  const { title: defaultTitle, description: defaultDescription, image, siteUrl } = useSiteMetadata()

  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image}`,
    url: `${siteUrl}${pathname || ``}`,
  }

  return (
    <>
      <title>{seo.title}</title>
      <meta name="description" content={seo.description} />
      <meta name="image" content={seo.image} />
      {children}
    </>
  )
}

export default Seo

これで SEO コンポーネントを使用して各ページにメタデータを追加できました。

Gatsby.js スタティックサイトのチュートリアルは以上です。

Gatsby.js に興味がある方の参考になれば幸いです。

今回は以上です。