エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
SPA(S3+Cloud Front)でLambda@Edgeを使ってTwitterカードを表示する〜コンソールOnly - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
SPA(S3+Cloud Front)でLambda@Edgeを使ってTwitterカードを表示する〜コンソールOnly - Qiita
Twitterカードに代表されるOGPの実装は、基本的にmetaタグに情報を加えるだけ。 ただ、React等SPAとして... Twitterカードに代表されるOGPの実装は、基本的にmetaタグに情報を加えるだけ。 ただ、React等SPAとして実装されたサイトでOGPを実装する場合は一工夫必要。 OGPの基本的な仕組み ユーザーがSNS(Twitterなど)にリンクを貼る 各SNSのボットがそのURLにアクセスして、metaタグを読みにいく この時、ボットがJSを実行できないために、 SPAの場合は常にルートのindex.htmlのmetaタグが読み込まれてしまう =表示される画像などを動的に変更することができない 指針 CloudFrontのビューワーリクエストにLambda@Edgeを差し込む UserAgentを判定し、botからのアクセスの時だけ、動的にmetaタグを追加したHTMLをレスポンスとして返す ユーザーがSNSにリンクを貼ってボットがサイトに来たときだけ、表示させたい画像をmetaタグに詰め