Introduction
Sharing websites on social media is one of the most important things we can do to ensure that an audience sees them. However, if we just show links, it will be difficult to gain the attention of the audience.
With the Open Graph, we can control how our websites are shared on social media by displaying images, titles, descriptions, and links in a way that the audience is interested in seeing them.

It can be seen that with the open graph, the website becomes more attractive when shared on social media. However, if we look at the website's meta tag, we can see that the open graph image is static.
<meta
property="og:url"
content="https://aged-clave-571.notion.site/Google-Search-Operators-Cheat-Sheet-e0b50566aa2a4dc6a9643dceda52a3a4/"
/>
<meta property="og:type" content="website" />
<meta
property="og:title"
content="Notion – The all-in-one workspace for your notes, tasks, wikis, and databases."
/>
<meta
property="og:description"
content="A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team"
/>
<meta
property="og:image"
content="https://www.notion.so/images/meta/default.png"
/>
So, instead of creating open graph images one by one, how can we make them dynamic? In this tutorial, we'll use cloudinary to build dynamic open graph images.

Getting Started
First of all, if you're unfamiliar with cloudinary, basically cloudinary is a cloud image hosting service that allows you to transform images and videos to load faster with no visual degradation.
If you don't have a Cloudinary account yet, you can sign up now. More information about crate account on cloudinary can be found at Programmable Media Developer Get Started Guide | Cloudinary
Cloudinary Transformation
With cloudinary, we can do URL transformations instead of using fancy editing tools. We can do this by accessing the URL like this:
There's a lot we can do with cloudinary, you can check the documentation for more information. Here are some of the transformations that we can use:
Face detection-based image cropping
By using the c_crop
, g_face
transformation, we can crop the image to the face of the person.

Text overlay positioning
By using the l_text
transformation, we can overlay text on the image. For example if we want to overlay the text Haiiiiiii
on the image, we can use the following transformation:

Cloudinary also provides a cookbook for creating transformations that can make it easier for us to customize images.
Open Graph Design
Before we start implementing the open graph with cloudinary transformations, we need to design the open graph in figma. This is the design result that we will use.

After that, we can seperate the design into different parts.

I know that hr stands for horizontal rule, but I used it for a diagonal line. To be honest, I always use the hr name not only for horizontal but also for vertical.
Dynamic Open Graph with Cloudinary
We need to structure folders in Cloudinary depending on the slug from posts to make the open graph dynamic. Here is the folder structure on the cloudinary that I have created.

I put the design we separated earlier into two parts:
social.png
andhr.png
in the folder/jagad.dev
(static)header.png
in each post slug folder/jagad.dev/post/[slug]
(dynamic)
Here is the implementation for displaying social.png
.
For information, in cloudinary, we do not need to provide image formats such as .png
or .jpg
in the url. Instead, the image format will be served as .webp

After that, we combine it with header.png
, which is in the /jagad.dev/posts/[slug]
folder. For example, if I use the slug steam-now-playing
, the header image is in the /jagad.dev/posts/steam-now-playing
folder.

Since I don't want to display just a square header in the open graph, I use hr.png
to create a diagonal line to the left of the image.

to create a dynamic post title, we can use a text overlay transformation like this:

Implementation
Implementation can be done very easily by changing the post slug and post title. The following is an example implementation using the JavaScript programming language.
const ogimage = `https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/w_600,h_630,c_fill,l_jagad.dev:posts:${SLUG}:header/fl_layer_apply,g_east/w_192,h_630,c_fill,l_jagad.dev:hr/fl_layer_apply,g_west,x_485/w_500,h_630,c_fit,co_rgb:ffffff,g_west,x_60,y_-40,l_text:arial_50_bold:${TITLE}/jagad.dev/social`
This is the result of the dynamic open graph that has been implemented on this website.

Conclusion
The advantage of creating dynamic open graphs with cloudinary is the fast load speed compared to using puppeteer or next-api-og-image.