FeatureImgFeatureImg

Browse all templates

Recommended export size

1200×630 px

How it works

  1. Open the OG image generator with the Open Graph format locked to 1200×630.
  2. Choose a template that fits the page you are sharing (text-led or split layouts).
  3. Edit title and subtitle, then adjust background, contrast, and optional imagery.
  4. Export PNG or JPEG, upload the file to your site, and set og:image to that URL.

Best practices

  • Target about 1200×630 px, the common default for rich link previews.
  • Keep the headline short enough to read at thumbnail size in feeds and chat.
  • Use strong contrast; platforms often recompress images aggressively.
  • Put the key words in the first half of the title in case edges are cropped.
  • Prefer PNG or JPEG for og:image (Meta lists JPEG, GIF, and PNG for og:image:type). Test WebP before relying on it, then set og:image and twitter:image to the final public URL.
  • Re-check the preview in Slack or LinkedIn after changing the image; some caches keep the old card until refreshed.

Implement Open Graph images in your website

After you generate an OG image, upload the file to a public path on your site and set og:image (and usually twitter:image) to that URL. Include width, height, and alt so crawlers can render the card reliably. Prefer PNG or JPEG for the widest link-preview compatibility; test WebP before using it as og:image.

<!-- 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:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph image" />
<meta property="og:image:type" content="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.

Start designing