Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

## 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. Open graph Example

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. ```html {14-17} ``` 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. Meme about Open Graph

## 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](https://cloudinary.com/documentation/how_to_integrate_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:

https://res.cloudinary.com/demo/image/upload/[YOUR_TRANSFORMATIONS]/lady.jpg

There's a lot we can do with cloudinary, you can check the [documentation](https://cloudinary.com/documentation/image_transformation_reference) 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.

https://res.cloudinary.com/demo/image/upload/c_crop,g_face,h_400,w_400/lady.jpg

### 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:

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Haiiiiiiiiii,g_north_west,x_20,y_20/lady.jpg

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. Seperate Design Result

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. Cloudinary Structure Folder

I put the design we separated earlier into two parts: 1. `social.png` and `hr.png` in the folder `/jagad.dev` (static) 2. `header.png` in each post slug folder `/jagad.dev/post/[slug]` (dynamic) Here is the implementation for displaying `social.png`.

https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/jagad.dev/social

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` Showing Social

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.

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:steam-now-playing:header/fl_layer_apply,g_east/jagad.dev/social

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:

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:steam-now-playing: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:This%20is%20dynamic%20open%20graph%20with%20cloudinary/jagad.dev/social

Showing Social + header + hr + text overlay

## 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. ```javascript 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. Open Graph 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.