OG Image Generator

Create beautiful Open Graph images, Twitter/X headers, and blog covers in just a few clicks.

Choose a template

Template Properties

Customize your image by changing the properties.

Background

Set a custom background for your image.

Grid Overlay
0.15
Preview

Save Image

Export the image as a PNG, JPEG or WebP.

For optimal Open Graph (OG) Image display on social media platforms like Twitter, Facebook, and LinkedIn, use PNG (recommended), JPEG or WebP format.

How to Add Open Graph Image

Add social media preview images to your website in minutes. Choose your preferred method below (HTML or Next.js App Router).

1. Save the image

Save your generated OG image as og.png in your website's root directory.

2. Add to HTML head

<!-- Basic OG Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og.png" />
<meta property="og:url" content="https://yourdomain.com" />

<!-- Twitter/X Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og.png" />

<!-- Optional but recommended -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

Make sure to replace yourdomain.com with your actual domain name.