David Boureau

Web developer & teacher @saaslit

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#">
<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" />

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')

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


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.

☝️ Join the junior webdev newsletter

We try to send you every week language-agnostic algorithm exercice and relevant blog articles

Read more