How to generate an open graph image in Ruby

Open graph image allows you to have a nice picture preview on social media. Let's see how to do it in Ruby.

Og image and generation

Og image are the pictures that are displayed on social medias when you share a link. Automate their generation mean spend less time on plumbing, whereas maintaining a good emotional link to your readers.

BTW, Open Graph is a protocol that enables social medias to read your content. You will often find the following meta in any web page :

<html prefix="og: https://ogp.me/ns#">
<head>
<title>My super title</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>

So here is a way to generate an actual og:image in Ruby, using Cloudinary.

Cloudinary is a service that allows you to store image in the cloud, and to add any random text above it.

Generate og image method in Ruby

We will rely on cloudinary ability to generate layers on their image.

I generated this code by reading a blog article about the same topic, in JS (og image generation in NextJS)

def generate_image_url(title, subtitle)
  base_url = "https://res.cloudinary.com/mycloudinaryid/image/upload"
  image_options = "/w_1600,h_836,q_100"

  title_text = "/l_text:Karla_72_bold:#{URI::Parser.new.escape(title)},co_rgb:ffe4e6,c_fit,w_1400,h_240"
  subtitle_text = "/l_text:Karla_48:#{URI::Parser.new.escape(subtitle)},co_rgb:ffe4e680,c_fit,w_1400"

  image_apply = "/fl_layer_apply,g_south_west,x_100,y_180"
  subtitle_apply = "/fl_layer_apply,g_south_west,x_100,y_100"

  background_image = "/path/to/myimage.jpg"

  final_url = "#{base_url}#{image_options}#{title_text}#{image_apply}#{subtitle_text}#{subtitle_apply}#{background_image}"

  return final_url.gsub('?', '%3F').gsub(',', '%2C')
end

All you have to do is to replace mycloudinaryid and /path/to/myimage.jpg by relevant content.

Summary

Code example and cloudinary documentation should be self-speaking. You can this method in a Rails controller, or just inside a static website generator like Jekyll to get things done quickly.

Og image and generation

Generate og image method in Ruby

Summary

☝️ Join the junior webdev newsletter