OG Image Generator& Social Preview
Pure client-side Canvas rendering with multiple templates. Create 1200x630 social preview images with custom titles, colors, and layouts. Images never leave your browser.
Template Style
Accent Color
Font Size
HTML Meta Tags
Upload the downloaded image to your server, then use the URL in these tags
<!-- Open Graph --> <meta property="og:image" content="https://yoursite.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/og.png" />
Preview · 1200 x 630
Did this tool solve your problem?
Code Examples
HTML
<!-- Open Graph meta tags --> <meta property="og:title" content="Your Title" /> <meta property="og:description" content="Description" /> <meta property="og:image" content="https://example.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:type" content="article" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og.png" />
Next.js (App Router)
// app/page.tsx
export const metadata: Metadata = {
openGraph: {
title: "My Page Title",
description: "Page description",
images: [
{
url: "https://example.com/og.png",
width: 1200,
height: 630,
alt: "Preview image",
},
],
},
twitter: {
card: "summary_large_image",
},
};React (Helmet)
import { Helmet } from "react-helmet-async";
function SEOHead({ title, image }) {
return (
<Helmet>
<meta property="og:title" content={title} />
<meta property="og:image" content={image} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
name="twitter:card"
content="summary_large_image"
/>
</Helmet>
);
}WordPress (functions.php)
// Add OG Image to WordPress
function add_og_image() {
if (is_singular()) {
$image = get_the_post_thumbnail_url(
get_the_ID(), 'full'
);
if ($image) {
echo '<meta property="og:image"
content="' . esc_url($image) . '" />';
echo '<meta property="og:image:width"
content="1200" />';
echo '<meta property="og:image:height"
content="630" />';
}
}
}
add_action('wp_head', 'add_og_image');Frequently Asked Questions
What is an OG Image and why do I need one?
An OG Image (Open Graph Image) is the preview image displayed when a webpage is shared on social media. When you post a link on Twitter, Facebook, LinkedIn, or messaging apps, the platform fetches the og:image meta tag to create a visual card. A well-designed OG image significantly boosts click-through rates and is a key element of SEO and social media marketing.
What is the standard OG Image size?
The recommended size is 1200x630 pixels (aspect ratio 1.91:1), which is optimal for Facebook and most social platforms. Twitter's summary_large_image card also uses this size. LinkedIn recommends 1200x627, which is close enough to be interchangeable. This tool generates 1200x630 images compatible with all major platforms.
Are the generated images uploaded to any server?
No. Images are rendered entirely in your browser using the Canvas API with no server-side processing. When you click download, the image saves directly to your device. Your titles, descriptions, and other content are never transmitted or stored anywhere.
How do I add the generated OG Image to my website?
Upload the downloaded image to your web server or CDN, then add meta tags in your HTML <head>: <meta property="og:image" content="IMAGE_URL" />. Also add og:image:width and og:image:height for faster parsing. In Next.js, set openGraph.images in generateMetadata. In WordPress, most SEO plugins like Yoast handle this automatically.
Why doesn't my OG Image update after I change it?
Social platforms cache OG images. Use Facebook's Sharing Debugger (click 'Scrape Again'), Twitter's Card Validator, or LinkedIn's Post Inspector to force a cache refresh. Adding a version parameter to the image URL (e.g., ?v=2) also helps bypass caching.
What template styles are available?
Four templates are available: Gradient (ideal for tech blogs), Dark (for developer content), Minimal (for business documents), and Split (for product showcases). Each template supports custom accent colors (10 presets + custom color picker) and 3 font size options, creating hundreds of possible visual combinations.