Choose a template

Template Properties

Customize your image by changing the properties.

Background

Set a custom background for your image.

Gradient Direction
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.

Why Choose ogImage.click?

Everything you need to create stunning social media images in seconds

Free and No Sign-up Required

Start creating professional OG images instantly - no registration or credit card needed. Access all features completely free.

Multi-Platform Support

Generate optimized images for any platform with the correct dimensions. Perfect for Open Graph, Twitter/X headers, and more.

Professional Templates

Choose from multiple professionally designed templates including Basic, Hero, Image Right, Notice, and Logos layouts.

Flexible Export Options

Export your designs in PNG, JPEG, or WebP formats with optimized file sizes while maintaining high quality.

Advanced Customization

Personalize every aspect with custom backgrounds, patterns, gradients, and brand colors. Upload your logos and images.

Modern Design Features

Create stunning visuals with premium typography, grid overlays and visual effects.

Instant Preview

See your changes in real-time with our WYSIWYG interface. Get immediate visual feedback as you design.

Lightning Fast

Generate professional social media images in seconds with our intuitive interface and optimized workflow.

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.

Pro Tips

  • Always provide fallback images in case the OG image fails to load
  • Test your OG images using social media debugging tools
  • Use descriptive alt text for better accessibility
  • Consider using dynamic OG images for content that changes frequently

Learn More