An open graph image maker saves you from opening a design app every time you publish. Pick one of eight layouts, type the title and an optional badge, choose three colours and add your logo, and the image is drawn at 1200 by 630 pixels right in your browser. You see how it looks on Facebook, X, LinkedIn and WhatsApp, save a WebP that stays under 100 KB, and copy the meta tags for your page.
What an Open Graph image is
When someone shares a link on social media or in a chat app, the app reads the page's Open Graph tags to build a preview card: a title, a short description and an image. The image comes from the og:image tag. If the tag is missing, the app guesses, often picking a logo, an ad or nothing at all.
A clear share image does not change your Google rankings. It changes whether people click when your link appears in a feed or a group chat, and that is often where a small site gets its first readers.
The size that works everywhere
| Where | What it shows |
|---|---|
| A wide card; 1200 × 630 is the recommended size | |
| X | A large card when the page has twitter:card set to summary_large_image |
| A wide card from the same og:image | |
| WhatsApp and some chat apps | Often a small square cut from the middle |
One 1200 × 630 image, the ratio of about 1.91 to 1, covers all of them. Keep the title in the middle area so the square crop still shows the important words.
How to use the open graph image maker
- Pick a layout. Band, Split, Center, Light, Gradient, Frame, Big badge or Bottom bar. The thumbnails redraw with your text as you type.
- Write the title. Under about 60 characters reads best. The font shrinks to fit up to three or four lines.
- Add a badge such as "Guide", "Free tool" or a category name, or leave it empty.
- Set the colours. Background, accent and text. Keep strong contrast between text and background.
- Add a logo if you have one as PNG, SVG or WebP. It sits next to the site name.
- Save. WebP is tried at several quality levels until it fits under 100 KB. PNG is saved as drawn and is usually larger.
Everything is drawn on a canvas in your browser. The title and logo are never uploaded.
The meta tags to add
Upload the image to your site, then add these tags to the page head. The tool fills them in with your title:
og:image: the full URL of the image, with https://.og:image:widthandog:image:height: 1200 and 630, so apps can show the card before the image loads.og:image:alt: a short description for screen readers.twitter:cardset to summary_large_image, for the big card on X.
Most CMSs and SEO plugins have a field for the share image, which writes these tags for you. Bloghints makes a share card for each article automatically, which is where the idea for this tool came from.
Design tips that make people click
- One message. The title, big. Not the title plus a subtitle plus three icons.
- Readable on a phone. The card is often shown 300 pixels wide. If you cannot read it at that size, the font is too small.
- Brand colours, same every time. After a few posts, people recognise your cards in a feed before they read them.
- No year in the image unless the article really is about one year. A dated card makes an evergreen article look old.
- Match the page. The card should promise what the article delivers. A misleading image gets clicks once and loses trust after.
One template, many articles
You do not need a new design for each post. Pick one layout and your colours once; the tool remembers them in this browser. For each new article, change only the title and maybe the badge, save, and upload. Ten seconds per post keeps every card on your site in the same style, which matters more than any single clever design.
When the preview does not update
Social networks cache the card. If you change the image after someone has shared the link, the old one may keep showing. Facebook's Sharing Debugger and LinkedIn's Post Inspector can fetch the page again. Giving the new image a new file name also helps, because the cache is tied to the image URL. On X the card refreshes on its own after a while.
Also check that the image URL is reachable without a login and is not blocked in robots.txt, because the apps fetch it like a crawler. Then make one card per article with the open graph image maker and keep the style the same across your site.
Frequently asked questions
What size should an og:image be?
1200 × 630 pixels. It is the size Facebook recommends, it works for large cards on X and LinkedIn, and chat apps crop it to a square from the middle. Smaller images may show as a small thumbnail instead of a large card.
Is WebP OK for Open Graph images?
The large networks read WebP, and it keeps the file small. If one app you care about shows no image, save the same design as PNG and use that file for the tag.
Do Open Graph images help SEO?
Not directly. Google does not rank pages by their share image. A good card can bring more clicks from social media and chats, and those visitors may share or link to the page later.
