10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順

こんにちは、twitter大好きサラリーマン、筋肉めがねです。

大好きとは言いながら、あまり能動的に発言できていないので、今後はブログ同様にtwitterでの発言も増やしていきます。

さて、読者の方がブログを読まれた後にどのような行動を取るのか、例えば記事を書いている人のプロフィールを見たり、他の記事を見たりとありますが、そのうちの一つにSNSで記事をシェアする、というのがありますよね。もちろんシェアしたくなるような内容である事が大前提ではありますが。

そこで、本サイトにも、記事の最後にtwitterで読者の方がシェアできるようにtwitterボタンを設けました。そして、シェアしていただいた際に、ブログの一番最初の画像がtweetの中に表示されるように設定を行いました。

以下、本日の目次です。

twitterボタンの埋め込み

twitterの公式ページからtweetボタンを作成します。

twitterの公式ページ

ちなみに、各種ブログを読むと、react-shareを使ってtweetボタンをGatsbyに埋め込んでいる記事が多くあるんですが、僕の場合は、react-shareでは上手くいかなかったので公式のtweetボタンを使用しています。

公式ページで、“Twitter Buttons”を選択し、Large Buttonにチェックを入れ、updateボタンを押します。

すると、コードが生成されるので、それをコピーします。 コピーされたコードを見てみると、aタグと、scriptタグが1つずつありますよね。そのうち、aタグのみを使います。

そして、コピーしたaタグを、tweetボタンを埋め込みたいcomponentへコピーしたコードを貼り付けます。

....
<div className="post-single__footer">
  <h3 className="post-single__footer-sharesuru">シェアする</h3>
  {/* add SNS button*/}
  <a className="twitter-share-button" data-size="large" href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-show-count="false">Tweet</a>
...

貼り付ける際には、classをclassNameとしましょう。

先ほど、scriptタグは一旦無視しましたが、このscriptタグの代わりに、Gatsbyには、gatsby-plugin-twitterが用意されているので、それを使います。ちなみに、scriptタグを貼り付けず、またgatsby-plugin-twitterを使用しないまま進めますと、tweetボタンにcss装飾が全くつかず、tweetという青文字のみ表示される事になり、見た目がとても残念なボタンになるので注意してください。

gatsby-plugin-twitter

公式ページにある通り、インストールを行い、そして、pluginをgatsby-config.jsに追加します。

npm install --save gatsby-plugin-twitter

...
`gatsby-plugin-twitter`,
...

この状態で、一度、gatsby buildを実行しましょう。
これで、記事の最後にtwitterシェアボタンが追加されました。

各記事からtwitter cardに必要な情報を連携する方法

さて、twitterのシェアボタンを追加する事はできました。あとは、読者の方がシェアボタンを押した時に、適切な状態でtwitter cardが表示されればオッケーですね。

先人たちのブログを拝見するに、このステップもサクッとできると思っていましたが、どハマりしてしまいました。

大事なポイントを先に書くと、

• OGPの設定はmetaタグを設定すれば実現できる。そしてmetaタグの設定には、react-helmetを使う。Gatsby公式ページに書かれているSEO.jsは設定の必要なし。
• 各記事毎にfeatured imageを設定してあげる事で、twitterでシェアした時に、記事毎に異なる画像をtwitter cardに設定できる。

まずは、OGPの設定です。

OGPの設定

そもそもOGPとは何なのか、OGPとはOpen Graph Protcolの略で、Facebookやtwitterなどでブログがシェアされた際に、見栄えが良くなるあれですよね。 例えば、以前使っていた、はてなブログの場合ですと、twitterでシェアしようとすると、以下のような画像が表示されます。

ブログの記事内で使用している画像を、twitterでシェアする際のトップ画にしてくれたり、ブログのタイトルを自動でtweet内に埋め込んでくれます。

では、OGPの設定をしていきたいところですが、ここではmetaタグを設定する事と理解していただいて良いかと思います。

そして、“gatsby ogp”でググると、Gatsbyの公式サイトでSEOコンポーネントを作る、というチュートリアルが出てくると思いますが、これは必要ありません。

直接、PostTemplateDetailsのコンポーネントに実装していきます。
そして、Gatsbyの場合、metaタグを設定するときはreact-helmetを使います。

Gatsby公式サイト：react-helmetの使い方

まず、react-helmetをインストールします。

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

そして、gatsby-config.jsファイルにて、gatsby-plugin-react-helmetを設定します。

{
  plugins: [`gatsby-plugin-react-helmet`]
}

また、PostTemplateDetailsのコンポーネントにてreact-helmetを使えるようimportしましょう。

...
import Helmet from 'react-helmet'
...
import { TwitterShareButton, TwitterIcon } from 'react-share';
...

これでHelmetタグが使えるようになりましたので、同じコンポーネントの中でmetaタグを設定していきます。
returnの直ぐ下に書きましょう。

return (      
  <div>
    <Helmet>
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.frontmatter.title} />
      <meta name="twitter:image" content={image} />
      <meta name="twitter:description" content={postDescription} />
      <meta name="twitter:site" content="@KinnikuMeganeDe" />
      
      <meta property="og:title" content={post.frontmatter.title} />
      <meta property="og:type" content="article" />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={postpath} />
      <meta property="og:description" content={postDescription} />
    </Helmet>
    ...

ここでtwitter:cardのcontentをsummary_large_imageと設定してあげる事で、記事をtwitterでシェアした際に大きな画像を使う事ができるようになります。

これで、metaタグの設定はできました。基本的にはtwitterのシェアボタンに対するOGP設定はこれでオッケーと考えていただいて問題ありませんが、これだけだと正常には動きません。

metaタグ内の、postDescription, imageといった情報をgraphqlで引っ張ってきてあげる必要があります。

graphqlで必要な情報をコンポーネントに引っ張ってくる(画像以外)

graphqlから情報を引っ張ってくる時に、画像については別途設定が必要なので、次のセクションで書きます。

先ずは画像以外の設定です。

“gatsby-v2-starter-lumen”のテンプレを使っている場合、すでにPostTemplateDetailsのコンポーネント内で、graphqlから幾つかの必要な情報を引っ張ってきているとは思いますが、念のため、画像以外について、必要なラインを全て書いておきましょう。例えば、デフォルトでは、pathに関するラインはありませんので、追加しましょう。

