Social Card (Open Graph Image) Generator
Design a 1200×630 Open Graph image with your title, description and site name on a gradient, download the PNG and copy matching og: and Twitter meta tags.
Social networks need an absolute https:// URL.
What is Social Card Generator?
When a link is shared on Facebook, LinkedIn, X/Twitter, Slack or Discord, the platform shows the page's Open Graph image. This tool creates that image in the recommended 1200 × 630 px size from your Title, Description and Site name on a colored gradient, and writes the matching og: and twitter: meta tags.
How to use Social Card Generator
- Type the Title, Description and Site name or domain.
- Pick a Theme or set the gradient and text colors yourself.
- Click Download PNG and upload the image to your site.
- Enter the Page URL and Image URL, then copy the Open Graph and Twitter meta tags into your page's
<head>.
Example
Title: Hello OG
<meta property="og:title" content="Hello OG"> … <meta name="twitter:card" content="summary_large_image">
Plus a 1200 × 630 PNG image.
When to use Social Card Generator
Use it for blog posts, product launches, documentation pages and any page you expect to be shared. For thousands of pages, generate images automatically at build time instead. Social platforms cache previews, so after changing an image use their debug tools (Facebook Sharing Debugger, LinkedIn Post Inspector) to refresh it.
How Social Card Generator works
The card is drawn on a 1200×630 canvas: a diagonal linear gradient background, the site name at the top, the title in bold (the font size shrinks from 72 px down to 40 px until it fits in three lines, with greedy word wrapping and character breaking for scripts without spaces) and up to two lines of description. Right-to-left text such as Arabic is aligned to the right automatically. The meta tags include og:title, og:description, og:url, og:image with width and height, and twitter:card set to summary_large_image, with all values HTML-escaped.
Common Use Cases
- Creating a share image for a new blog post
- Making consistent preview cards for documentation pages
- Announcing a product launch on LinkedIn and X
- Generating the og:image meta tags for a landing page
FAQs
What size should an Open Graph image be?
1200 × 630 pixels (about 1.91:1) is the recommended size for Facebook, LinkedIn and X large cards.
Why must the image URL be absolute?
Social platforms fetch the image from their own servers, so og:image must be a full https:// URL, not a relative path.
My new image does not appear when I share the link
Platforms cache previews. Re-scrape the URL with the platform's debugger or wait for the cache to expire.