OG Image Generator
Design and render real 1200×630 Open Graph images right in the browser — pick a template, edit text, drop in a logo or background, and watch the same card render inside X/Twitter, LinkedIn, Facebook, Slack, Discord and iMessage mockups. Download the PNG and copy a polished meta-tag snippet.
About this ToolHow it works, benefits & use casesTap to collapse
The OG Image Generator builds the Open Graph and Twitter meta tags that control how your page looks when shared on social media. You point it at an existing image URL, give it a title and optional description, and it produces og:title, og:image, og:type, the matching og:image:width, og:image:height and og:image:alt, plus twitter:card (summary_large_image), twitter:title and twitter:image so a single block covers Facebook, LinkedIn, and X/Twitter. Four size presets — Facebook/LinkedIn 1200x630, Twitter 1200x675, Instagram 1080x1080, and Pinterest 1000x1500 — set the width and height fields with one click, or you can type your own dimensions. A live card preview renders your image, title, and description as a social card would, and broken image URLs hide gracefully. Output downloads as HTML and the configuration is captured in a shareable URL.
How to Use
- 1Click an image size preset (Facebook/LinkedIn, Twitter, Instagram, or Pinterest) to set width and height, or enter custom dimensions.
- 2Enter the required Page Title and the Image URL of the picture you want shown in the card.
- 3Optionally add a description, alt text, page URL, and site name to enrich the tags.
- 4Check the live preview card to confirm the image, title, and description look right.
- 5Click "Generate OG tags", then copy the markup, download it as og-tags.html, or share the URL.
Key Benefits
- Produces both Open Graph and Twitter Card tags from one form
- Four platform presets for Facebook/LinkedIn, Twitter, Instagram, and Pinterest dimensions
- Emits og:image:width, og:image:height, and og:image:alt for accurate, accessible previews
- Live card preview that mirrors how the share will render
- Custom width and height fields when a preset does not fit
- Download as HTML or share the entire configuration via URL
- Runs in-browser — your image URL and text never leave the page
Common Use Cases
- Setting up share previews for a blog post or product page before publishing
- Matching an image to the recommended dimensions for a specific platform
- Adding accessible alt text to social images alongside the visual tags
- Verifying a card layout visually before deploying and testing in a debugger
- Handing a ready-made tag block to a developer via a shareable link
Preview (1200×630)
Open Graph + Twitter Card tags from your model + image URL
<title>Build for the share preview, not just the page</title> <meta name="description" content="A 30-second guide to Open Graph images that actually convert." /> <meta property="og:title" content="Build for the share preview, not just the page" /> <meta property="og:description" content="A 30-second guide to Open Graph images that actually convert." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.consolelog.tools" /> <meta property="og:site_name" content="consolelog.tools" /> <meta property="og:image" content="https://your-site.example/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="Build for the share preview, not just the page" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Build for the share preview, not just the page" /> <meta name="twitter:description" content="A 30-second guide to Open Graph images that actually convert." /> <meta name="twitter:image" content="https://your-site.example/og.png" />
Templates
Content
46 chars
61 chars
Colors
Background
Uploads stay local and aren’t included in the share link. Use a CORS-friendly URL for shareable cards.
Logo (optional)
Output size & meta-tag options
Where you’ll host the PNG you download below.
A real OG card, not just a snippet
Every edit re-renders the actual 1200×630 PNG, then drops it into faithful mocks of X/Twitter, LinkedIn, Facebook, Slack, Discord and iMessage — so you see Twitter clipping the title at ~70 chars, LinkedIn enforcing 1.91:1, and Discord wrapping in its dark embed before your readers do. Download the PNG, host it, and paste the meta-tag block into your <head>.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Lorem Pixel GeneratorGenerate placeholder image URLs
- Text to SlugConvert text to URL-friendly slugs
- Image Optimization CalculatorPlan responsive images — recommended breakpoints with ×1/×2 DPR, ready-to-paste srcset/picture/Next.js <Image> markup, per-format byte estimates, and total savings vs shipping the full-size original
- PNG to ICOConvert PNG images to multi-resolution .ico favicons at any size
- Meta Tags GeneratorGenerate meta tags for SEO and social media
- Sitemap Priority CalculatorPaste a list of URLs and get a complete XML sitemap with priorities from a transparent, tunable model — each URL auto-classified by type & depth, with a per-row score breakdown and priority distribution analysis
No — it generates the meta tags that reference an image you already host. You supply the image URL, and the tool builds the og:image and twitter:image tags plus dimensions and alt text around it. A live preview renders your supplied image so you can confirm it before generating.
The presets set Facebook/LinkedIn to 1200x630, Twitter to 1200x675, Instagram to 1080x1080, and Pinterest to 1000x1500 pixels. Clicking a preset fills the width and height fields, which feed the og:image:width and og:image:height tags; you can also type any custom dimensions.