ReactJS+NetlifyでOGP対応
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に対応しました。
参考リンク
ツイッターでシェア
みんなに共有、忘れないようにメモ
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない！」という方は是非記事投稿リクエストボードへ！
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは？
コメント