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

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

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


###メタデータの設定方法

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


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

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

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

```jsx 
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で呼び出して表示されるか確かめてみる。

```jsx
import Seo from "../components/seo"

const IndexPage = () => (
<Layout>
  <Seo />
  <section className="hero">
```
ディベロッパーツールで確認
![スクリーンショット 2021-08-22 15.38.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281399/284ef7e3-7c45-052f-236b-2d480cbcc40d.png)

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

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

```js
module.exports = {
  /* Your site config here */
  siteMetadata:{
    title: `ESSENTIALS`,
    description: `美味しい食材と食事を探求するサイト`,
    lang: `ja`,
  },
  plugins: [
    `gatsby-plugin-image`,
...
```
サーバーを再起動するとGraphQLにデータが追加させるのでクエリを取得して`seo.js`へ記載

```jsx
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/>`の要素に値を指定する。

```jsx
const AboutPage = ({ data　}) => (
  <Layout>
 <Seo 
  pagetitle="ESSENTIALSについて"
  pagedesc="食べ物についての情報を発信しているサイトです。"
 />
```
`seo.js`では`props`を利用して各ページで設定したプロパティ値を取得する。

```jsx
//ここに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）を追加する

```jsx  
//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を追加

```jsx
//定数として追加するもの
  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
```

```jsx
//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`のクエリにも値を追加する

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

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

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

```sh
npm install gatsby-plugin-manifest
```

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

```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`　//アプリのアイコンを指定
  },
},
```

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

```sh
npm install gatsby-plugin-offline
```
`gatsby-config.js`には下記を追記

```js
`gatsby-plugin-offline`,
```

完成したサイトをデプロイし、アイコンやアプリ化したときの動作を確認する。

SEOのスコアがアップし、PWAの可能になった表示へ変化しました。

![スクリーンショット 2021-08-29 11.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281399/b580a3d4-978f-68fc-ff1f-d0735b4888f1.png)