OGPとは

Open Graph Protocolの略。
FacebookやtwitterなどのURLシェア機能で画像と文字列を使ってWEBサイトの内容を伝えるための規格です。

ReactでOGPが難しい理由

FacebookやtwitterなどのクローラーがJavascriptを実行しない仕様のため、ページの内容がJavascriptで動的に作成されるSPAなどでは工夫が必要となります。

react-helmetを使ってmetaタグを動的に書き換える

react-helmet
metaタグだけではなく、headタグの中身を動的に書き換えることができます。(reduxの)storeから文字列をセットしたりできます。

<Helmet
  title={store.getState().data.league.title}
  meta={[
     { property:"og:image", content:"https://jcblscore-react.netlify.com/img/ogp.png"},
     { property:"og:url", content:location},
     { property:"og:type", content:"article"},
     { property:"og:title", content:store.getState().data.league.title},
     { property:"og:description", content:description},
     { property:"og:site_name", content:"野球リーグスコア管理システム"},
     { name:"twitter:card",content:"summary_large_image"},
     { name:"fragment",content:"!"}
   ]}
  />

componentWillMount(){
   window.prerenderReady = false;
}
componentDidMount(){
   window.prerenderReady = true;
}

NetlifyでPrerenderingの設定をする

Settings -> Build&Deploy -> Prerendering から下図のようにEnabledにする

おまけ

crieitさんのボード機能を使って野球リーグスコア管理システムの進捗とか書いてます。選手個人成績のページもOGPに対応しました。

参考リンク

• SSR無しでReactアプリをOGPとかに対応させる (自力prerendering編)
• React Helmetを使ってOGP対応した
• ReactアプリのリンクをサクッとTwitterで魅せる