GatsbyJSのreact-helmet実装でハマるもなんとか解決
2018年12月2日
Gatsbyでゼロから作ってるこのサイトに、タイトルタグやらOGPやらを追加するためにreact-helmetを使って実装を試みたんですけど、なかなかうまく行きませんでした。
はじめにやったこと
- npm i -S react-helmetでReactコンポーネントをインストール
- テンプレートにimport Helmet from "react-helmet"を追加
- <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イメージあったほうがいいしなぁ。
つづく...