How to Make an OG Image (and Fix Link Previews That Won't Update)

Paste a link into X, LinkedIn, Slack, or iMessage and one of two things happens. Either a clean card appears with a big image, a title, and a description, or you get a bare URL and maybe a random logo cropped into a square. The difference is a single image and a handful of meta tags, and most product pages get it wrong.

This guide covers what an Open Graph (OG) image is, the size that works everywhere, the exact tags to add, and how to fix the most common problem of all: a preview that shows the old image no matter what you change.

What an OG image actually is

Open Graph is a set of meta tags that tells other sites how to display your page when someone shares it. The og:image tag points to the picture they show. Facebook created the standard, and nearly everyone adopted it: LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, and X (which reads OG tags as a fallback for its own Twitter Card tags).

When there is no OG image, each platform guesses. Sometimes it grabs your logo, sometimes the first image on the page, sometimes nothing. A guessed preview almost always looks worse than one you designed, and a link that looks like a card gets clicked more than a link that looks like a URL.

The right size: 1200×630

Make your OG image 1200×630 pixels, a 1.91:1 ratio. That one size renders correctly on X, LinkedIn, Facebook, Slack, Discord, and iMessage, so you only need to design it once per page.

A few practical rules:

• Use PNG or JPG. PNG keeps text and interface screenshots crisp. JPG is fine for photographic images and keeps the file small.
• Keep the file small. Under about 1 MB loads quickly in previews. Very large files can time out on some platforms, and X caps images at 5 MB.
• Design for small. Most previews render around 500 pixels wide, often less on a phone. Big type and one clear visual beat a detailed layout.
• Keep text away from the edges. Some apps crop the preview slightly or round its corners. Leave a margin around anything important.

What to put on it

The best OG images for products follow a simple pattern:

1. A headline that names the page or the single benefit. Keep it under about 60 characters so it stays readable at preview size.
2. One visual of the product, usually a screenshot in a browser frame or on a device. It tells people what they will find when they click.
3. Your brand, through color and a small logo, not a big one.

Avoid putting the page title in tiny text at the bottom, using a stock photo that says nothing about the product, or cramming a whole feature list onto a 500-pixel card.

How to make one in two minutes

You can build an OG image in Figma or Canva, but the fastest route for a product page is a template built for the job. Our free OG Image Generator does exactly this:

1. Write your headline and a one-line subheadline.
2. Paste a screenshot of the page or product with Ctrl+V or Cmd+V.
3. Pick a light or dark browser frame and a background.
4. Download the PNG at exactly 1200×630.

It runs in your browser, nothing is uploaded, and it needs no account. Downloads carry a small watermark.

If you want a designed scene instead of a template, with a custom background, lighting, and a headline written for you, Screenshot Studio has a link preview format that exports at 1200×630.

The meta tags to add

Upload the image to your site, then add these tags to the <head> of the page:

<meta property="og:title" content="Acme: Ship faster without the busywork" />
<meta property="og:description" content="The one-line pitch for your product." />
<meta property="og:image" content="https://acme.com/og/home.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://acme.com/" />
<meta name="twitter:card" content="summary_large_image" />

Two details trip people up:

• The image URL must be absolute. https://acme.com/og/home.png works. /og/home.png often does not, because some platforms do not resolve relative paths.
• twitter:card decides the layout on X. Set it to summary_large_image for the big image card. Without it, X may show a small square thumbnail instead. X falls back to your og:image if there is no twitter:image, so you rarely need a separate file.

Adding og:image:width and og:image:height helps some platforms render the image on the very first share, before they have downloaded it.

If you use Next.js, you can drop an opengraph-image.png file into a route folder and the framework writes the tags for you.

Why your link preview won't update

This is the question that brings most people to OG images. You changed the image, but the old one keeps showing. Almost always, it is one of these:

1. The platform cached the old preview. Social platforms store a preview the first time a link is shared and reuse it. Changing your page does not change what they cached. Refresh it with their tools:

• Facebook: the Sharing Debugger has a "Scrape Again" button.
• LinkedIn: the Post Inspector fetches the page fresh when you inspect the URL.
• X: there is no public preview tool anymore. Previews refresh on their own after a while. Adding a harmless query string such as ?v=2 to the URL makes it look like a new link.

2. The image URL is relative. As above, use the full https:// address.

3. The image is not publicly reachable. If it sits behind a login, a preview environment password, or a robots rule that blocks crawlers, platforms cannot fetch it.

4. The image is too large or the wrong type. A 12 MB PNG may time out. Export a smaller file.

5. The tags are added by JavaScript. Most platforms do not run your page's JavaScript when they fetch a link. If your tags are inserted client-side by a single-page app, the crawler never sees them. They need to be in the HTML the server sends.

6. You are looking at the wrong page. Each URL has its own preview. If you share acme.com/pricing, the pricing page needs its own tags.

One image per important page

A single generic OG image across the whole site is better than none, but a specific one for each important page does more. Your homepage, pricing page, each launch post, and each changelog entry are shared for different reasons, and a preview that matches the reason gets more clicks. With a template, each new one takes a couple of minutes.

Test before you share

Before posting a link anywhere public, paste it into a private chat, a direct message to yourself, or a draft post, and look at the preview. Fixing a mistake before the first real share avoids the caching problem entirely.

Quick checklist

• 1200×630 PNG or JPG, under about 1 MB
• Headline readable at 500 pixels wide, with margin around it
• og:image uses an absolute https:// URL
• twitter:card set to summary_large_image
• Tags are in the server-rendered HTML
• Preview checked in a private message before sharing

Make yours with the free OG Image Generator, or see every launch image size in the Launch Image Size Guide.