Gatsby: SEO対策（最低限やっておくこと）

# Gatsby: SEO対策（最低限やっておくこと）

最低限必要なものを備忘録です。


## サイトマップ作成

### 方法

まずプラグインをインストール

```bash
$ yarn add gatsby-plugin-sitemap
```

gatsby-config.jsで以下のように編集。

```js
module.exports = {
    siteMetadata: {
      title: `exampleサイト`,
      description: `説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明`,
      author: `T.Walker`,
      siteUrl: `https://example.site`,　// 追加
    },
    plugins: [
      `gatsby-plugin-sitemap`, // 追加
      `gatsby-plugin-twitter`,
      `gatsby-transformer-json`,
・・・略・・・
```

これだけで良い。なんと簡単な。試しにビルドしてみると…

```bash
$ gatsby build
```
publicフォルダに`sitemap.xml`が生成されてて、動的ページまですべて羅列されている。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url> <loc>https://example.site/medias-article/10</loc> <changefreq>daily</changefreq> <priority>0.7</priority> </url>
<url> <loc>https://example.site/medias-article/9</loc> <changefreq>daily</changefreq> <priority>0.7</priority> </url>
<url> <loc>https://example.site/medias-article/8</loc> <changefreq>daily</changefreq> <priority>0.7</priority> 
・・・略・・・
</urlset>
```

## URL正規化

[URL正規化・canonical属性とは？](https://www.gyro-n.com/seo/hack/canonical/)
のための対処。

### 方法

gatsby-plugin-canonical-urlsをインストール

```bash
$ yarn add gatsby-plugin-canonical-urls
```

gatsby-config.jsで

```js
module.exports = {
    siteMetadata: {
      title: `exampleサイト`,
      description: `説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明`,
      author: `T.Walker`,
      siteUrl: `https://example.site`,
    },
    plugins: [
      {
        resolve: `gatsby-plugin-canonical-urls`,　// 追加
        options: {
          siteUrl: `https://example.site`,
          stripQueryString: true,
        },
      },
・・・略・・・
```

これだけですべてのHTMLページに以下のようなタグが＜head＞＜/head＞内に挿入される。

```html
<link rel="canonical" href="https://example.site/about/" data-baseprotocol="https:" data-basehost="example.site/" />
```

動的ページ全てにも。すごいな。

## robot.txt生成

検索エンジン最適化ファイル。こんな感じのファイル。

```text
User-agent: *
Disallow: /admin/
Allow: /*
# allow google image bot to search all images
User-agent: Googlebot-Image
Disallow:
Allow: /*
# allow Google adsense bot on entire site
User-agent: Mediapartners-Google*
Disallow:
Allow: /*
User-agent: Twitterbot
Disallow:
Allow: /*
Sitemap: https://example.site/sitemap.xml
```

###方法
gatsby-plugin-robots-txtをインストール

```bash
$ yarn add gatsby-plugin-robots-txt
```

gatsby-config.jsで

```js
module.exports = {
    siteMetadata: {
      title: `exampleサイト`,
      description: `説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明`,
      author: `T.Walker`,
      siteUrl: `https://example.site`,
    },
  plugins: [
       {
        resolve: 'gatsby-plugin-robots-txt', // 追加
        options: {
          host: 'https://www.example.site',
          sitemap: 'https://www.example.site/sitemap.xml',
          policy: [{ userAgent: '*', allow: '/' }]
        }
      },

・・・略・・・
]

```



試しにビルドしてみると、publicフォルダにrobot.txtあった。

```text
User-agent: *
Allow: /
Sitemap: https://example.site/sitemap.xml
Host: https://example.site
```

Disallowオプションなどもある。公式サイト参照。
[gatsby-plugin-robots-txt](https://www.gatsbyjs.org/packages/gatsby-plugin-robots-txt/)


## マニフェスト設定
アプリをPWA対応にする（manifest.webmanifestを生成する）ため。

### マニフェストコードとアイコンの作成方法
gatsby-plugin-manifestをインストール。default-starterには最初から入ってる。

まず512 x 512 サイズのアイコンを作る。
例えばこんな。
![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/3b7cedc5-669d-7c12-5f16-bd708debf8de.png)

Visioで作成。VisioのエクスポートからPNGで保存。その際白色を透過に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/dd1f3edd-6ec5-53e8-f60b-0dd2893d9111.png)

Manifest Generator（https://app-manifest.firebaseapp.com/ ）で各サイズのアイコンとmanifest.jsonを生成。
例えば以下の設定でGenerate .ZIPボタンをクリックすると自動生成してくれて、ZIPファイルでダウンロードできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/e4f19623-50dd-9003-ab5e-2e1faaa4dbd9.png)


### マニフェストコードとアイコンの設置方法
アイコンは全部でサイズ別に８個。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/46972c02-a14a-111b-f7bd-9007e0d45bc5.png)

プロジェクトルートにstaticフォルダを作成（<strong>srcの直下ではない。注意！</strong>）。その下にiconsフォルダを作成。そこにコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/d6f2b47a-4152-c085-a798-1fdc1217daed.png)

そしてgatsby-config-jsで以下のように。

```js
・・・略・・・
        resolve: `gatsby-plugin-manifest`,
        options: {
          name: `Example Site`,
          short_name: `hoge`,
          start_url: `/`,
          background_color: `#663399`,
          theme_color: `#663399`,
          display: `minimal-ui`,
          icon: `src/images/gatsby-icon.png`,
          icons: [
            {
              src: `icons/icon-72x72.png`,
              sizes: `72x72`,
              type: `image/png`
            },
            {
              src: `icons/icon-96x96.png`,
              sizes: `96x96`,
              type: `image/png`
            },
            {
              src: `icons/icon-128x128.png`,
              sizes: `128x128`,
              type: `image/png`
            },
            {
              src: `icons/icon-144x144.png`,
              sizes: `144x144`,
              type: `image/png`
            },
            {
              src: `icons/icon-152x152.png`,
              sizes: `152x152`,
              type: `image/png`
            },
            {
              src: `icons/icon-192x192.png`,
              sizes: `192x192`,
              type: `image/png`
            },
            {
              src: `icons/icon-384x384.png`,
              sizes: `384x384`,
              type: `image/png`
            },
            {
              src: `icons/icon-512x512.png`,
              sizes: `512x512`,
              type: `image/png`
            },
          ]
        },
・・・略・・・
```

いちおう公式マニュアルのとおりにバックティック（`）を使った。ダウンロードしたmanifest.jsonは以下のように普通にダブルクォーテーションを使ってるがこれでも良いのかわからない。

```json
・・・略・・・
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
・・・略・・
  ],
```

動作確認はプロダクションサイトにアップしないとできないが（参考：[GatsbyでPWA対応](https://takumon.com/2018/10/08/#gatsby-plugin-manifest%E3%81%AE%E8%A8%AD%E5%AE%9A)）いちおう`gatsby build`と`gatsby serve`して、http://localhost:9000 でもNameとShort Name、およびアイコンの割り当ては確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/bcb0e41b-06b3-b6eb-b0ea-0de9ca2b75f6.png)



<br>

##（必要なら）Google Analytics

gatsby-plugin-google-analyticsをインストール

```bash
$ yarn add gatsby-plugin-google-analytics
```

gatsby-config.jsを編集

```js
// gatsby-config.js

module.exports = {
},
    plugins: [
      {
        resolve: `gatsby-plugin-google-analytics`,
        options: {
          trackingId: "UA-xxxxxxxx-x",
        },
      },
    ],
}
```

トラックコード"UA-xxxxxxxx-x"は、アナリティクス管理画面（https://analytics.google.com/analytics/） 左下の歯車アイコンから、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/6d0ede27-5d8f-e363-0aaa-cab3aae4fb0f.png)

プロパティ設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/fdb33ff3-4c01-255b-5143-da0f1cc8da3e.png)

トラッキングコード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/ceff493b-10b2-3623-2ffd-7fac928d40a6.png)

ここに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/cf7e242a-10e2-34ec-1d12-5cac5061a728.png)

# 本の宣伝
### Gatsbyバージョン５>>>>改訂２版

**前編**の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と**後編**の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ **https://yah-space.work**
<hr />


静的サイトジェネレーターGatsby**最新バージョン５**の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《**Slicy API**》《**Script API**》《**Head API**》を紹介、実装方法も。《**Gatsby Functions**》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

**最新Gatsby５**とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《**サイト内検索機能**》をGatsbyバージョン４からの新機能《**Gatsby Functions**》と《**microCMSのqパラメータ**》で実装。また、**SEOコンポーネントをカスタマイズ**して**microCMS APIをツイッターカードに表示**させる**OGPタグ**実装方法も解説。

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />

<br />

参考：
[gatsby-plugin-sitemap]
(https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/)
[Gatsbyプラグイン45選](https://qiita.com/Takumon/items/da8347f81a9f021b637f#seo%E7%B3%BB)
[gatsby-plugin-canonical-urls](https://www.gatsbyjs.org/packages/gatsby-plugin-canonical-urls/)
[GatsbyでPWA対応](https://takumon.com/2018/10/08/#gatsby-plugin-manifest%E3%81%AE%E8%A8%AD%E5%AE%9A)