OG Images in Ruby on Rails

Generate OG images in Ruby on Rails with FastOG's credit-based API — sign up free for 100 credits (create your API key in the dashboard). Preview in the Free OG Image Tester, then render dynamic Open Graph images from your Rails app with HMAC-signed URLs.

Quick Start

1. Create the signer service

ruby
# app/services/fastog_signer.rb
class QuickogSigner
  def self.generate_signed_og_url(params, options = {})
    base_url = options[:base_url] || ENV.fetch(S0, S1)
    api_key = options[:api_key] || ENV.fetch(S2)
    hmac_secret = options[:hmac_secret] || ENV.fetch(S3)

    raise S4 unless api_key && hmac_secret

    timestamp = Time.now.to_i
    key = api_key[0, 8]

    message = S5
    signature = OpenSSL::HMAC.hexdigest(S6, hmac_secret, message)

    query = params.merge(
      key: key,
      s: signature,
      t: timestamp
    )

    S7
  end
end

2. Configuration

ruby
# config/application.rb
config.fastog = ActiveSupport::OrderedOptions.new
config.fastog.api_key = ENV.fetch(S0, nil)
config.fastog.hmac_secret = ENV.fetch(S1, nil)
config.fastog.base_url = ENV.fetch(S2, S3)
bash
# .env
FASTOG_API_KEY=sk_your_full_api_key_here
FASTOG_HMAC_SECRET=your_64_char_hex_secret_here

Controller

ruby
# app/controllers/blog_controller.rb
class BlogController < ApplicationController
  def show
    @post = Post.find_by!(slug: params[:slug])

    @og_image_url = QuickogSigner.generate_signed_og_url(
      template: S0,
      title: @post.title,
      subtitle: @post.excerpt,
      author: @post.author.name
    )
  end
end

View

erb
<!-- app/views/blog/show.html.erb -->
<% content_for :head do %>
  <meta property="og:image" content="<%= @og_image_url %>" />
  <meta property="og:title" content="<%= @post.title %>" />
  <meta property="og:description" content="<%= @post.excerpt %>" />
<% end %>

<article>
  <h1><%= @post.title %></h1>
  <p><%= @post.excerpt %></p>
</article>

Layout

erb
<!-- app/views/layouts/application.html.erb -->
<head>
  <%= yield :head %>
</head>

Helper

ruby
# app/helpers/fastog_helper.rb
module QuickogHelper
  def og_image_url(template:, **params)
    QuickogSigner.generate_signed_og_url({ template: template }.merge(params))
  end
end
erb
<!-- In view -->
<meta property="og:image" content="<%= og_image_url(template: 'blog', title: @post.title) %>" />

E-commerce Example

ruby
# app/controllers/products_controller.rb
class ProductsController < ApplicationController
  def show
    @product = Product.find(params[:id])

    @og_image_url = QuickogSigner.generate_signed_og_url(
      template: S0,
      title: @product.name,
      price: @product.formatted_price,
      image: @product.image_url
    )
  end
end

User Profile Example

ruby
# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def show
    @user = User.find_by!(username: params[:username])

    @og_image_url = QuickogSigner.generate_signed_og_url(
      template: S0,
      name: @user.name,
      avatar: @user.avatar_url,
      bio: @user.bio
    )
  end
end

API Endpoint

ruby
# config/routes.rb
get S0, to: S1
ruby
# app/controllers/api/og_controller.rb
module Api
  class OgController < ApplicationController
    skip_before_action :verify_authenticity_token

    def generate
      title = params[:title]
      template = params[:template] || S0

      unless title
        return render json: { error: S1 }, status: :bad_request
      end

      og_image_url = QuickogSigner.generate_signed_og_url(
        template: template,
        title: title
      )

      render json: { ogImageUrl: og_image_url }
    end
  end
end

Turbo/Hotwire

erb
<!-- app/views/blog/_post.html.erb -->
<%= turbo_frame_tag "post_#{@post.id}" do %>
  <meta property="og:image" content="<%= og_image_url(template: 'blog', title: @post.title) %>" />
  <h2><%= link_to @post.title, blog_path(@post) %></h2>
<% end %>

Common Pitfalls

Using Full API Key

❌ Wrong: key: api_key

✅ Correct: key: api_key[0, 8]

Wrong Message Format

❌ Wrong: "GET:/api/v1/og:#{timestamp}:#{key}"

✅ Correct: "GET/api/v1/og#{timestamp}#{key}"

Exposing HMAC Secret

Never expose FASTOG_HMAC_SECRET in frontend JavaScript or client-side code.

Full API Reference

Related

Try it free — no signup required

Preview and test dynamic OG images in seconds.

Open the Free OG Image Tester