Create Dynamic Open Graph Images with Cloudinary

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:

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.

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.