OGPジェネレータを作って「阿部寛のホームページ」をOGP対応してみた

阿部寛のホームページOGP

作ったもの

作ろうと思ったきっかけ

最近の外部ページへのリンクはOGPが当たり前になってきていて
OGPがないURLのみの文字列は危険な感じがしていると思ったからです
まだ古いサイトなどはOGP対応していないところが多い感じです
ただ、OGP対応も面倒でOGPの画像を用意してmetaタグに設定しないといけかったり結構な重労働です
その問題を払拭すべく、このサービスを作りました

技術スタック

• フロントエンド
  Vue.js

• バックエンド
  Firebase
  RealtimeDatabase
  python
  CloudFlare Worker
  WebNium

#処理フロー
１．CloudFlare Worker
（最初にアクセスされる場所）
２．WebNium
（パラメータにurlがある、かつOGP画像作成済みではない場合、サイトのキャプチャを取得しStorageに保存）
３．CloudFlare Worker
（作成したOGP画像のURLをSSRしたものを返す）

#なんでCloudFlare Worker使ってるの？
処理フローに一応書いてありますが
SSRするためです
FirebaseHostingは静的ファイルしかホスティング出来ず
SPAだとmetaタグを書き換えたとしてもjavascript読み込んでくれない系のサービスだと
metaタグが書き換わらず、OGP情報が設定できないためです

###なんでCloud Functions使わないの？
クレカ登録とかが嫌な感じだからです
従量課金制でいつの間にかクラウド破産とかしたくないからです

以上。