OGP Image Generator — Create Social Share Images (1200×630)
Generate OGP/social share images (1200×630px) in your browser. Custom title, subtitle, colors, and download as PNG.
Template
Color
About OGP Image Generator — Create Social Share Images (1200×630)
Free browser-based OGP image generator. Choose from 6 professional templates (Gradient, Dark, Minimal, Split, Bold, Card), customize colors with presets or a color picker, enter your title and description, then download a 1200×630 PNG — no server upload, no account needed.
How to Use
- 1Select a template from the 6 options: Gradient, Dark, Minimal, Split, Bold, or Card.
- 2Enter your title, description, site name, and tag — the preview updates in real time.
- 3Adjust colors with a preset or color picker, then click the PNG Download button to save a 1200×630 image.
Features
- 6 professional templates (Gradient, Dark, Minimal, Split, Bold, Card)
- Color presets + color picker for instant palette changes with live preview
- One-click download of a 1200×630 px PNG (OGP recommended size)
- Copy ready-to-use OGP HTML tags to your clipboard
- Runs entirely in your browser — no upload, no account required
OGP Images and Social Media Sharing
When a link is shared on Facebook, Twitter/X, LinkedIn, Slack, or messaging apps, the platform fetches the og:image tag to display a preview card. A well-designed OGP image dramatically increases the click-through rate of shared links compared to pages without one.
Why OGP Images Matter
Studies of social media link engagement consistently show that posts with rich image previews outperform text-only link posts. On platforms like Facebook, link posts with large card images receive significantly more clicks than those without. LinkedIn research shows that content with images gets more engagement than text-only posts. When users scroll through a feed, an OGP image that communicates the page topic visually and clearly gives the link a fraction-of-a-second opportunity to interrupt the scroll. Pages without og:image tags rely on the platform scraping an arbitrary image from the page content — often a logo, advertisement, or unrelated thumbnail — which creates an unprofessional and sometimes confusing share appearance.
Technical Requirements by Platform
Facebook and LinkedIn recommend 1200×630 pixels at a 1.91:1 aspect ratio. Twitter/X supports this size for "summary_large_image" cards and crops to approximately 2:1 for the timeline view. Slack and most messaging apps display the image as a thumbnail next to the link title. Keep the image file size under 8MB (most platforms enforce this limit), and use JPEG for photographs or PNG for graphics with text and solid areas. The image URL must be publicly accessible — images behind authentication will not appear. Use an absolute URL with https:// in the og:image tag. After uploading a new OGP image, use the Facebook Sharing Debugger to clear the platform's cached version of your page.
Design Principles for OGP Images
Effective OGP images balance text readability and visual impact within the 1200×630px frame. Use high-contrast text that remains readable at thumbnail size — at least 32px font size for titles. Keep the core message within the central 80% of the image to avoid important content being cropped on platforms with different aspect ratios. Use your brand colors and a consistent template across all pages for instant recognizability in shared feeds. Include the page title and optionally the site name, but avoid dense body text — OGP images are seen at small sizes and serve as visual headlines, not content summaries. The six templates in this tool cover the most effective OGP design patterns.
Implementing OGP Images on Your Site
Generating the image is only part of the implementation. Correctly adding the og:image tag and managing image updates ensures your OGP images display properly across all platforms.
Adding OGP Tags to Your HTML
After generating and downloading your OGP image, upload it to your web server and note the full URL. Then add the og:image tag to your page's <head> section alongside the other required OGP tags: og:title, og:description, og:url, and og:type. The og:image tag looks like: <meta property="og:image" content="https://example.com/images/og-home.png">. For best results, also add og:image:width (1200) and og:image:height (630) so platforms know the dimensions without downloading the image first. Use the "Copy OGP Tags" button in this tool to get a ready-to-paste HTML snippet with all required tags.
CMS Integration (WordPress, etc.)
In WordPress, plugins like Yoast SEO and Rank Math have dedicated OGP image fields in their page/post meta boxes. Upload your generated OGP image as a media file, then set it as the "Social image" in the Yoast SEO or Rank Math settings panel for that page. For the site-wide default image (used when a page-specific image is not set), configure this in Yoast SEO → Social → Facebook → Default image, or Rank Math → Titles & Meta → Global Meta → Thumbnail Image. In other CMS platforms, look for "Social sharing image," "Open Graph image," or "Featured image for social" in the page settings.
Cache Busting and Debugging
Social platforms aggressively cache OGP data. After updating an OGP image, the change may not be visible on Facebook, LinkedIn, or Twitter immediately. Use the platform's debugging tools to force a re-scrape: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), Twitter Card Validator (cards-dev.twitter.com/validator). Enter your page URL in these tools to clear the cache and see the updated preview. For high-traffic pages, update OGP images during low-traffic periods, as the cache is refreshed by actual shares — many shares during the transition period may show the old image.
FAQ
- What is the recommended OGP image size?
- 1200×630 px is the size recommended by Facebook, X (Twitter), Slack, and other major platforms. This tool exports exactly that size.
- Can I use non-Latin (Japanese, etc.) text?
- Yes. The tool uses system fonts installed on your device (e.g. Hiragino Sans on macOS, Yu Gothic on Windows), so Japanese and other Unicode text renders correctly.
- How do I use the generated image on my blog?
- Download the PNG, upload it to your server, then set the URL as the og:image value. Use the "Copy OGP Tags" button to get a ready-made HTML snippet.
- Is commercial use allowed?
- Yes. Images you generate are yours to use freely, including for commercial projects.
- Can I change the font?
- Currently the tool uses your system fonts. The result depends on your device environment. Web font support is planned for a future update.
Found a bug or something not working as expected?
Report a bug →