What is an OG image?
An Open Graph image, often called an OG image, is the picture that appears when someone shares a web page on social networks or in a messaging app. Open Graph metadata gives those services a title, description, and image to use for the link preview. Without anog:imagetag, a platform may choose another image from the page or show a less useful preview.
Use this free OG image generator to choose a layout, edit your product name, headline, description, and accent color, then download a 1200 × 630 PNG. The first version includes ten editable layouts, with more styles planned.
The preview and PNG are generated in your browser, so your text, logo and screenshots are not uploaded or saved to a Firsto account. No account is required to use the generator.
OG image sizes by platform
A 1200 × 630 image (1.91:1) is a good cross-platform starting point, but platforms have their own requirements and may crop or resize previews. Keep important text and logos comfortably inside the image edges.
| Platform | Image guidance | File size | Notes |
|---|---|---|---|
| 1200 × 630 px recommended | Up to 8 MB | Minimum allowed dimensions are 200 × 200 px. | |
| 1200 × 627 px | Up to 5 MB | A 1.91:1 image is recommended for link previews. | |
| X (large image card) | 1200 × 630 px is a useful starting point | Check current X guidance | Keep text and logos away from the edges; preview crops can vary. |
| Slack, Discord and other chat apps | 1200 × 630 px is a widely compatible default | Varies by service | These services fetch metadata from your page and may cache the result. |
| Apple Messages | At least 900 px wide | 10 MB total linked-page resources | Apple recommends a high-resolution image; the total is not an image-only limit. |
Specifications can change. See the current guidance from Meta, LinkedIn, and Apple. Product gallery images, such as those uploaded to a launch directory, may use a different aspect ratio from an OG image.
How to add an OG image to your website
Download the PNG, publish it at a public HTTPS URL on your site, then add Open Graph metadata to the page’s HTML head. Use a complete image URL rather than a relative path so social crawlers can find it.
<meta property="og:title" content="Product: one-line value proposition" />
<meta property="og:description" content="What your product does, in one sentence." />
<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="Your product name and tagline" />
<meta name="twitter:card" content="summary_large_image" />Set the title, description, and image for each page. The width and height properties describe the image to crawlers, while the image alt text provides a text alternative. Add thetwitter:cardvalue to request a large image card on X. Social crawlers generally need metadata in the HTML response; don’t rely on client-side JavaScript to add it after the page loads.
Get your link preview ready before launch day
Social platforms cache link metadata and images. Before announcing a product, publish the final image and tags, then inspect the page on the services where you plan to share it. If you replace an image, publish it at a new URL or refresh the cached page preview.
- Publish the final PNG and update the page’s Open Graph tags.
- Check Facebook and Messenger with Meta’s Sharing Debugger.
- Refresh LinkedIn’s preview with its Post Inspector. This refresh affects new posts; it does not change previews on posts already published.
Need ideas for your next image? Browse the Open Graph images used by real products in the ogimagecn gallery.
Frequently asked questions
What size should an OG image be?
1200 × 630 pixels (about a 1.91:1 ratio) is a practical default for Open Graph images. It meets Meta’s preferred dimensions and is close to LinkedIn’s recommended 1200 × 627 format. This generator exports a 1200 × 630 PNG.
Should I use PNG or JPG?
This generator downloads PNG files, which keep typography and graphic edges crisp. JPEG can be a good choice for photography when file size matters, but it is not an export option here yet.
Why is my OG image not showing in a link preview?
Check that og:image points to an absolute HTTPS URL that is publicly reachable, and that your page includes the Open Graph tags in its initial HTML. The platform may also be showing a cached preview; refresh the URL with that platform’s inspection tool after publishing your changes.
Is this generator free, and does it add a watermark?
Yes. The tool is free to use, does not require an account, and does not add a Firsto watermark to the exported image.
Do I need a different OG image for each page?
A page-specific image is usually more useful than reusing the same generic card everywhere. Match the image, title, and description to the page people will open, while keeping your brand styling consistent.