Introducing OG Image Generation

We're excited to announce one of the features we've been most looking forward to building - automatic OG image generation is now live in XForm Media.

What Are OG Images?

If you've ever shared a link on social media, in a messaging app, or on platforms like Slack or Discord, you've seen OG images in action. OG stands for Open Graph, a protocol originally introduced by Facebook that lets websites control how their content appears when shared. The most visible part of this is the preview image - that card-like snippet that shows up with a title, description, and image when someone pastes a link.

These preview images matter more than most people realise. A well-crafted OG image can be the difference between someone scrolling past your link or actually clicking through. They give your content a professional, polished appearance across every platform that supports link previews - and that's nearly all of them, from X and LinkedIn to WhatsApp and Teams.

The problem is that creating these images has traditionally been a manual process. You either design one for each page by hand, use a generic screenshot tool, or simply leave it up to the platform to pull whatever image it can find - which often means no image at all, or a random one that doesn't represent your content well.

How OG Images Work in XForm

We've built our OG image generator to be as simple as possible while giving you full control over the result. It works through a single URL endpoint on your XForm source, and there are three ways to use it depending on what you need.

No Image - Just Your Branding

The simplest approach uses no background image at all. XForm generates a clean, branded card using your configured background colour, logo, and text styling. Just hit the /og endpoint with your title and description:

https://your-source.xform.media/og?title=Your Page Title&description=A brief summary of the page

This is perfect for blog posts, documentation pages, or any content where a consistent, branded look is more important than a specific image. You configure your colours, fonts, and logo once in the dashboard, and every page gets a professional preview card automatically.

Default Background Image

Want something more visual? Upload a default background image in your OG settings, and it will be used as the backdrop for all your OG images. XForm composites your title and description over the image with a configurable overlay to ensure text remains readable.

This approach works well when you have a strong brand image or pattern that you want to appear consistently across all your social previews.

Runtime Image - Set Per Page

This is where things get really powerful. You can pass any image from your source as the background for a specific page's OG image by adding type=og to a regular image request:

https://your-source.xform.media/path/to/image.jpg?type=og&title=Your Page Title&description=Your description

Each page can have its own unique preview image - the hero image from a blog post, a product photo, a project screenshot - with your branding and text overlaid consistently. The image is fetched from your source, composited with your OG settings, and returned as a ready-to-use preview image.

Full Control from the Dashboard

We wanted the setup experience to feel lightweight and intuitive - something you can configure in a few minutes, not something that requires a design degree. The OG settings live right inside your source dashboard, and everything is visual.

Upload your logo and drag it into position. Pick your fonts from a curated selection of Google Fonts and set the size, weight, and colour for both your title and description text. Choose a background colour or upload a background image. If you're using an image, you can add a gradient or solid overlay so your text stays readable regardless of what's behind it. Add a border if it suits your brand. Drag and reposition your text container to lay everything out exactly how you want it.

The whole time, a live preview updates as you make changes, so you can see precisely how your OG images will look before anything goes live. There's no guesswork and no need to generate test images to check the result - what you see in the dashboard is what gets served to every platform that requests your OG image.

Just a URL in Your Meta Tags

Using OG images on your site is as simple as adding a meta tag to your page's <head>:

<meta property="og:image" content="https://your-source.xform.media/og?title=Your Page Title&description=Your description" />

No build step, no image generation pipeline, no extra infrastructure. Your site just points to a URL and XForm handles the rest - including caching for fast delivery.

Give It a Try

OG image generation is available now for all XForm sources. Head to your source settings in the dashboard, enable OG images, configure your branding, and start generating beautiful social previews for your site.

As always, we'd love to hear what you think. If you have feedback or feature requests, don't hesitate to reach out.

New to XForm? Check out our plans and get started today.