class PostTemplateDetails extends React.Component {
  render() {
    const { author } = this.props.data.site.siteMetadata
    const post = this.props.data.markdownRemark
    const { tags } = post.frontmatter;
    const { description: postDescription } = post.frontmatter
    const path = post.frontmatter;
    const postpath = `https://kinnikumegane.com/${path}`
    ...

この時点でgatsby developで何かしらエラーが出る場合には、post-template.jsxファイル内でgraphqlからの読み込みに必要な設定ができていない可能性があります。エラーが出る場合、そこを確認しましょう。以下、template.jsxファイル内の確認箇所です。

おそらくデフォルトでは、frontmatter以下にpathが入っていない事があるので、pathを追加しましょう。それ以外にも、いかに記載の項目で、post-template.jsxに入っていないものがあれば追加してください。

export const pageQuery = graphql`
  query PostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        subtitle
        copyright
        menu {
          label
          path
        }
        author {
          name
          twitter
        }
        disqusShortname
        url
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      html
      fields {
        tagSlugs
        slug
      }
      frontmatter {
        title
        tags
        date
        path
        description
      }
    }
  }
`

これで、gatsby developしてあげれば、画像以外については、問題なくgraphqlを使用して、PostTemplateDetailsコンポーネントに情報が引っ張ってこれているはずです。

最後に、各記事固有の画像をtwitter cardに使用するための設定を実装しましょう。

featured imageの設定

featured-imageというものを使う事で、各記事固有の画像をtwitter cardに使用できます。

こちらのブログがとても参考になります。
Featured Blog Images In Gatsby.js

まずは、gatsby-config.jsファイル内で以下が設定されている事を確認しましょう。

  ...
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/src/pages`,
      name: 'pages',
    },
  },
  ...

そして、3つのプラグインをインストールします。

npm install --save gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

gatsby-transformer-sharpとgatsby-plugin-sharpについては、gatsby-config.jsファイルで設定されている事を確認しましょう。

plugins: [
  ...
  'gatsby-transformer-sharp',
  'gatsby-plugin-sharp',
  ...

続いて、各記事のフォルダーでfeatured imageを作ります。
記事フォルダーの中にfeatured-image.jpgを作りましょう。そして、記事のマークダウンファイル内に、featuredImageを設定します。

例えば、この記事の場合だったら、

...
path: "/posts/transformgatsbytowordpresslike4/"
category: "Gatsby"
tags:
  - "Gatsby"
  - "Wordpress"
  - "Twitter"
  - "Twitter card"
  - "OGP"
featuredImage: ./featured-image.jpg
...

これを全ての記事に対して対応させてください。つまり、全ての記事のフォルダー内に”featured-image.jpg”を作り、そしてそれらのマークダウンファイルに、“featuredImage: ./featured-image.jpg”を追加してください。この設定を怠ると、後ほど、gatsby developもしくはgatsby buildした際に、“Cannot read property ‘childImageSharp’ of null”というエラーが表示されます。

続いて、メインのindex.jsxのgraphqlに、新たにfeaturedImageを追記します。

...
frontmatter {
  title
  featuredImage {
    childImageSharp {
      sizes(maxWidth: 630) {
        ...GatsbyImageSharpSizes
      }
    }
  }
  path
  date
  category
  description
}
...

そして、同様にpost-templateにもfeaturedImageを追記します。

...
frontmatter {
  title
  featuredImage {
    childImageSharp {
      sizes(maxWidth: 630) {
        ...GatsbyImageSharpSizes
      }
    }
  }
  ...

この時点で、一旦gatsby developを実行しましょう。

これで、各記事で設定したfeaturedImageのパスが生成されました。
http://localhost:8000/___graphqlで確認してみましょう。

allMarkdownRemark / edges / node / frontmatter / featuredImage / childImageSharp / sizes / srcを左側のパネルで選択し、実行ボタンを押すと、右側のパネルにパスが表示されている事が分かります。

後は、このパスを先ほどのmetaタグに設定してあげれば完了です。

featured imageをcomponent内で使う

PostTemplateDetailsコンポーネントで、featuredImageを読み込みます。
パスが長くなるので、一旦imageに格納します。

class PostTemplateDetails extends React.Component {
  render() {
    const { author } = this.props.data.site.siteMetadata
    const post = this.props.data.markdownRemark
    const { tags } = post.frontmatter;
    const { description: postDescription } = post.frontmatter
    const path = post.frontmatter;
    const postpath = `https://kinnikumegane.com/${path}`

    const featuredImgSize = post.frontmatter.featuredImage.childImageSharp.sizes.src
    const image = `https://kinnikumegane.com/${featuredImgSize}`;
    ...

そして、このimageをmetaタグ内で使ってあげれば、それで終わりです。

<Helmet>
  ...
  <meta name="twitter:image" content={image} />
  ...
  <meta property="og:image" content={image} />
  ...
</Helmet>

以上で、twitter cardへ必要な情報を連携するための設定は完了しました。

一旦ここでgatsby buildし、git pushしてみましょう。

数分経った後に、twitterのcard validatorで確認すると、無事にtwitter cardが表示されているはずです。

お疲れ様でした。“gatsby ogp設定”やら、“gatsby twitter card”でググると色々とtutorialが出てきますが、この記事で最初から最後まで網羅できたのではないでしょうか。

ところで、折角なので、postだけでなくpageにもtwitterボタンを追加しましょう。

プロフィールなどの各ページにtwitterシェアボタンをつけましょう

基本的にはpostに対して行った作業と同じなので、以下ポイントのみ記載しておきます。

• src/templates/page-template.jsxに、featuredImageに関するgraphqlを追加する。frontmatter以下にpathも追加する。
• src/components/PageTemplateDetails/ index.jsxにて、Helmetをimportする。
• src/components/PageTemplateDetails/ index.jsxにて、metaタグで使う必要な情報をgraphqlから取得する。その際、postではなくpageのデータを取得することに気をつける。例えば、const { description: pageDescription } = post.frontmatterではなく、const { description: pageDescription } = page.frontmatterであること。
• src/components/PageTemplateDetails/ index.jsxにて、metaタグを追加する。ここでも、postではなくpageであることに気をつける。
• 全てのページのフォルダーにfeatured-image.jpgを作り、それらのマークダウンファイル内に、featuredImage: ./featured-image.jpgを追加する。
• git pushする前に、必ずgatsby buildを実行する。

以上で、top page以外の全てのページにtwitterシェアボタンをつける事ができました。

まとめ

これで、twitterシェアボタンを追加し、そしてシェアされた時に大きな画像を使ってtwitter cardが表示される仕様を追加する事ができました。

この記事では大きく以下2点について書きました。

• twitterボタンの埋め込み
• 各記事、そして各ページからtwitter cardに必要な情報を連携する方法

だんだんとワードプレスっぽいブログが出来てきましたね。
次回は、top pageの記事一覧の見せ方に変更を加えたいですね。

それでは、本日は以上です。