JavaScriptが解釈できないクローラーが正しくogpタグを読めるようにするために、どのようなアーキテクチャでSPAのサイトを構築すればいいかというお話

1. SPA時代のOGPとの戦い方
株式会社エクストーン
豊田陽一

2. 今日のお話
• SPAにおけるOGP対応の問題点
• AWSでの解決方法
• 実現に至るまでの紆余曲折

3. SPAにおける
OGP対応の
問題点

4. SPA
(SINGLE
PAGE
APPLICATION)
• 単一のWebページで構成されたWebアプリケーショ
ン
• URL自体はただのパラメータとして扱われる
• その名前のファイルが存在するわけではな
い
• 静的なHTML + JavaScriptで実現される
• React, Vue.js, AngularJS, etc.

5. OGP
(OPEN
GRAPH
PROTOCOL)
• Webページのメタデータを表現するプロトコル
• HTML内のmetaタグにより記述する
• <meta property=“og:title” content=“サイ
トタイトル” />
• 様々なSNS上でサイトの情報を取り扱うために
利用される

6. SNSサイト
のOGPの
読み方
• 基本的にはサイトがクローラーによってアクセスす
る
• TwitterにサイトのURLを投稿する
• TwitterのクローラーがサイトのURLにアクセス
する
• クローラーが取得したページのogpタグを読む
• ogpタグの内容を展開する

7. SPAにおける
OGP対応の
問題点
• JavaScriptが動かないとHTMLが描画されない
• ブラウザがJavaScriptを実行することで動的に
OGPタグを描画している
• 各SNSサイトのクローラーがJavaScriptに対応
しているか？
• Googlebotは対応している
• Twitter, Facebookは動かない
• だいたいOGPタグって、TwitterとFacebook向けの
ために書くよね…

8. 一般的な解決策
• SSR (Server-Side Rendering)
• Webアプリケーションのサーバー側でJavaScriptを実行し、HTMLの描
画を行う
• Node.jsを利用したUniversal JavaScript
• クライアントとサーバー側で同じコードで実行できる
• JavaScriptが実行できなくても、OGPタグが描画されたHTMLを取得で
きる

9. SSRの問題点
• アプリケーションサーバーが必要
• SPAの利点である、シンプルな構成が失われる
• 静的HTML & JavaScript + バックエンドの
API
• S3とかに置けなくなっちゃう
• クローラーがJavaScript解釈出来るようになった
ら…
• いらなくなるよね…
• メンテナンス大変だよね…
• とはいえ、現状ではTwitter, Facebookへの対応が
必要

10. AWSでの
解決方法

11. 基本的な
考え方
• CloudFront + S3で構成されているサイトを想定
• クローラーからのリクエストに描画済みのHTMLを
返す
• Headless ChromeをLambdaで動かすことで実
現
• 描画されたHTMLはS3に保存する
• 次回以降は保存してあるHTMLを返す

12. AWSの登場人物
S3
• Webホスティ
ングが可能な
ファイルスト
レージサービ
ス
CloudFront
• コンテンツ配
信サービス
(CDN)
• パスのパター
ンによって、オ
リジンを複数
設定可能
Lambda
• JavaScript等
で記述された
関数を実行で
きるサービス
• 実行のトリ
ガーに様々な
イベントを設
定可能
API Gateway
• API用のエンド
ポイントを作
成
• 実際の処理は
Lambda等で
行う
Lambda@Edge
• CloudFrontの
エッジサー
バーで実行可
能な制限付き
Lambda

13. LAMBDA@EDGEについて
• CloudFrontへのアクセスをトリガーに起動できる
Lambda
• エッジロケーションで実行される
• 以下の4つをトリガーに実行可能
• CloudFrontがビューワーからリクエストを受信した後
• CloudFrontがリクエストをオリジンサーバーに転送する前
• CloudFrontがオリジンからレスポンスを受信した後
• CloudFrontがビューワーにレスポンスを転送する前

