Contents
    Create Dynamic Open Graph Images with Cloudinary

    Create Dynamic Open Graph Images with Cloudinary

    Make dynamic Open Graph images with the help of Cloudinary URL transformations

    Posted by Jagad on June 21, 2022
    -- views

    5 min read

    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.

    <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.

    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

    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 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
    Face detection-based image cropping

    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
    Text overlay positioning

    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.

    Design Result

    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
    Showing Social + header

    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.

    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/jagad.dev/social
    Showing Social + header + hr

    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.

    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.


    Post Reactions
    LIKE
    LOVE
    Wow
    YAY
    Contributors

    The writing on this website may contain errors in grammar, punctuation, etc. Please make a contribution here