OGP(Open Graph Protocol)
OGPとは
Open Graph Protocolの略で、twitterやFacebookなどのSNSにリンクが投稿された時、それに紐づく画像などのメタ情報をSNS上に表示させる仕組みのこと。
設定方法
参照させたいサイトのhtmlに、いくつかのmeta情報を付与してあげれば良い
画像などを動的に生成したい場合は、リクエスト数によってはサーバー側に負荷がかかるので、画像をキャッシュさせる機構が必要
公式docは、https://ogp.me/
reactだとreact-helmet というreactのheader情報を管理してくれるnpm packageがある
開発時のデバッグ
ngrokでlocalhostを外部に公開→ngrokで発行されたURLをfacebook debuggerなどにかけて確認する
- front/backendどちらとも、
dev:docker:build_upで立ち上げる(httpで立ち上げることに注意) - ngrokを使って、サービスを公開する
ngrok http 3333でbackend、ngrok http 3000でfrontendを公開する- それぞれ公開されたURLが表示されるのでメモっておく
src/common/env.tsのBASE_URLをfrontendの公開URLに、src/common/api-client.tsのbaseURLをbackendの公開URLに書き換える${frontendの公開URL}/signin/みたいな感じのURLを以下のdebugger等に入れると、OGPが設定されているか確認できる
ogp debugger一覧
twitter debuggerを使ったり、slackに実際に投稿して確認もできるが、キャッシュのクリアなどが明示的にできるfacebook debuggerを使うのが、やりやすそう
slackはキャッシュのクリア制御ができないので、検証するには結構辛い