How to Generate an OG Image for Social Sharing

Use an online OG image generator when you need a 1200×630 PNG for link previews on Facebook, LinkedIn, X/Twitter, Slack, and similar platforms. ogimage.website provides templates, font controls, and optional app screenshots, then exports the finished image as a 1200×630 PNG. The steps below cover building the image, exporting it, wiring it into your page's og:image meta tag, and verifying the preview.

What an OG image is and when you need one

An OG (Open Graph) image is the picture platforms show when someone shares a link. Without one, the platform guesses — often pulling a random image or cropping your logo badly.

You need a dedicated OG image when:

• Your page has no large, well-composed image near the top.
• Your existing image is not close to the 1200×630 aspect ratio (1.91:1).
• You want consistent branding across every shared link.

1200×630 is the widely used target size. It satisfies the minimum dimensions most platforms require and matches the 1.91:1 ratio they crop toward.

Step-by-step: build the image

1. Pick a template

Open the generator and choose a template that matches your content type — article, product, or announcement. Templates set the base layout so you are not positioning elements from scratch.

2. Enter your text

Type the title and any supporting description into the template's text fields. Keep the title short enough to read at thumbnail size; previews are often displayed small in a feed.

3. Add a visual

Upload a screenshot or image, or use the built-in screenshot capture if the tool offers it. ogimage.website supports optional app screenshots, which is useful for product or app pages. Position the image so it does not collide with your text.

4. Adjust fonts and colors

Set the font and color scheme to match your brand. The generator exposes font controls, so pick a typeface that stays legible when the image is scaled down.

5. Export as 1200×630 PNG

Export the finished design. The output is a 1200×630 PNG. PNG keeps text and UI screenshots sharp, which matters when your image contains small labels or interface details.

Step-by-step: publish and verify

6. Upload the PNG and get its URL

Host the exported file somewhere publicly reachable — your site's media folder, a CDN, or an image host. You need a full absolute URL (starting with https://), not a local file path.

7. Add the og:image meta tag

Place these tags in the <head> of the page being shared:

<meta property="og:image" content="https://example.com/images/og-page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of the page." />

The og:image:width and og:image:height tags help platforms render the preview without waiting to fetch and measure the file.

For X/Twitter, add a card type so the large image layout is used:

<meta name="twitter:card" content="summary_large_image" />

8. Check the preview

Run the page URL through a platform preview/debug tool (for example, Facebook's Sharing Debugger or LinkedIn's Post Inspector) and through a general OG preview checker. Confirm:

• The correct image appears.
• The title and description match.
• Nothing important is cropped at the edges.

If a platform shows a stale image, use its debug tool to force a re-scrape.

Common snags

Choosing between building your own and using a generator

Use a generator like ogimage.website when you want a finished image quickly without design software, and when templates plus font controls cover your needs. Build the image manually in a design tool when you need a layout the templates do not support or precise control over every element. Either way, the output requirement is the same: a 1200×630 PNG served from a public URL and referenced in your og:image meta tag.