GatsbyJSのreact-helmet実装でハマるもなんとか解決

Gatsbyでゼロから作ってるこのサイトに、タイトルタグやらOGPやらを追加するためにreact-helmetを使って実装を試みたんですけど、なかなかうまく行きませんでした。

はじめにやったこと

1. npm i -S react-helmetでReactコンポーネントをインストール
2. テンプレートにimport Helmet from "react-helmet"を追加
3. <Helmet>でMetaメタ情報などを追加

これで実装できたかのように見えたので、デプロイしてOGP Debuggerでテストしてみました。

でも、なぜかOGPが認識されませんでした。

問題

DevToolsで確認するとタグがあるんだけどページソースを見るとない！みたいなことになっていました。

なんでだろうなぁと思ってあれこれ調べてたら、なんとなくrenderメソッドを使ってないから？と思っていろいろやってみても解決しませんでした。

解決策

まずはコードを見直して修正しました。

はじめは以下のように書いていた部分を...

export default ({ data} ) => {
  return(
  )
}

以下に修正しました。

class postTemplate extends React.Component {
  render(){
    const post = this.props.data
    return(
    )
  }
}

export default postTemplate

で、これでもHTMLのソースにメタタグなどが書き出されなかったので、GatsbyJSのプラグインのgatsby-plugin-react-helmetを入れたらようやく書き出されました。Gatsbyのプラグインを入れないと静的にHTMLソースにHelmet部分を書き出してくれないんですね。

これでようやくOGP Debuggerでも問題なくメタ情報が認識されるようになりました。

あとは画像（og:image）とか本文を短くプロセスしたDescriptionを設定すれば完了。やっぱりソーシャルでシェアする際にOGイメージあったほうがいいしなぁ。

つづく...

参考にしたサイト

• GatsbyJSウェブサイトのテンプレートのソースコード