Cloudinary で OGP 画像を動的生成する方法

Cloudinary で OGP 画像を動的に生成する方法をご紹介します。

背景 OGP 画像の作成が面倒

今までは記事ごとに OGP 画像を手作業で生成していたのですが、さすがに面倒になってきたので Cloudinary を活用して、動的にで文字挿入できるようにしました。

Cloudinary で画像の動的生成方法

OGP 画像の素材

URL:

https://res.cloudinary.com/codenote-net/image/upload/v1599311015/CodeNote-OGP.png

Cloudinary で動的に文字挿入

結論としては、以下のような URL に変更すれば上記の画像に文字列を挿入できます。

URL:

https://res.cloudinary.com/codenote-net/image/upload/l_text:Sawarabi%20Gothic_100_bold:OGP画像の動的生成,co_rgb:242424,w_1000,c_fit/v1599311015/CodeNote-OGP.png

オプションを分解した内容が以下です。

l_text:Sawarabi%20Gothic_100_bold:文字列
co_rgb:242424
w_1000
c_fit

以上、Cloudinary で OGP 画像を動的生成して効率化していきたい、現場からお送りしました。

参考情報

関連記事