OG image generator

Make the picture that appears when someone shares your link.

Type a title, pick colours, add your logo, and download a picture sized for the network you post on.

Open the card maker
  • Private by defaultDeleted within an hour
  • Super FastProcess in seconds
  • No Sign-upStart instantly

When a link is pasted into a chat or a feed, the site shows a preview: a title, a short description and a picture. That picture comes from the og:image tag in the head of your page. Without one, the preview is a plain grey box or a random picture picked from the page, and fewer people click.

This generator makes that picture. Type the title of your page, choose colours, add a logo, and download a file of 1200 by 630 pixels, the size that most networks and chat apps show best. The result is the same for every visitor who sees your link.

Making a separate picture for every page is tedious by hand. Once you know the layout you like, the same tool can be called from a script through our API, so each new article gets its own preview as it is published.

Adding the picture to your page

Save the download in your site's public folder, for example as /og/home.png. Then add two lines inside the head of the page: a meta property tag named og:image whose content is the full address of the file, and one named twitter:card with the value summary_large_image.

Use the full address with https:// at the start, since the networks that fetch the picture do not know your site's folders. Check the result with the sharing debugger that each network offers, because they keep an old copy of a preview for a long time.

What makes a preview work

A preview is shown small, often the width of a phone. Keep the title to six or seven words, set in large type with plenty of room around it. If you cannot read the card from an arm's length on a laptop, it will not be read in a feed.

Leave a margin of about five percent on every side. Some apps round the corners or crop the edges, and text near an edge can be cut. The cards made here keep a margin for that reason.

File size and format

Most networks refuse a preview file above about 5 MB, and a heavy file slows the preview. A PNG of a flat colour card is small. If your card is heavy, pick JPEG or WebP and lower the quality a little, then check the size shown under the download button.

A card with a photograph as its background is heavier than one with a flat colour, so the quality setting matters more for those. This tool draws on colour, which keeps the files light by design.

Checking the result

Open the preview in the sharing tool of the network, then in a chat app on your phone, since the crop differs. Look at the card small, next to other previews, and ask whether yours still stands out. If not, raise the contrast or shorten the title.

Templates for a polished look

A Pro plan opens one hundred ready designs for the link preview image, from a quiet double frame to bold capitals with a hard shadow. Everyone can try them out with their own words first, and the ordinary gradient cards remain free.

Frequently asked questions

What size is an og:image?

1200 by 630 pixels, a ratio of about 1.91 to 1. That shape is shown without cropping by most networks and chat apps.

Why does my old preview still show?

Networks keep a copy of the preview for days or weeks. Use the sharing debugger of each network to ask for a fresh copy, or change the file name.

Do I need a different picture for every page?

No, one picture for the whole site is better than none. A page-specific title is worth the effort for pages that are shared often.

Can I make the picture from code?

Yes. Our API draws a page of HTML as a PNG, JPEG or WebP, so a build step can create a card for each page from its title.

Is the picture used anywhere else?

Only by you. The file is yours once it is downloaded, and we keep neither the text nor the logo.

Does the picture need my logo?

No. A logo helps people recognise the source, but a clear title on a colour is enough.