FeatureImgFeatureImg
Sign in

Open Graph Image Generator

Create an Open Graph image online in four steps: choose the OG format, pick a template, edit your title and subtitle, then export a 1200×630 link preview image for blog posts, landing pages, and social shares.

Quick creator

What is an Open Graph image?

An Open Graph image is the preview graphic platforms show when someone shares your URL. It usually comes from your page metadata and helps the link look clear in social feeds, chat apps, and messaging tools. A dedicated OG image is easier to control than a random crop from your page.

For recommended dimensions and cropping tips, see the Open Graph image size guide.

Common use cases

  • Blog posts and articles shared on social platforms
  • Landing pages and product launches
  • Product or feature announcement pages
  • Changelog, report, and newsletter share links

Recommended export size

1200×630 px

Recommended templates

Each opens in the editor with this format preset applied. Browse all templates

How it works

  1. Choose the Open Graph format so the canvas stays locked to 1200×630.
  2. Select a template that matches the page you are sharing.
  3. Edit the title and subtitle, then adjust contrast and background.
  4. Export PNG, JPEG, or WebP and add the file to your page metadata.

Best practices

  • Keep the title readable at small preview sizes.
  • Contrast text against the background so it survives compression.
  • Reuse one layout family so previews feel on-brand.

Implement Open Graph images in your website

After creating your Open Graph image, upload it to a public path on your site and reference it from your page metadata. This helps link previews display a clear title, description, and image across social platforms.

<!-- Basic Open Graph 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-image.png" />
<meta property="og:url" content="https://yourdomain.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" />

FAQ

Related Guides

Learn more about sizes, best practices, and ways to create better images for this format.

Create your next featured image

Start with a format, choose a template, and export a clean image in minutes.

Create your OG image