Q&A基本的なことがわかっていないかもしれないのですが、ご回答いただけますと大変ありがたいです。。。
構成・やりたいこと
簡単な構成を書きます。
- 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のシェアデバッガー(OGPのテストができるツール)で、検証しました。
すると、OGPがうまくいきませんでした。
curlしてみると、以下のレスポンスが返ってきました。
<!DOCTYPE html> <html lang="ja"> <head><base href="/"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{アプリケーションのタイトル}</title> </head> <body> <div id="index"></div> <script type="text/javascript" src="main.js"></script></body> <!-- buildされたjsです --> </html>
上記は、HtmlWebPackPluginによりビルドされたhtmlです。
あれ、そういえば、OGPクローラーは非同期API通信が終わって再レンダリングされるまで、metaタグの取得を待ってくれないよな、API通信のレスポンスをmetaタグに入れたいときはどうすればいいんだろう・・・？
と思い、質問いたしました。
試したこと
robots.txtはクローラーを許可するようにしています。
ローカルでOGPテストが出来るChrome拡張で、API通信が終わってからOGPのテストをしてみると、
Chrome拡張は、現在レンダリングされているページからOGP情報を生成するようなので、期待通りのOGPが生成されました。
しかし、直接Facebookのシェアデバッガーで試したり、Twitterに投稿したりすると、OGPは表示されませんでした。
curlで叩いても、OGP情報のない、webpackがビルドした初期状態のhtmlが取得されるだけでした。
回答1件
0
自己解決
自己解決しました
expressでAPIと同期通信して、metaタグに入れ込んで、それをレンダリングしてhtmlに渡せばいいだけですね
簡単なことなのにかなり迷ってしまった。。。
投稿2020/03/03 21:14
総合スコア4
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。