The share picture: how to make an OG image for your product

When your link is shared on X, LinkedIn, Slack, or in a chat app, most of the preview is one image. If that image is missing or broken, your link looks like an afterthought. If it is clear and attractive, people click.

That image is usually called the OG image, after the Open Graph tags that set it. It takes a few minutes to get right and keeps working every time anyone shares your site.

What an OG image is

Open Graph is a set of meta tags, originally from Facebook, that tell other sites how to preview your page. The most important ones are the title, the description, and the image:

• og:title, the headline of the preview.
• og:description, a short line under it.
• og:image, the address of the preview picture.

X also reads its own twitter:card tag. Setting it to summary_large_image asks for the large image style. You can read the details in the Open Graph protocol.

The size that works almost everywhere

Use an image of 1200 by 630 pixels. That ratio, about 1.91 to 1, displays well on most networks and chat apps. Keep important content away from the edges, since some apps crop slightly or round the corners.

Save it as PNG or JPG and keep the file reasonably small so previews load quickly. Make sure the image address is a full https URL that anyone can open without logging in.

What to put on it

A good share picture answers the same question as your homepage: what is this and why should I care?

• Your product name or logo, large enough to read in a small preview.
• One short line saying what it does. Fewer words read better at small sizes.
• A product visual, such as a cropped screenshot, if there is room.
• Strong contrast between text and background.

Avoid tiny text, long sentences, and busy backgrounds. The image is often displayed at a fraction of its real size.

One image or one per page?

A single site-wide image is a good start. Later, pages that people share often, like blog posts or individual launch pages, benefit from their own images with their own titles. Many frameworks can generate these automatically from the page title.

On ShipDesk.dev, every launch page gets its own share picture with your product name and line, so links to your launch preview well without any work from you.

How to make one without design software

You can design an OG image in any graphics tool. If you would rather not, the free OG image generator makes a clean 1200 by 630 image from your product name, a line, and your colors.

Check that it actually shows up

Adding the tags is not enough; you need to test the preview:

1. Run your address through the link preview checker to see the title, description, and image other sites will read.
2. Paste the link into a private chat with yourself to see the real preview.
3. If a network shows an old image, it may have cached the previous version. Some networks offer a tool to refresh their copy of your page.

Common problems are a relative image address instead of a full URL, an image blocked by a login or by robots rules, and a file that is too large or in an unsupported format.

Do not forget the other tags

While you are in the head of your page, check the basics:

• A clear title tag that matches the page.
• A meta description under about 160 characters.
• A canonical URL, so shared variations of the address point to the same page.

The free launch checker looks at these along with your share tags in one pass.

A quick checklist

• og:title, og:description, and og:image are set on your main pages.
• twitter:card is summary_large_image.
• The image is 1200 by 630, readable at small sizes, with a full https address.
• The preview looks right when you paste the link into a chat.
• Your title, description, and canonical tags are in place.

It is a small detail, but your link will be shared far more often than people visit your homepage directly. Make the preview worth clicking.

launch with your own share picture