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タグに詰めて渡してあげる

実装

Lambda@Edgeの実装

Lambda@Edgeはus-east1(バージニア北部)リージョンでしか使用できないため、
それ以外のリージョンにいる場合は切り替えてから関数を作成する。

コードは https://qiita.com/kurimoto/items/6212372ead6522161a60 を参考にした。
ユーザーからのリクエストを読み取って、UserAgentを判定し、Twitterbot等の場合だけ作成したレスポンスを返す。

index.js

'use strict';

const bots = ['Twitterbot'];

exports.handler = (event, context, callback) => {
  const request = event.Records[0].cf.request;
  const userAgent = request.headers['user-agent'][0].value;
  const isBot = bots.some(v => {
    return userAgent.includes(v);
  });
  if (isBot) {
    const body = getContent()
    const response = {
      status: '200',
      statusDescription: 'OK',
      headers: {
        'content-type': [{
          key: 'Content-Type',
          value: 'text/html'
        }]
      },
      body: body
    };
    callback(null, response);
  } else {
    callback(null, request);
  }
};

const getContent = () => { 
 return = `
  <!doctype html>
  <html lang="ja">
  <head>
  <meta charset="utf-8" />
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <meta content="R-bies,INC." name="author" />
  <title>タイトル</title>
  <meta name="twitter:card" content="summary" />
  <meta property="og:url" content="http://example.com/" />
  <meta property="og:title" content="Example" />
  <meta property="og:image" content="${imageUrl}" />
  </head>
  <body>
  </body>
  </html>
  `;
};

上のコードはそのまま動かない。（metaタグに設定しているimageUrlが定義されていないから）

UserAgentを判定する
あらかじめ指定したボットだった場合は動的にタグを追加してレスポンスとして返す。
それ以外はリクエストをそのまま実行する（S3にアクセスする）

というものになっている。
ので、動的に画像を差し替えたりしたいときは、条件を追加したり、URLに応じてDBからfetchしてきたりして、imageUrlを定義してあげればよい。

参考

CloudFront経由のイベントは下記のフォーマットで渡ってくるので、
テストをする際は下記をコピペしてあげたり、イイ感じに改変すればよい

{
  "Records": [
    {
      "cf": {
        "config": {
          "distributionDomainName": "d111111abcdef8.cloudfront.net",
          "distributionId": "EDFDVBD6EXAMPLE",
          "eventType": "viewer-request",
          "requestId": "4TyzHTaYWb1GX1qTfsHhEqV6HUDd_BzoBZnwfnvQc_1oF26ClkoUSEQ=="
        },
        "request": {
          "clientIp": "203.0.113.178",
          "headers": {
            "host": [
              {
                "key": "Host",
                "value": "d111111abcdef8.cloudfront.net"
              }
            ],
            "user-agent": [
              {
                "key": "User-Agent",
                "value": "Twitterbot"
              }
            ],
            "accept": [
              {
                "key": "accept",
                "value": "*/*"
              }
            ]
          },
          "method": "GET",
          "querystring": "",
          "uri": "/example/5674591867371520"
        }
      }
    }
  ]
}

Lambda@Edgeへのデプロイ

関数を作成してテストも通ったら、Lambda@Edgeへデプロイする。

関数設定のトリガーを追加するところから、CloudFrontを選択

デプロイするディストリビューションを設定
イベントをビューアーリクエストに設定

追加する

Lambdaの実行ロールの設定

開く

信頼関係を編集する

下記を貼る

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": [
          "edgelambda.amazonaws.com",
          "lambda.amazonaws.com"
        ]
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

CloudFrontの設定

コレをしないと延々５０３が出て困る

デプロイしたディストリビューションのbehaviorを追加する

Lambdaを実行するパスのパターンを設定する。全てで動かす場合は *

実行させるLambdを設定する

ARNはLambda画面の右上にある

これで追加すると、CloudFrontにデプロイされ、
晴れてOGPタグを動的に差し替えることに成功する