2019-01-27に更新

ReactJS+NetlifyでOGP対応

OGPとは

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

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にする
image

おまけ

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

参考リンク


ckoshien

アプリケーションエンジニア。 ReactJS/NodeJS/Java

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント