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.

Features

Rapid Creation

Create stunning social media visuals in moments with our streamlined, user-friendly interface.

User-Friendly Interface

Navigate effortlessly through our intuitive design tools. Create professional images with just a few clicks.

Free and No Login Required

Enjoy full access to all features without any fees or registration requirements. Start creating immediately.

Diverse Templates

Use a wide range of professionally crafted templates, from minimalist designs to eye-catching layouts.

Cross-Platform Optimization

Generate images perfectly sized for various social platforms, including Open Graph, Twitter, and LinkedIn.

Extensive Customization

Tailor every element with custom backgrounds, gradients, and brand colors. Easily incorporate your own logos and images.

Real-Time Visualization

Experience immediate visual feedback with our live preview feature as you design your perfect image.

Flexible Export

Save your creations in PNG, JPEG, or WebP formats, balancing optimal file size with superior image quality.

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