この記事の概要

こんな感じで、記事のタイトルや、作成者の情報を土台の上に貼り付けて１枚の画像としてOGPにしたい

利用するサービス

Cloudinaryは、画像を管理できるクラウドサービスです。
画像をアップロードするだけでURLが割り振られ、URLに変数を追加することで、画像を動的に変えることができます。

例えば

などなど、

OGP画像を生成するタイミングで、そのページのTitleを自動的に乗せたい時なんかにも活用できます。

Cloudinaryには、プランが複数ありますが、フリープランなら無料で使えます（これは嬉しいですね）
登録方法は簡単で、メールアドレスとパスワードを入力してアカウントを作成するだけです。

Cloudinaryの使い方はとっても簡単です。
調べてみるとたくさん出てきたので、有識者さんたちの記事を載せておきます。

簡単に説明すると、

まずはOGP画像に使いたい背景画像を作成してアップロードします。

Cloudinaryに登録して、画像をアップロードすると以下のようなURLを取得できます。

https://res.cloudinary.com/hoge/image/upload/v0000000/image.png

Cloudinaryは、上記のURLに記述をすることで、画像を動的に変えることができます。

例えば、

https://res.cloudinary.com/hoge/image/upload/l_text:font_name:記事のタイトル,w_500,c_fit/image.png

ブラウザに打ち込めば、記事のタイトルが画像の上に表示されています。

文字以外にも画像を入れることができたり、文字の配置も自由に設定できます。
また文字のフォントもアップロードすることで、自由に変更が可能です。

Cloudinaryでのフォントの追加方法はこちらがおすすめです

OGP画像のURLが準備できたら、文字部分を動的に変更されるようにプラグラムを変更しましょう。

<meta property="og:image" content="https://res.cloudinary.com/hoge/image/upload/l_text:font_name:記事のタイトル,w_500,c_fit/image.png"/>

これで動的なOGP画像を自動生成できます。