{アプリケーションのタイトル}

基本的なことがわかっていないかもしれないのですが、ご回答いただけますと大変ありがたいです。。。 ### 構成・やりたいこと簡単な構成を書きます。 * Microservice(API, Frontend) * React * react-helmet * react-router * Express * webpack SNSのようなサービスで、OGPを出したいのでSSRしています。 `componentDidMount`でaxiosでAPI通信し、レスポンスをstateに入れてレンダリングする。。という流れです。 `render()`でreact-helmetでmetaタグにレスポンスの値を入れて、OGPを出そうとしています。 ### 質問質問したいことは、「APIレスポンスの値を含むOGPを、各SNSに表示するにはどのような処理の流れが必要でしょうか？」です。 ### 経緯 ReactでSSRしてOGPを出すことはできました。 mockでreact-helmetにベタ書きしただけのものです。続けて、API通信を実装して、Facebookの[シェアデバッガー](https://developers.facebook.com/tools/debug/)(OGPのテストができるツール)で、検証しました。すると、OGPがうまくいきませんでした。 curlしてみると、以下のレスポンスが返ってきました。 ``` {アプリケーションのタイトル}

``` 上記は、`HtmlWebPackPlugin`によりビルドされたhtmlです。あれ、そういえば、OGPクローラーは非同期API通信が終わって再レンダリングされるまで、metaタグの取得を待ってくれないよな、API通信のレスポンスをmetaタグに入れたいときはどうすればいいんだろう・・・？と思い、質問いたしました。 ### 試したこと robots.txtはクローラーを許可するようにしています。ローカルでOGPテストが出来る[Chrome拡張](https://chrome.google.com/webstore/detail/localhost-open-graph-chec/gcbnmkhkglonipggglncobhklaegphgn?hl=ja)で、API通信が終わってからOGPのテストをしてみると、 Chrome拡張は、現在レンダリングされているページからOGP情報を生成するようなので、期待通りのOGPが生成されました。しかし、直接Facebookのシェアデバッガーで試したり、Twitterに投稿したりすると、OGPは表示されませんでした。 curlで叩いても、OGP情報のない、webpackがビルドした初期状態のhtmlが取得されるだけでした。

	@@ -1 +1 @@
1	- SSRでOGPにAPIレスポンスの値を入れ~~る方法につ~~いて
1	+ [React]SSRでOGPにAPIレスポンスの値を入れたい[OGP]

質問編集履歴