The problem
Every time you share a link on Twitter, Slack, or LinkedIn, the platform fetches an og:image URL from your page's meta tags. If that image is missing or broken, your link shows up as a plain text snippet that nobody clicks.
Most teams either skip OG images entirely, hand-craft them in Figma, or set up a serverless function that renders HTML to PNG on the fly. All of these have trade-offs: manual work, cold starts, or infrastructure you have to maintain.
How 1tt.dev solves this
The OG Image Builder lets you design your image visually in the browser — pick a layout, set your title and subtitle, choose colors and fonts — and then gives you a permanent URL that serves the image directly. No build step, no deploy, no hosting to manage.
How the URL works
When you save a design, 1tt.dev creates a collection with a unique slug. The image is served from a URL like:
https://1tt.dev/og/s/your-collection/open-graph.png?subtitle=Your+Page+TitleThe subtitle query parameter lets you reuse the same design across multiple pages — your blog posts, docs pages, or landing pages can all share one base design with a different title per page.
Step by step
Open the OG Image Builder and pick a layout. There are presets for standard Open Graph (1200x630), Twitter cards, and custom sizes.
Customize the design — set your brand name, background color or gradient, font, and logo. The preview updates in real time.
Save your design to get a collection URL. You can also export the image as PNG for one-off use.
Add the URL to your page's <meta> tags. In Next.js, that looks like:
// app/blog/[slug]/page.tsx
export function generateMetadata({ params }) {
const title = encodeURIComponent(params.slug);
return {
openGraph: {
images: [`https://1tt.dev/og/s/YOUR_SLUG/open-graph.png?subtitle=${title}`],
},
};
}Checking your images
After deploying, use the OG Image Checker to verify everything works. Paste any URL and it fetches the page's meta tags, shows the resolved og:image, and flags common issues like missing dimensions or wrong aspect ratios.
Custom layouts
Beyond the built-in presets, the OG builder supports custom layouts that you can save and reuse. Layouts are stored in your browser (and optionally synced to the cloud) so they're available whenever you come back.
If you need more control — like pulling in dynamic data or rendering complex HTML — the image URLs also support additional query parameters for overriding colors, fonts, and layout options at request time.