Start from real Open Graph metadata
Fetch title, description, site name, and existing og image data through the API request before asking AI for directions.
Tool task
OG Image Generator
Design publish-ready social images for product launches, blog posts, and link previews. Enter a page URL or brief, let AI suggest copy, colors, and templates, then preview and export the final image.
Generate, edit, and export social images with AI
Use the left panel for URL metadata, brief, size, and template controls. Preview on the right, then download PNG, JPEG, or WebP.
Why Tomako
Why create OG images with Tomako
AI suggests direction, Canvas exports reliably
AI returns title, subtitle, template, and palette ideas. The final image is rendered locally through Canvas for predictable downloads.
One brief covers multiple channels
Open Graph images, Twitter/X headers, and blog featured images share the same copy and brand system, reducing repetitive design work.
Implementation
How to use generated OG assets
After download, upload the image to your public folder, CMS, or object storage and reference it with an absolute URL. Social platforms cache previews, so refresh their debuggers after deployment.
HTML
Works for static pages, landing pages, and any server-rendered template.
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short preview summary." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.png" />Next.js App Router
Use the metadata API in Next.js 13+. Prefer absolute image URLs.
export const metadata = {
openGraph: {
title: "Your page title",
description: "A short preview summary.",
images: ["https://example.com/og-image.png"],
},
twitter: {
card: "summary_large_image",
images: ["https://example.com/og-image.png"],
},
};Nuxt
Use Nuxt 3 useSeoMeta from a page or layout.
useSeoMeta({
ogTitle: "Your page title",
ogDescription: "A short preview summary.",
ogImage: "https://example.com/og-image.png",
twitterCard: "summary_large_image",
twitterImage: "https://example.com/og-image.png",
});Vue
In a Vue app, use a head manager or render these tags from your server template.
useHead({
meta: [
{ property: "og:title", content: "Your page title" },
{ property: "og:image", content: "https://example.com/og-image.png" },
{ name: "twitter:card", content: "summary_large_image" },
{ name: "twitter:image", content: "https://example.com/og-image.png" },
],
});More Tips
Check these before publishing
Keep key content in the safe center
X headers and CMS thumbnails can crop the edges. Keep titles, brand names, and primary shapes away from the border.
Use one message per image
A social preview is not a full poster. Shorter titles and clearer contrast usually perform better in link cards.
Use PNG for the final quality check
PNG is better for sharp text and UI-like graphics. After checking quality, export JPEG or WebP if your publishing surface needs smaller files.
What You Get
What you get
Open Graph image
A 1200 x 630 link preview for websites, product pages, launch posts, and social sharing cards.
Twitter/X header image
A 1500 x 500 profile or campaign banner for product launches, seasonal campaigns, and personal brands.
Blog featured image
A 1600 x 900 article cover for blogs, newsletters, content hubs, and CMS thumbnails.
Editable AI suggestions
AI returns several title, subtitle, template, and palette directions that you can select and keep editing.
Downloadable files
Export PNG, JPEG, or WebP files for public folders, CMS uploads, object storage, or social profile settings.
Clear failure boundaries
When URL fetching, OG metadata, or AI writeback fails, the page shows the real state instead of fake output.
Community
Who is using Tomako.ai
This module is reserved for external links, public examples, and customer logos. Add real product teams, creators, indie builders, and marketing teams here once public proof is ready.
Product teams
Indie builders
Content teams
Launch pages
Marketing sites
Creator blogs
After the OG image is ready, the next step is often matching avatars, profile banners, bios, and cross-platform profile assets.