I’ll show you how to generate OGP images dynamically with Cloudinary.
Background: Creating OGP Images Is Tedious
Until now, I had been manually generating OGP images for each article, but it was getting quite tedious, so I utilized Cloudinary to enable dynamic text insertion.
How to Generate Images Dynamically with Cloudinary
OGP Image Source Material
URL:
https://res.cloudinary.com/codenote-net/image/upload/v1599311015/CodeNote-OGP.png
Dynamic Text Insertion with Cloudinary
In conclusion, by changing to a URL like the following, you can insert text strings into the above image.
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
Here’s the breakdown of the options:
l_text:Sawarabi%20Gothic_100_bold:text_string
co_rgb:242424
w_1000
c_fit
That’s all from the Gemba, where we want to improve efficiency by dynamically generating OGP images with Cloudinary.