Open Graph & Social Share Image Generator
Link-preview images with auto-fitting text and crop checks for each platform.
Preview 1200 × 630
X large card (2:1) Square thumbnail
How it is cropped
About the Open Graph & Social Share Image Generator
When someone shares your page on Facebook, LinkedIn or X, the preview shows the image named in your page’s og:image tag (X also reads its own twitter:image). This tool makes that image: pick a template, type the title, add a subtitle, a small label, your site name and logo, and choose a gradient, a pattern or your own photo as the background. The title is fitted automatically — as large as it can be in up to three or four lines.
The image is 1200 × 630 pixels, the size Meta recommends for link previews. Crop guides and previews show what each platform cuts: X’s large card is 2:1 and removes 15 pixels at the top and bottom, and square thumbnails keep only the centre. Download a PNG or JPG — checked against the 5 MB limit of X and LinkedIn — and copy the matching meta tags. Everything happens in your browser.
How to use it
- Type the title (and, if you like, a subtitle, a small label above the title and your site name).
- Choose a template and the fonts. Add your logo (PNG or SVG with a transparent background works best).
- Pick the background: a gradient, a solid colour, a pattern or a photo (drag it to choose which part shows). Text colour is chosen automatically for contrast, or set it to light or dark.
- Turn on Crop guides and look at the previews to make sure nothing important is cut.
- Choose PNG or JPG and press Download. Upload the image to your site, enter its address under Meta tags and paste the tags into your page’s
<head>.
Examples
Spotlight · title “How we cut our cloud bill by 40%” · label “Case study” · logo · gradient #1e1b4b → #0f766e
og-how-we-cut-our-cloud-bill-by-40.png — 1200 × 630 PNG
Split · photo of the venue on the right · title “Design Meetup — Pune” · site “meetup.example.org”
Text on a solid panel, the photo beside it; nothing important in the 15 px X crops
<meta property="og:image" content="https://example.com/og/cloud-bill.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="How we cut our cloud bill by 40%"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://example.com/og/cloud-bill.png"> <meta name="twitter:image:alt" content="How we cut our cloud bill by 40%">
Common uses
- Giving every blog post, product page or documentation page its own share image.
- Announcing events, launches and sales with a consistent branded card.
- Replacing a cropped or blurry logo that platforms show when a page has no og:image.
- Making a default share image for a whole site.
What each platform shows
- Facebook — Meta recommends images “at least 1200 x 630 pixels” and a shape close to 1.91:1 to show the full image without cropping; files can be up to 8 MB (Meta for Developers).
- LinkedIn — at least 1200 × 627 pixels, a 1.91:1 ratio and up to 5 MB (LinkedIn Help).
- X — the
summary_large_imagecard uses a 2:1 image, between 300 × 157 and 4096 × 4096 pixels and under 5 MB, in JPG, PNG, WebP or GIF (not SVG); a 1200 × 630 image loses 15 pixels at the top and bottom. The smallersummarycard crops images to a square (X card documentation, an archived copy: the original address now leads to X’s developer overview). - Slack reads Open Graph and X card tags but does not publish how it sizes or crops the image (Slack); neither does WhatsApp. Keeping the title and logo away from the edges keeps them visible whether the image is shown large or as a small thumbnail.
Good share images
- Make the title the point. Previews are often shown at a few hundred pixels wide on phones, so short titles in large type read best. The tool shrinks long titles and cuts them with “…” when they no longer fit — shorten them rather than letting them get tiny.
- Keep contrast high. The text colour is picked for the best contrast with the background; a warning appears below 3:1 (the WCAG 2.2 minimum for large text). On photos, raise the darkening until the warning goes away.
- Describe the image. Fill in the alt text: it goes into
og:image:alt(the Open Graph protocol asks for it whenever there is anog:image) andtwitter:image:alt(X allows 420 characters). - Use an absolute address in the meta tags (
https://…) pointing to the uploaded file, and give each page its own image.
Fonts
Fonts are served from this site and only downloaded when you use them: Inter, Montserrat, Poppins, Anton and Bebas Neue for Latin text, and Noto Sans for Latin, Greek, Cyrillic and Devanagari (Hindi, Marathi, Nepali). Device font uses your own system fonts for any other script. All are licensed under the SIL Open Font License.
Limitations
- Images are always 1200 × 630 pixels (1.91:1), the size Facebook, LinkedIn and X all accept. For other shapes use the Placeholder Image Generator or an image editor.
- Platforms cache previews. After changing the image, use each platform’s own preview or debugging tool to fetch it again, or give the file a new name.
- The tool makes the image and the image tags; it does not upload anything. For the other Open Graph tags (title, description, URL), use the Open Graph Generator.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
What size should an Open Graph image be?
1200 × 630 pixels (1.91:1). That is Meta’s recommended minimum for sharp previews, it meets LinkedIn’s 1200 × 627 minimum, and X shows it in its large card with only 15 pixels cut at the top and bottom.
PNG or JPG?
PNG keeps text and flat colours crisp and is usually small for gradient and pattern designs. With a photo background, JPG is often several times smaller. Either way the tool shows the file size and warns above 5 MB, the limit for X and LinkedIn.
Why does my preview still show the old image?
Facebook, LinkedIn and X cache link previews. Ask them to fetch the page again with their own preview or inspection tools, or upload the new image under a new file name and update the meta tag.
Do I need twitter:image if I have og:image?
The snippet includes both, plus twitter:card set to summary_large_image, so X shows the large card. Including the explicit tags avoids depending on any fallback behaviour.
Is my photo or logo uploaded?
No. Images are opened and drawn by your browser, and the PNG or JPG is created on your device.