14. 最初のアイデア
• Headless ChromeをLambda@Edgeで動かして、描画済みのHTMLを
S3に保存しよう！
Edge location
Edge location
Edge location
Lambda@Edge
Function
リクエストされたファイルが無ければ、
URLをHeadless Chromeで読み込み、
Lambda上でHTMLを描画する。
描画結果をS3に保存する。
リクエストされたファイルがあれば、それを返す
HTML with
Rendered
OGP

15. ダメでした
• 駄目だった理由
• Headless Chromeのサイズ
• https://www.npmjs.com/package/@serv
erless-chrome/lambda
• Lambdaで動作するよう、50MB以内にお
さまるように作られている
• Lambda@Edgeの制限その1
• プログラム全体の容量は1MBまで！
• はいらない！

16. 次のアイデア
• Headless Chrome自体はLambda@Edgeで動かすのをやめる
• API化し、通常のLambda上で動かす
• Lambda@EdgeからはAPIを呼び出すだけにとどめる
Edge location
Edge location
Lambda@Edge
Function
リクエストされたファイルが無ければ、
HTML描画用のAPIにリクエストを送り、描画済みHTMLを取得する。
描画結果をS3に保存する。
リクエストされたファイルがあれば、それを返す
HTML with
Rendered
OGP
Lambda
Function
Headless Chromeによる
HTML描画

17. ダメでした
• 駄目だった理由
• 実行時間
• Chrome起動→URL接続→ロード・描画までの
時間
• 10秒くらい
• Lambda@Edgeの制限その2
• タイムアウト時間の上限
• ビューワーリクエストをトリガーにして動
かす場合、上限は5秒まで
• 待てない！

18. さらに次のアイデア
• オリジンリクエストでLambda@Edgeを動かそう
• タイムアウト時間の制限は30秒まで緩和される
Edge location
Edge location
Lambda@Edge
Function
リクエストされたファイルが無ければ、
HTML描画用のAPIにリクエストを送り、描画済みHTMLを取得する。
描画結果をS3に保存する。
リクエストされたファイルがあれば、それを返す
HTML with
Rendered
OGP
Lambda
Function
Headless Chromeによる
HTML描画

19. 惜しかった
• 惜しかった理由
• User-Agent
• クローラーからのアクセスの時のみ実行した
い
• オリジンリクエストではUser-Agentが取得で
きない
• User-Agentをオリジンに転送する設定に
すれば一応実現可能
• キャッシュ効率悪すぎるので非推奨

20. さらなる
一手
• User-Agentではなく、URLでHTMLの描画の判断を
行う
• ビューワーリクエストで、User-Agentの判定を
する
• クローラーからのアクセスの場合、
*.static.htmlにアクセスする
• オリジンリクエストで、描画APIを呼び出す
• *.static.htmlへのリクエストの場合のみ、
描画APIを呼び出す
• それ以外は何もしない

21. 最終的な構成図
Edge location
Edge location
Lambda@Edge
Function
URLが***.static.htmlの場合に限り、以下の処理を実行する。
リクエストされたファイルが無ければ、
HTML描画用のAPIにリクエストを送り、描画済みHTMLを取得する。
描画結果をS3に保存する。
リクエストされたファイルがあれば、それを返す
HTML with
Rendered
OGP
Lambda
Function
Headless Chromeによる
HTML描画
Lambda@Edge
Function
User-Agentがクローラーの場合、
元のURLに.static.htmlを付与したリクエストを行う。

22. 出来た！
ブラウザからのアクセス
• ビューワーリクエスト側のLambda@Edgeは何もしな
い
• オリジンリクエスト側のLambda@Edgeも何もしない
• リクエストURLが.static.htmlで終わってないため
クローラーからのアクセス
• ビューワーリクエスト側のLambda@Edgeでリクエス
トURLを加工
• ex) /news/20181116.html ->
/news/20181116.html.static.html
• オリジンリクエスト側のLambda@Edge
• S3にファイルの存在確認
• あればそのファイルを返す
• 無ければHTML描画APIを呼び出し、結果をS3に保存

23. まとめ
• SPAのOGP対応は結構大変
• 頑張ればSSRなしでも実現可能
• ちゃんとインフラはサーバーレス構成を維持できている
• Lambda@Edge便利
• *.static.htmlはSPAのソースコード置き場と別のbucketにした方がいいかも