OG image generator
Type a title, pick a layout and colors, and download a 1200×630 Open Graph image. Free, no sign-up, no watermark.
Meta tags for your page head
<meta property="og:image" content="https://your-domain.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Your page title goes here" />
<meta name="twitter:card" content="summary_large_image" />How to make an OG image
1. Write the title
Use the title of the page. Keep it below 60 characters so that it stays large and readable in a small preview.
2. Pick layout and colors
Pick a layout, then set the background and accent to your brand colors. The text color changes automatically to stay readable.
3. Download and add the tags
Download the PNG, upload it to your site, and paste the meta tags into the head of the page.
Generate OG images in code
One image is quick to make by hand. A blog with 200 posts needs automation. The OG image templates are Next.js routes that render a card for each URL with Satori and Tailwind. Read the Next.js OG image guide, or clone the kit from GitHub.
Need ideas first? Browse the gallery of real OG image examples. When your image is live, test it with the OG image checker.
OG image generator questions
Is the OG image generator free?
Yes. The generator is free, needs no account, and adds no watermark. The code that renders the image is open source under the MIT license.
What size are the generated images?
Each image is 1200×630 pixels, a ratio of 1.91:1. X, Facebook, LinkedIn, Slack, Discord, WhatsApp, and iMessage all accept that size.
How do I generate OG images for every blog post?
Do not make them by hand. Clone the open-source kit and let a Next.js route render one image per page from the title. The templates use the same renderer as this generator.
How do I add the OG image to my website?
Upload the PNG to your site. Add a meta tag with property og:image and the full https URL of the file to the head of the page. Then test the page with the OG image checker.