【ズボラSEO】Gatsby + Netlify CMSでコンテンツマーケ基盤を作るために


#はじめに
![seo.png](https://qiita-image-store.s3.amazonaws.com/0/204698/5b8d325e-cebe-8870-aeea-872e578f28c2.png)

はじめまして！　JAMstack Advent Calendar 2018　12/10 の記事を書かせていただきます、hand-dotと申します。会社員をしながら家に帰ってからは一人でサービスをつくったりしています。

**JAMstack**という言葉を聞いたのは11月半ばくらいだったのですが、作成予定だったコンテンツマーケ基盤に使えるのでは？と思い、触ってみると、大当たり！

はじめるまではJAMstackでのSEO事情の不安があり、運用の慣れているWordPressを選ぼうか迷っていましたが、
後述する　**ズボラSEOコンポーネント** を使ってサイトを開設するとSEO関連知識がなくても1,2時間くらいで問題なくSEO+OGP対応できました。(おまけに構造化データも)

Indexされてる
![スクリーンショット 2018-12-10 3.18.27.png](https://qiita-image-store.s3.amazonaws.com/0/204698/2cf13ca1-b8c4-aeec-2abf-65bfc700014a.png)

OGP対応されてる
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">暮らしニスタさんに投稿した、「100均のシール用紙で宛名ラベルを作成する方法(Excel,Wordは使いません！)」の記事が急上昇ランキング1位を獲得しました！<br> <a href="https://t.co/oLNYoQ41v1">https://t.co/oLNYoQ41v1</a></p>&mdash; labelmake.jp (@labelmake) <a href="https://twitter.com/labelmake/status/1071650293199233027?ref_src=twsrc%5Etfw">2018年12月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

構造化データもエラーなし
![スクリーンショット 2018-12-10 3.19.50.png](https://qiita-image-store.s3.amazonaws.com/0/204698/9981cc87-dcae-e8df-7e0f-5f28f15ab632.png)



CMSとかでコンテンツマーケ基盤を作成しようとしている方で、
>「WordPressかー、うーん...もうちょっとお手軽にJAMstackに作りたいんだけど、SEOどうなんやろなー」

と不安に思っている方の後押しができればと思っています。(責任は取れませんがw)

まだ、 Gatsby + Netlify CMSでサイトを作ったことがない人は
初めて作るときはこの↓ブログが参考になったのでチェックしてみてください。
[Gatsby + Netlify CMSで作ったブログをカスタマイズする](https://shibe97.com/blog/gatsby-netlify-cms/)

**2ステップで、ズボラSEOコンポーネントを使うまでの流れを簡単に紹介し、
最後にズボラSEOコンポーネントを紹介して締めくくりたいと思います。**

よろしくお願い致します。

#1.Google Analyticsを設定する
兎にも角にもGoogle Analyticsの設置をします。すでに設定されている方は読み飛ばしちゃってください。

こちら↓のブログが日本語でヒットしたので参考にしました。
[GatsbyでGoogle Analyticsを設定する](https://tmnm.tech/2017/09/18/gatsbyjs-analytics/)

要するに**[プラグイン](https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/?=)をインストールして、設定ファイルにtrackingIdを書き込めば動くと**。

`上記の記事内のgatsby-config.jsより`
![スクリーンショット 2018-12-10 1.10.12.png](https://qiita-image-store.s3.amazonaws.com/0/204698/5556fd8c-4eb2-297e-9a21-a72a2623a7f6.png)


>あれまてよ、これってtrackingIdが公開されるやんけ、わし、プライベートレポジトリもってないねん。全世界にわしのtrackingIdが公開されるやないか！


って方もこれから説明する方法なら大丈夫。ビルド時の環境変数を使えばいいんです！

`'UA-11111111-1'`
の部分を
`process.env.GOOGLE_ANALYTICS_TRACKING_ID || "none"`
に書き換えてください。
gatsby-config.jsのpluginsの配列のgoogle-analyticsの設定はこんな感じになります。

```javascript:gatsby-config.js
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID || "none",
      }
    },
```

んで、GOOGLE_ANALYTICS_TRACKING_IDはどこで設定するのかというと、

ここです。Netlify管理画面のsettingsのEdit variablesからkey,valueが設定できます。
![スクリーンショット 2018-12-10 1.21.11.png](https://qiita-image-store.s3.amazonaws.com/0/204698/6da51c19-9e66-220c-9bef-e1b97b644d6c.png)

URL的には`https://app.netlify.com/sites/{YOUR_SITE}/settings/deploys#build-environment-variables`

**OKこれで、ビルド時に値が設定されるから、Google Analyticsが使える。**

#2.Metaタグを書き換えられるようにする
基本的に`react-helmet`を使ってmetaタグを書き換えてSEOやOGPを設定する感じになります。
これも[プラグイン](https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/?=)があるのでインストールして、設定ファイルに書き込んで、コンポーネントでimportすれば普通に使えます。こんな感じ。

```jsx:
import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};
```


**OKこれで、metaタグが書き換えられるようになったから、SEO,OGP対応ができるようになった。**


んで専門の方でない限りは、適当に調べて、ほぼ予想で作っていくわけですが...
そこで登場するのがズボラSEOコンポーネント！


#🚀Let's! ズボラSEOコンポーネント🚀

このコンポーネントは簡単に説明するといい感じのmetaタグを作ってくれるreact-helmetのラッパーです。

使い方はpage queryで得られたデータをPropsに渡すだけ。

###ズボラSEOコンポーネントは内部でStaticQueryを発行してサイト情報などを取得し、最適化したmetaタグを生成してくれるというわけです⭕

###さらにPropsやStaticQueryで得られたデータから、shema.orgを使ったJSON-LDも生成してくれます💮


実はこれ自体は私が考えたものでもなんでもなくて、

`gatsby-plugin-react-helmet`のExamplesとして紹介されている`SEO.js`というものを参考に作ることができます。

下記のファイルをチェックしてみてください。
https://github.com/jlengstorf/lengstorf.com/blob/master/src/components/SEO/SEO.js


**これを参考にし、下記の2つの作業を行なっていきます。**

1. **StaticQueryで取得されている情報から、`gatsby-config.js`に設定されているべき`siteMetadata`を逆算して設定**
2. **`propTypes`から呼び出し側のpage queryで取得する情報などを、微調整**

**これらを行うことで`SEO.js`を自分のサイトでも使うことができます。**

下記で簡単にどうすればいいか説明していきます。
気に入らない部分は自分で少し書き換えてもいいし、
逆にもっといい書き方があれば教えてほしいです。

---

1.**StaticQueryで取得されている情報から、`gatsby-config.js`に設定されているべき`siteMetadata`を逆算して設定**

発行されているStaticQueryのqueryは下記

```graphql:SEO.js
{
  site {
    siteMetadata {
      title
      description
      canonicalUrl
      image
      author {
        name
      }
      organization {
        name
        url
        logo
      }
      social {
        twitter
        fbAppID
      }
    }
  }
}
```
ということは`gatsby-config.js`の`siteMetadata`はこんな感じになる。

```javascript:gatsby-config.js
  {
    title: 'ほげ - hoge.com',
    description: 'hoge.comはほげほげなサイトです！',
    canonicalUrl: 'https://hoge.com',
    image: 'https://https://hoge.com/image.jpg',
    author: {
      name: 'ほげ男',
      minibio: `<strong>ほげ男</strong>は東京都内在住のほげほげなお兄さん`,
    },
    organization: {
      name: '株式会社hoge',
      url: 'https://hoge.com',
      logo: 'https://https://hoge.com/logo.jpg',
    },
    social: {
      twitter: '@hoge',
      fbAppID: 'hoge',
    },
  },
```
---

2.**`propTypes`から呼び出し側のpage queryで取得する情報などを、微調整**

SEO.jsのpropsTypesは下記

```javascript:SEO.js
SEO.propTypes = {
  isBlogPost: PropTypes.bool,
  postData: PropTypes.shape({
    childMarkdownRemark: PropTypes.shape({
      frontmatter: PropTypes.any,
      excerpt: PropTypes.any,
    }),
  }),
  postImage: PropTypes.string,
};

```
ということは

```jsx:
<SEO
    isBlogPost
    postData={{childMarkdownRemark: post, excerpt: post.excerpt}}
    postImage={post.frontmatter.thumbnail.childImageSharp.fluid.src}
/>
```

こんな感じで使えるということやね！(雑ですまん！)

---

時間の関係上後半が若干雑ですが、こんな感じで
`gatsby-config.js`と`page query`を微調整して各ページで**スボラSEOコンポーネント**を呼んでやればOK!

個人的にはSEO関連で毎回時間使うのはなんか辛いんで、いっそのこと`StaticQuery`の依存を取り除いて、ズボラSEOコンポーネントをnpmパッケージにして公開しようと思っています。
＊公開したら追記させていただきます~

#おまけ

今回自分が**ズボラSEOコンポーネント**を使用して作成したサービスは[https://labelmake.jp/](https://labelmake.jp/)というサービスで、宛名ラベルとかが作れます。

![スクリーンショット 2018-12-08 15.56.03.png](https://qiita-image-store.s3.amazonaws.com/0/204698/80dba81d-4475-92eb-780b-883f0cef4f3e.png)


絶賛作成中なのですが、テンプレートを好きなデザインや利用用途に合わせて選んで　PDFを作成することで宛名印刷が0円で家庭用プリンタで行うことができるというサービスです。

グッズ販売、司法事務所など日々の発送業務を行なっている方にご好評いただいています。

Qiitaを利用している方であれば、技術書展などで本を売られている方やキーボードを販売されている方にも使っていただけると思います。もしよかったら使っていただけると嬉しいです。

これからブランドのロゴなどを配置できるようにしたり、封筒の差し込み印刷に対応したりしたいと思っています。

**きったないですが、[ソースコード](https://github.com/hand-dot/labelmake.jp)も公開しているので、少しでも参考になれば嬉しいです。**

元々create-react-appで作成した1つのコンポーネントを、firebaseでホストして運用していましたが、コンテンツマーケをすることでもっと多くの人に使ってもらえると思い、そのコンポーネントを引っ越して、Gatsby + Netlify CMSの基盤に合体しました。

引っ越し、合体作業はpagesディレクトリにファイルを移動するだけで終わるので
reactで簡単なツールを作成していてもっとユーザーを増やしたい！という方がいたら試してはいかがでしょうか？

運用開始2週間くらいでユーザー数が10倍以上増えて個人的にはもっと早くコンテンツマーケやっていればよかったなーなんて思いました。

#終わり

とりあえず　Gatsby + Netlify CMS　ありがとう！

明日は @AkiraTameto さんです！ 私がWordpressを採用しようか迷っていた時に**全部クリアしていた**人です。
結果的に採用してよかったです！ありがとうございました！

![スクリーンショット 2018-12-10 4.05.09.png](https://qiita-image-store.s3.amazonaws.com/0/204698/da5ae333-a917-4bc8-2bd7-59a53a7baa0b.png)


##ps. おれも全部クリアしました