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 画像を動的生成して効率化していきたい、現場からお送りしました。