Published on

How to Automatically Create OpenGraph Image with Cloudinary

Authors

Open Graph images help our blog/website to stand out when it is shared on social media or in other places like in chats.

However, creating these images manually can be time-consuming and really hard.

Wouldn't it be nice if these things are automated so that you can focus on content creation and some robot can focus on creating open graph images for you :)

What is OpenGraph/OG Image?

To put it in simple words, when we share a link in social media/chat/anywhere. Your open graph images will be shown along with it instead of just a plain link.

So that it catches the people's attention and they visit our website.

In this blog post, let's talk about the story behind choosing the approach, how to create it, etc.

On our website, we'll have special meta tags to configure our OG images.

Backstory and My Requirements

As a part of revamping my blog, I wanted to have a proper open graph image for every blog post.

And my requirements were:

  1. It needs to be entirely automated and less maintenance
  2. Blazingly fast! (Hello, Vercel)
  3. Good enough image. Not interested in having fancy designs at the moment.
  4. It should be simple and I should be able to integrate it with minimal time.
  5. Preference is No Code to Less Code
  6. Preferably has a free tier

And I've tried various things out there like Tailgraph. But in my case, it looked very simple and it doesn't even feel like open graph images to me.

Whereas Vercel's OG seems really cool. But I didn't want to run a dedicated service for my use case (tiny blog)

Then I came across this blog by Delba.

It satisfied all my requirements.

You get a really good-looking Open Graph image, almost instantly without code/maintenance and has a decent free tier.

OG Image Generation using Cloudinary

So what is Cloudinary?

Cloudinary is a cloud-based media management and manipulation platform. We'll be using Cloudinary under the hood for creating our open graph images.

If you don't have an account with them, then create one

Step #1: Upload the background image to your Cloudinary account.

We'll need to upload our background image to your Cloudinary so that you can use it for OG image creation. In my case, I have got the background layer from WallpaperCave.

Pretty much, that's the only dependency for us.

Step #2: Configure and use OpenGraphImage Helper

The OpenGraph image implementation is based on Delba's snippet.

I've tweaked the snippet to make it more configurable, added automatic optimization, free CDN so that we reduce the file size of the generated image (save bandwidth) and for your end users it loads faster.

// double escape for commas and slashes
const e = (str) => encodeURIComponent(encodeURIComponent(str))


export const createOpenGraphImage = ({
    title,
    domain = "YourDomain.com",
    useCDN = true,
    cloudinaryAccountId = "YOUR_CLOUDINARY_ACCCOUNT_ID",
    twitterHandle = "YOUR_TWITTER_HANDLE",
    bgImagePath = 'YOUR_PATH/dark-gradient'

}) => {
    const url = [
        // ACCOUNT PREFIX
        // Add your own Cloudinary account ID.
        `https://res.cloudinary.com/${cloudinaryAccountId}/image/upload`,
        // Composed Image Transformations 
        // optimization: https://twitter.com/colbyfayock/status/1615760720347398150
        `w_1600,h_836,q_auto,f_auto`,
        // TITLE
        // Karla google font in light rose
        `l_text:Karla_72_bold:${e(title)},co_rgb:ffe4e6,c_fit,w_1400,h_240`,
        // Positioning
        `fl_layer_apply,g_south_west,x_100,y_180`,

        // Domain
        // Karla, but smaller
        `l_text:Karla_48:${e(domain)},co_rgb:ffe4e680,c_fit,w_1400`,
        // Positioning
        `fl_layer_apply,g_south_west,x_100,y_100`,

        // PROFILE IMAGE
        // dynamically fetched from my twitter profile
        // https://cloudinary.com/cookbook/overlaying_social_profile_pictures_on_top_of_images
        `l_twitter_name:${twitterHandle}`,
        // Transformations
        `c_thumb,g_face,r_max,w_500,h_500,q_100`,
        // Positioning
        `fl_layer_apply,w_140,g_north_west,x_100,y_100`,

        // Background image
        bgImagePath

    ].join("/")

    if (useCDN) {
        return `https://wsrv.nl?url=${url}`
    }

    return url;
}


export default createOpenGraphImage;

Step #3: Configuring Meta Tags in your site/blog

Now use this helper in your blog/website's meta tags.

Ideally, you'll be having the meta tags like this in your site/blog related to images:

<!-- Open Graph / Facebook Meta Tags -->
<meta property="og:image" content="YOUR_OG_IMAGE_URL">

<!-- Twitter Meta Tags -->
<meta property="twitter:image" content="YOUR_OG_IMAGE_URL">

And rest of the meta tags for your reference. Make sure to place it in <head> not inside <body> tag. Generated using metatags.io

<!-- Primary Meta Tags -->
<title>Example Blog</title>
<meta name="title" content="Example Blog">
<meta name="description" content="Example blog is a place where I share my thoughts, ideas, and experiences with the world.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com">
<meta property="og:title" content="Example Blog">
<meta property="og:description" content="Example blog is a place where I share my thoughts, ideas, and experiences with the world.">
<meta property="og:image" content="YOUR_OG_IMAGE_URL">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.example.com">
<meta property="twitter:title" content="Example Blog">
<meta property="twitter:description" content="Example blog is a place where I share my thoughts, ideas, and experiences with the world.">
<meta property="twitter:image" content="YOUR_OG_IMAGE_URL">

And once everything is configured, you'll be having a fancy open graph image like this 😍

Make sure to check, you're OG images on sites like metatags.io to make sure that you've configured it properly.

Happy OpenGraph Images!