Online Tool Store
· 3 min read
How to Create an Open Graph Image
Manesh Jayawardhana
CIO & Co-founder
When someone shares your page, the preview image often decides whether the link looks polished or forgotten. A missing or awkward Open Graph image can make even a good article, product page, or launch note feel unfinished.
An OG image generator helps you compose a 1200 x 630 social share image with title, description, theme, optional logo, safe-area guide, PNG download, and matching og:image meta tags.
What Open Graph images involve
Open Graph images are preview images used by social platforms and messaging apps when links are shared. A common recommended canvas is 1200 x 630 pixels, though platforms may crop differently.
The tricky part is safe area. Some previews crop toward a 2:1 shape or display the image in smaller cards, so important text and logos need to stay away from risky edges.
Why people get stuck here
People design at full size and forget that previews appear tiny. A long title may look fine in the editor and unreadable in a feed.
Another issue is missing meta tags. Creating the image is only half the work; the page also needs the correct Open Graph tags pointing to the image.
| Element | Why It Matters | Check |
|---|---|---|
| 1200x630 canvas | Common share size | Export correct dimensions |
| Title | Main message | Keep it short |
| Safe area | Cropping protection | Keep text inside |
| Meta tags | Page connection | Paste correct URL |
What a good OG image looks like
The message reads small
Use short, bold text. If it cannot be read in a small preview, simplify.
Important content avoids crop edges
Keep logos, faces, and titles inside the safe area when possible.
Meta tags match the final image URL
The image must be uploaded somewhere reachable, and the page meta tags should point to that final URL.
Common mistakes to avoid
- Writing a full paragraph on the image.
- Placing important text near crop edges.
- Forgetting to add or update Open Graph meta tags.
- Using a low-resolution image.
- Not testing the link preview after publishing.
How to do it with OG Image Generator
Online Tool Store’s OG Image Generator composes a 1200 x 630 share image with title, description, theme, optional logo, safe-area guide, PNG download, and meta tags.
- Open the OG Image Generator.
- Enter the title and description.
- Choose a theme.
- Add a logo if needed.
- Check the safe-area guide.
- Download the PNG.
- Use the generated
og:imagemeta tags on your page.
The tool runs in your browser, so it is quick for blog posts, launches, docs, and landing pages.
Frequently asked questions
What size should an OG image be?
1200 x 630 pixels is a common Open Graph image size for social sharing.
Why does safe area matter?
Some platforms crop previews. Safe-area guides help keep important text and logos visible.
Do I need meta tags too?
Yes. The image must be referenced by Open Graph meta tags on the page.
Final thought
Create an Open Graph image before the link is shared widely. A clear preview image is a small detail that makes a page feel ready.