OGP Image Generator
Create 1280x630 OGP images in real time from title, description, site name, and image URL. Includes social preview checks and PNG download.
Last updated:
How to Use
Expand how to useCollapse how to use
- 1
Enter content
Fill in title, description, site name, and image URL. Image URL is optional.
- 2
Check preview
Review the generated OGP image and platform previews for X, Facebook, LINE, and LinkedIn.
- 3
Download PNG
Click 'Download PNG' to save the generated OGP image.
Preview updated: Enter a title
Input Settings
If the image URL cannot be loaded, the generator will use a gradient background.
Generated Preview
Output size: 1280 x 630 px
Social Preview Check
X (Twitter)
Enter a title
When you enter a description, preview text will appear here.
Your Site
Enter a title
When you enter a description, preview text will appear here.
Your Site
LINE
Enter a title
When you enter a description, preview text will appear here.
Your Site
Enter a title
When you enter a description, preview text will appear here.
Your Site
About OGP Image Generator
OGP Image Generator is a tool for creating social sharing images. OGP (Open Graph Protocol) images define the thumbnail displayed when a web page is shared on X (formerly Twitter), Facebook, or LinkedIn. Pages without a proper OGP image appear visually weak in social feeds, reducing click-through rates. As you edit the text fields, the image is regenerated in real time so you can download it immediately — no design tool required.
Key Features
- Real-time generation of 1280x630 OGP images
- Input support for title, description, site name, and image URL
- Preview checks for X / Facebook / LINE / LinkedIn
- Direct PNG download of generated output
- Fallback gradient generation when image URL cannot be used
Use Cases
- Create an eye-catching share image for a blog post or article before publishing
- Generate OGP images for a product launch or landing page
- Preview how your page will look when shared on X, Facebook, or LinkedIn
- Quickly produce share images for email newsletters or press releases
- Test og:image meta tag placement without needing Figma or Photoshop
FAQ
Why does it generate at 1280x630?
This wide format is practical for major social platforms and works well as a common OGP image size.
Why doesn't my image URL appear sometimes?
Some external images block browser access due to CORS settings. In that case, the tool generates without a background image.
Is my input data sent to a server?
No. Image generation uses HTML Canvas API in your browser. Input text and images are not transmitted to any server.
Can I use it on mobile?
Yes. The UI is responsive and works on desktop, tablet, and mobile devices.
How do I set the generated image as my OGP image in HTML?
Upload the downloaded PNG to your server or CDN, then set that URL in the HTML meta tag: <meta property="og:image" content="your-image-url">. It is also recommended to include og:image:width set to 1280 and og:image:height set to 630 so social crawlers interpret the dimensions correctly.
Do I need separate meta tags for the text shown on social platforms?
Yes. The OGP image is just a thumbnail image file. The title and description shown in social share cards are controlled by the og:title and og:description meta tags in your HTML. For a consistent appearance, use the same text in both the image and the meta tags.