Free OG Image Generator
Crop any image to 1200×630 px (1.91:1) or 1080×1080 px (1:1), adjust quality, and get copy-ready Open Graph & Twitter meta tags — free, private, runs in your browser.
Format: language_TERRITORY — omit if your content is in English
Drop one image here or click to select
PNG, JPG, WebP, SVG — screenshots, logos, or icons
<meta property="og:type" content="website">
<meta property="og:image" content="INSERT_IMAGE_URL_HERE">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
How to use this OG image generator
- Click or drag any JPG, PNG, WebP, AVIF, or GIF image onto the editor. The image loads instantly in your browser — nothing is uploaded to any server.
- Choose an aspect ratio: 1.91:1 (1200×630 px) for standard Facebook and Open Graph, or 1:1 (1080×1080 px) for Instagram-style square previews.
- Drag the image to reposition it inside the crop frame. Use the zoom slider or mouse wheel to zoom in and out. On mobile, use pinch-to-zoom.
- Use the quality slider to balance file size and sharpness. 80–90 % typically gives a crisp JPEG under 150 KB — the file size updates in real time.
- Switch to Preview to see a live social card mock-up of how your link will appear on Slack, Discord, Facebook, and other platforms.
- Click Download to save the cropped JPEG. Fill in the meta tag fields, copy the generated HTML, and paste it into your page's <head> section.
The tool runs entirely in your browser — no file is ever uploaded to a server. Cropping, quality adjustment, and JPEG export all happen locally via the Canvas API. This means your images stay private and the tool works even offline after the page has loaded.
OG image size requirements by platform
Different platforms handle Open Graph images differently, but the 1200×630 px JPEG at 1.91:1 ratio covers virtually every major platform. Use the 1:1 square format only when specifically targeting Instagram link stickers or Twitter summary cards.
| Platform | Recommended size | Aspect ratio | Max file size |
|---|---|---|---|
| Facebook / Open Graph | 1200×630 px | 1.91:1 | 8 MB |
| Twitter / X (large card) | 1200×628 px | ~1.91:1 | 5 MB |
| Twitter / X (square) | 1080×1080 px | 1:1 | 5 MB |
| 1200×628 px | 1.91:1 | 5 MB | |
| Slack & Discord | 1200×630 px | 1.91:1 | — |
| 1200×630 px | 1.91:1 | — | |
| iMessage / Apple | 1200×630 px | 1.91:1 | — |
| Google Discover | 1200×630 px | ≥ 1.2:1 | — |
All platforms fall back to og:image if a platform-specific tag is not set. For most sites, one 1200×630 px JPEG covers all platforms.
Minimum size and the "small image" fallback
Facebook requires a minimum of 600×315 px to show a large preview card. Below that, it falls back to a small thumbnail (≈ 158×158 px) in the corner of the link preview — a much weaker visual impression. Always use at least 1200×630 px to guarantee the large card layout.
Why JPG and not WebP for OG images?
While WebP produces 25–34 % smaller files than JPEG for the same visual quality, it is not universally supported by link preview scrapers. WhatsApp, iMessage, older Slack clients, and many email preview renderers cannot decode WebP. A broken or missing image in a link preview is far worse than a slightly larger JPEG. Stick with JPEG for maximum compatibility — aim for 80–90 % quality to keep the file under 150 KB.
How to add og:image meta tags to your site
After downloading your cropped image, upload it to your web server or CDN and replace INSERT_IMAGE_URL_HERE in the generated code with the public URL. The URL must be absolute (starting with https://) — relative URLs are not supported by any link scraper.
Plain HTML
Paste directly inside the <head> of your HTML file:
<!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/page"> <meta property="og:title" content="Page Title — Brand Name"> <meta property="og:description" content="Page description — 120–160 characters recommended."> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:site_name" content="Brand Name"> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Page Title — Brand Name"> <meta name="twitter:description" content="Page description — 120–160 characters recommended."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
React + Vite (react-helmet-async)
Install react-helmet-async, wrap your app in HelmetProvider, then add <Helmet> to each page component:
import { Helmet } from 'react-helmet-async'
export default function MyPage() {
return (
<>
<Helmet>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="Page Title — Brand Name" />
<meta property="og:description" content="Page description." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
</Helmet>
{/* page content */}
</>
)
}Next.js 13+ (App Router)
Export a metadata object from your page.js. Next.js renders all OG tags server-side — no extra library needed:
// app/my-page/page.js (Next.js 13+ App Router)
export const metadata = {
title: 'Page Title — Brand Name',
description: 'Page description.',
openGraph: {
type: 'website',
url: 'https://example.com/page',
title: 'Page Title — Brand Name',
description: 'Page description.',
siteName: 'Brand Name',
images: [
{
url: 'https://example.com/og-image.jpg',
width: 1200,
height: 630,
type: 'image/jpeg',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Page Title — Brand Name',
description: 'Page description.',
images: ['https://example.com/og-image.jpg'],
},
}Vue 3 + Nuxt 3
Use the built-in useHead() composable inside <script setup>:
// pages/my-page.vue (inside <script setup>)
useHead({
meta: [
{ property: 'og:type', content: 'website' },
{ property: 'og:url', content: 'https://example.com/page' },
{ property: 'og:title', content: 'Page Title — Brand Name' },
{ property: 'og:description', content: 'Page description.' },
{ property: 'og:image', content: 'https://example.com/og-image.jpg' },
{ property: 'og:image:width', content: '1200' },
{ property: 'og:image:height', content: '630' },
{ property: 'og:image:type', content: 'image/jpeg' },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:image', content: 'https://example.com/og-image.jpg' },
],
})WordPress
Install Yoast SEO or Rank Math — both add a meta box on every post and page where you set the OG title, description, and image. After uploading your 1200×630 JPG to the Media Library, select it as the social preview image. Both plugins output og:image:width and og:image:height automatically.