🖼 OGP Image Generator
Choose title, subtitle, author and a gradient preset, then generate a 1200x630 OGP / social-share image via Canvas. Color and font size adjustable.
🔒 About Privacy
- ・All processing happens entirely in your browser
- ・Your text and images are never sent to any server
- ・No storage logs, no history, no database
- ・No signup, no login, no payment ever
📖 Where people get stuck
Build a 1200×630 OGP image from a title, subtitle, author name and a background preset, and download it as PNG. Everything runs in the browser. Producing the image does nothing on its own: it takes effect only once og:image in the <head> points at it with an absolute URL. Confirm the result with the OGP check.
| Case | What happens | What to do |
|---|---|---|
| The text gets cropped | An image built at 1200×630 gets cropped differently by each platform. A large card on X is roughly 2:1, previews in Slack and Discord are shorter still, and mobile shows it smaller again. Text near an edge, or a logo in a corner, will be cut off somewhere. | Leave roughly 100 px of margin on every side and keep the content inside the central 1000×430. Aim for a title of no more than two lines at 60 px or larger. Picture it in a phone timeline, at the size of a thumb — text you cannot read at that size is not earning its place. Legibility of a single-line title beats any amount of decoration. |
| The same image on every page | Reusing one site-wide image means every article shares the same picture. In a timeline the differences between them vanish, and the click rate goes with it. A logo-only image carries no information beyond "some article on this site"; the person seeing it has to read the accompanying text to learn anything at all. | At minimum, give each page an image with its title burned in. Beyond a few dozen articles doing it by hand will not last, so generate them at build time — ImageResponse in Next.js, Satori, or a Playwright screenshot. This page suits the first few dozen pages, before that machinery exists, and one-off announcement pages. |
| The old image keeps showing after an update | Social platforms cache a fetched OGP image for days or weeks. Swap the file behind the same URL and the old picture keeps appearing until the cache lapses. Appending a query string such as ?v=2 is not reliable, because some platforms ignore it. |
Change the filename: a new URL such as ogp-v2.png is fetched fresh regardless of any cache. To repair posts already out there, the Facebook Sharing Debugger, the Card Validator on X and the LinkedIn Post Inspector will force a refetch on that platform. Note that this does not necessarily update every past post. |
An OGP image has no effect on search ranking. What it affects is the click rate when something is shared socially, and how a link looks pasted into Slack or Discord. Which means an elaborate image on an admin screen or a terms page that nobody shares is not worth the effort. Spend it on the articles and landing pages people actually share. Use JPEG or PNG: some platforms still do not handle SVG or WebP. Keep it under 5 MB, ideally around 300 KB, and the preview generates faster.
📖 How to Use
-
1
Enter textEnter title, subtitle, author and an emoji.
-
2
Choose stylePick a gradient preset, text color and title size. The preview updates live.
-
3
DownloadSave as 1200x630 PNG or JPEG, ready for og:image / twitter:card.
❓ Frequently Asked Questions
Can I use generated images commercially?
Do Japanese and emoji render correctly?
Why is og:image 1200x630?
🔗 Related Tools
🐛 Found a bug or issue with this tool?
Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.
Thanks for your report!
Your report has been delivered to the operator and will be used to improve the tool.