Guides / Ruby
Pages with custom social cards get measurably more clicks than a generic logo when shared on X, LinkedIn or Slack. Designing one image per blog post by hand doesn't scale — RasterKit renders them from an HTML template with {{variables}} you fill from Ruby.
Design the card once (plain HTML/CSS — gradients, fonts, avatars), store it as a template, then request /v1/image with a title and author per page. Combine with signed URLs and your og:image tag can point directly at the API.
Sign up free (magic link, no card) — your key is shown right after sign-in. You get 100 renders/month free across screenshots, PDFs, and images.
Store a template once (dashboard or POST /v1/templates) — HTML/CSS with
{{variables}} — then render it with per-page values:
require "net/http"
require "json"
uri = URI("https://rasterkit.com/v1/image")
req = Net::HTTP::Post.new(uri)
req["x-api-key"] = ENV.fetch("RASTERKIT_API_KEY")
req["content-type"] = "application/json"
req.body = '{"template_id": "tpl_your_template", "variables": {"title": "Hello World", "author": "Paul"}}'
res = Net::HTTP.start(uri.hostname, uri.port, use_ssl: true, read_timeout: 60) { |http| http.request(req) }
raise "Render failed: #{res.code} #{res.body}" unless res.code == "200"
File.binwrite("og-image.png", res.body)
puts "Saved og-image.png"The response body is the file itself — no JSON envelope to unwrap, no second download request. Errors come back as JSON with a stable error code.
The OG Image API reference documents every parameter. The ones people reach for first:
width/height — defaults to the OG standard 1200×630device_scale_factor: 2 — retina-sharp textcache_ttl: 604800 — published posts don't change; cache for 7 days freeog:image straight at the API1200×630 (the default) renders crisply everywhere — X, Facebook, LinkedIn, Slack, iMessage. Use device_scale_factor: 2 for retina-sharp text.
Yes — {{variable}} values are HTML-escaped by default. Use triple braces {{{variable}}} only for trusted markup.
Yes — load Google Fonts or any @font-face in your template; the engine waits for fonts to be ready before capturing.