More than 3 years have passed since last update.

初心者による初心者のためのGatsbyJS覚書6（メタデータの設定）

Last updated at 2021-09-29Posted at 2021-08-29

この記事について

この記事はGatsbyJS初心者の新卒２年目が作成しています。
参考資料として書籍を使用していますが、筆者がビギナークラスのため読んでいて「？」となる部分や間違っている箇所もあるかと思います。
参考までに、そして間違えている箇所がありましたらご連絡いただけると嬉しいです。

Chapter6：メタデータの設定　備忘録メモ

メタデータの設定方法

必要なパッケージをインストール
seo.jsを作成して仮データが表示されるか確認する。
サイト全体で用意するデータを用意してクエリとして取得
ページごとのメタデータの値を設定する
ページのURLやOGP(Open Graph Protocol）を追加する
PWA対応用のパッケージを用意する

必要なパッケージをインストール

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

※gatsby-config.jsにもgatsby-plugin-react-helmetプラグインとして記載しておく。

seo.jsを作成して仮データが表示されるか確認する。

seo.jsファイルを作成

import React from "react"
import { Helmet } from "react-helmet"

const Seo = () => (
  <Helmet>
    <html lang="言語の種類" />
    <title>タイトル</title>
    <meta name="description" content="説明" />
  </Helmet>
)

export default SEO

ひとまずindex.jsで呼び出して表示されるか確かめてみる。

import Seo from "../components/seo"

const IndexPage = () => (
<Layout>
  <Seo />
  <section className="hero">

ディベロッパーツールで確認

サイト全体で用意するデータを用意してクエリとして取得

gatsby-config.jsにサイト全体で使用するデータを追加する。

module.exports = {
  /* Your site config here */
  siteMetadata:{
    title: `ESSENTIALS`,
    description: `美味しい食材と食事を探求するサイト`,
    lang: `ja`,
  },
  plugins: [
    `gatsby-plugin-image`,
...

サーバーを再起動するとGraphQLにデータが追加させるのでクエリを取得してseo.jsへ記載

const Seo = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          lang
          description
        }
      }
    }
  `)
  return(
    <Helmet>
      <html lang={data.site.siteMetadata.lang} />
      <title>{data.site.siteMetadata.title} </title>
      <meta name="description" content={data.site.siteMetadata.description}  />
    </Helmet>
  )

}
export default Seo

404.jsやabout.jsにもSeoをインポートしておく。

ページごとのメタデータの値を設定する

[例]　about.js　の　<Seo/>の要素に値を指定する。

const AboutPage = ({ data　}) => (
  <Layout>
 <Seo 
  pagetitle="ESSENTIALSについて"
  pagedesc="食べ物についての情報を発信しているサイトです。"
 />

seo.jsではpropsを利用して各ページで設定したプロパティ値を取得する。

//ここにpropsを追記
const Seo = props => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          lang
          description
        }
      }
    }
  `)

//三項演算子を利用　aaa ? bbb : ccc (aaaを評価し、trueならbbbをfalseならcccを返す)
  const title = props.pagetitle 
  ? `${props.pagetitle} | ${data.site.siteMetadata.title}`
  : data.site.siteMetadata.title

//論理演算子を使用 　aaa || bbb (aaaを評価し、aaaがtrueならaaaを、falseならbbbを返す)
  const description = props.pagedesc || data.site.siteMetadata.description

  return(
    <Helmet>
      <html lang={data.site.siteMetadata.lang} />
      <title>{title}</title>
      <meta name="description" content={description}  />
　　　　</Helmet>
  )
}
export default Seo

ページのURLやOGP(Open Graph Protocol）を追加する

//locationを追加
const AboutPage = ({ data, location }) => (
  <Layout>
  <Seo
  //下記を追加
  pagepath={location.pathname} //ページのURLを取得するlocationプロパティを利用
  pageimg={data.about.childImageSharp.original.src}
  pageimgw={data.about.childImageSharp.original.width}
  pageimgh={data.about.childImageSharp.original.height}
  />

seo.jsにも定数とreturnで返すmetaを追加

//定数として追加するもの
  const url =props.pagepath
  ? `${data.site.siteMetadata.siteUrl}${props.pagepath}`
  : data.site.siteMetadata.siteUrl

  //今回はデフォルト用にでthumb.jpgを登録しているのでこのように記載
  const imgUrl = props.pageimg
  ? `${data.site.siteMetadata.siteUrl}${props.pageimg}`
  : `${data.site.siteMetadata.siteUrl}/thumb.jpg`

  const imgw = props.pageimgw || 1280
  const imgh = props.pageimgh || 640

//returnの中に追加するもの

<link rel="canonical" href={url} />

<meta property="og:site_name" content={data.site.siteMetadata.title} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:type" content="website" />
<meta property="go:locale" content={data.site.siteMetadata.locale} />
<meta property="fb:app_id" content={data.site.siteMetadata.fbappid} />

<meta property="og:image" content={imgUrl} />
<meta property="og:image:width" content={imgw} />
<meta property="og:image:height" content={imgh} />

gatsby-config.jsのsiteMetaのsiteMetadataにも下記を追加し
seo.jsのクエリにも値を追加する

siteUrl: 'https://unruffled-austin-8f6fcf.netlify.app/',
locale: `ja_JP`,
fbappid:`XXXXXXXXXXXXXX`,

PWA(Progressive Web Apps)対応用のパッケージを用意する

マニフェストファイルを追加する。

npm install gatsby-plugin-manifest

gatsby-config.jsには下記を追記

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `ESSENTIALS エッセンシャルズ`,　//アプリ名を指定
    short_name: `ESSENTIALS`, //アプリの短縮名
    start_url: `/`,　//アプリを開始するURL
    background_color: `#ffffff`,　//アプリの起動画面の背景色を指定
    theme_color: `#477294`,　//テーマカラー、ブラウザやアプリのツールバーで使用される
    display: `standalone`,　//アプリの表示モードを指定
    icon: `src/images/icon.png`　//アプリのアイコンを指定
  },
},

オフラインに対応するファイルを追加する

npm install gatsby-plugin-offline