この記事の概要
- OGP画像を動的に自動生成したい
- 例1：記事のタイトルをテキストとして画像内に入れたい
- 例2：記事の作成者のアイコンを画像内に入れたい
- SNS投稿時のOGP画像を動的に変えたい
イメージ
こんな感じで、記事のタイトルや、作成者の情報を土台の上に貼り付けて１枚の画像としてOGPにしたい
利用するサービス
Cloudinaryとは
Cloudinaryは、画像を管理できるクラウドサービスです。
画像をアップロードするだけでURLが割り振られ、URLに変数を追加することで、画像を動的に変えることができます。
例えば
- 画像の上に文字を追加する
- 画像の上に別の画像を追加する
などなど、
OGP画像を生成するタイミングで、そのページのTitleを自動的に乗せたい時なんかにも活用できます。
無料プランがあるのが嬉しい
Cloudinaryには、プランが複数ありますが、フリープランなら無料で使えます（これは嬉しいですね）
登録方法は簡単で、メールアドレスとパスワードを入力してアカウントを作成するだけです。
Cloudinaryの使い方
Cloudinaryの使い方はとっても簡単です。
調べてみるとたくさん出てきたので、有識者さんたちの記事を載せておきます。
簡単に説明すると、
- OGP画像に使いたい背景画像をアップロードする
- 生成されたURLをルールに基づき編集し動的に変更されるようにする
1:OGP画像に使いたい背景画像をアップロードする
まずはOGP画像に使いたい背景画像を作成してアップロードします。
動的URLの生成方法
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画像を自動生成できます。