はじめに 最近vercelからリリースされた@vercel/ogですが、exampleにシンプルな例しかなく、実用する上で困ったことがいくつかありました。 簡単なOGP画像を生成するところから始めて、表示する文字を動的にしたり、背景画像を設定したり、カスタムフォントを設定してみてOGP画像がいい感じになることを目指します。 ↓完成形 @vercel/ogとは 以下公式ドキュメントから引用した文章です。 Performance: With a small amount of code needed to generate images, Edge Functions can be started almost instantly. This allows the image generation process to be fast and recognized by tools like