OGP を整える

[peinan]

No description provided.

[peinan]

仕様

• 指定された画像があればそれを使う
• なければ自動生成

参考

• Cloudinaryで動的にOGP画像を生成する方法 | Cat Knows
• Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう - Qiita

[peinan]

ページカバー画像をデフォルト OG Image にしようと思ったけど、速度的に厳しいかもしれない。
Notion の内部で持ってる画像は Cookie の認証を経て表示されるが、notion-blog で画像を公開するときは ${API_ENDPOINT}/getSignedFileUrls という API で公開用の URL を発行してる。
しかもここで発行された URL はおそらく遠い AWS サーバ上に置かれてるので、レスポンスがわりと遅い。
手元の画像（約 1 MB）で試したら 1 - 3 s くらいだった。
現状の画像ランダム表示で 1 s ちょっとなのでそれよりも遅いことになる。ツライ

curl -v してみると Host: s3.us-west-2.amazonaws.com 米国西部 (オレゴン) ということが分かった。そりゃ遅いわけだ

現状取れる手段は以下

1. 遅くても当初の予定通り cover 画像を OP Image に使う

• pros: カバー画像を設定するだけで OGP 対応完了で楽
• cons: 表示が遅いので体験が悪い（ただキャッシュが効くので 2 回目以降はマシになる）

2. Blog テーブルに新しく OG Image URL みたいな属性を追加して、そこの画像を使う

• pros: 表示の高速化が望める
• cons: 毎度 OG Image をアップロードする手間が増える。変更もちょっとめんどくさい。やり方がスタイリッシュじゃない。せっかくサーバレスなのに余計のことを考えたくない

いったん手段 1 でファイルサイズを可能な限り軽くする方向で行こうかな

[peinan]

ジャストな記事を発見
https://note.com/ichi0g0y/n/nab3484fa4b87

[peinan]

d97240c
ce433e4