logo
Start creating

How to build an OG image service with Picsart Skills

SKILLS4 minIntermediate

Turn any URL or title into branded social preview images served from your backend.

How to build an OG image service with Picsart Skills

What you'll learn

  • How to set up an automated OG image generation service
  • How to pass URLs or titles to generate branded preview cards
  • How to serve generated images directly from your backend
  • How to maintain brand consistency across all social shares

What is an OG image service?

An OG image service automatically generates branded social preview cards (Open Graph images) for your content. Instead of manually designing a preview image for every page, URL, or blog post, the service creates them on-demand with consistent branding. Think of it like having a designer on standby who instantly creates a polished social card every time someone shares your link.

Common use cases

  • Blog platforms: Auto-generate preview cards for every new article
  • SaaS apps: Create branded social shares for user-generated content
  • E-commerce: Generate product preview cards from SKU data
  • Documentation sites: Build preview images for every doc page
  • Marketing teams: Maintain brand consistency across all shared links
  • Developer portfolios: Create preview cards for project showcases

Build your OG image service step by step

STEP 1: Install Picsart Skills

  • On web: Go to picsart.com/cli → Copy the install command for your OS
  • On mobile: Not available — Skills runs in terminal environments only
Get Picsart Skills

STEP 2: Configure your brand template

Set up the template that defines how your OG images look:

  • Brand colors: Define your primary and accent colors in brand.md
  • Typography: Specify font families, sizes, and weights for titles and metadata
  • Layout: Choose between centered, split, or custom card layouts
  • Logo placement: Set position, size, and opacity for your brand mark

STEP 3: Wire the service into your backend

Connect the generation endpoint to your routing logic. When a URL is requested, your backend calls the Picsart Skill with the page title and metadata, generates the image, and serves it as the og:image response. The entire process happens server-side in milliseconds.

STEP 4: Test and deploy

Check that generated images meet your brand standards: Not happy with the output? Adjust your brand.md template settings and regenerate. You can iterate until the style matches your visual identity perfectly.

  • Verify text is readable at small sizes (LinkedIn and Twitter previews)
  • Check that colors and logos match your brand guidelines
  • Test with long titles to confirm text wrapping works correctly
Start building

Tips for best results

💡 Cache generated images

Store generated OG images in your CDN or object storage. Only regenerate when page content changes. This saves credits and speeds up page loads.

💡 Use fallback templates

Define a default template for pages without custom metadata. This ensures every URL gets a preview card, even if title or description are missing.

💡 Test across platforms

Preview your OG images in LinkedIn, Twitter, Slack, and Facebook debuggers. Each platform crops differently, so design with safe zones for text.

💡 Version your templates

Keep old template versions in your repo. If you rebrand, you can regenerate all OG images in one batch command without manual work.

Frequently asked questions

An OG image service automatically creates branded social preview cards for your links. When someone shares your URL on Twitter, LinkedIn, or Slack, the service generates a polished image with your title, logo, and brand colors. Without it, social platforms show a generic preview or no image at all, which hurts click-through rates.

No, the OG image service runs as a backend process. It needs the Picsart CLI installed on your server or in your deployment environment. The CLI handles generation requests from your routing logic and returns images to serve as og:image tags.

Your backend extracts the page title and metadata from the requested URL, then passes them as variables to the Picsart Skill. The Skill renders these into the template and returns the generated image. Most setups use a route like /og-image/:slug that triggers generation on-demand.

Yes. You can generate OG images at build time or on-demand using serverless functions. For static builds, run a batch generation script that creates an image for every page. For dynamic content, use an API route that generates images when requested.

Ready to automate your social previews?

Build a branded OG image service that generates preview cards for every URL you share.

Get started