OG image size: 1200×630 link previews that work everywhere

The OG image size that works almost everywhere is 1200×630 pixels, a landscape ratio of about 1.91 to 1. Facebook, LinkedIn, X, Slack, Discord and most messaging apps build their link previews from this one image, declared in your page's og:image tag. LinkedIn lists its link image as 1200×627, close enough that one 1200×630 file serves both.

Open Graph 1200×630

1200 × 630

LinkedIn link image 1200×627

1200 × 627

Centre square 630×630

630 × 630

What an Open Graph image is, and how previews are fetched

Open Graph is a set of meta tags in the head of a web page. When someone pastes your link into a post or a chat, the platform sends a crawler to the page, reads those tags, downloads the image, and draws the preview card. It does this once and then caches the result, sometimes for days.

Three details catch most people out. The image address must be a full URL, starting with https://, not a relative path. It must load for anyone, without a login or cookie banner in the way. And the tags must be in the HTML your server sends, because most crawlers don't run JavaScript, so tags added by a script after the page loads are never seen.

<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />

Designing an OG image that reads at thumbnail size

A 1200×630 image is rarely seen at 1200 pixels. In a feed on a phone it shrinks to a strip the width of the screen, and in a chat it can be smaller still. Design for the small version: a short headline, big type, strong contrast, and nothing in the corners that matters.

• Three to seven words. The page title shortened to its point, not the full title.
• Large type. On the 1200×630 canvas, a headline around 64 to 96 pixels tall stays legible when the preview shrinks.
• Margins of about 60 pixels or more, so nothing touches an edge that a platform might round or crop.
• One small brand signature, such as a wordmark or your site name, in the same place on every image.
• A consistent background so people recognise your links before they read them.

Contrast matters more at small sizes, not less. Check that your headline meets the ratios in colour contrast, and if the background is a gradient, test the contrast where the words actually sit. Text on a gradient shows how to find the calm zone.

One OG image for the whole site, or one per page

Every site needs a default image for pages that have nothing better. But a default image on every page makes every shared link look identical, and nobody can tell from the preview which page it is. The pages people share most deserve their own.

Making a separate image for every article by hand doesn't scale. Most modern frameworks can render an OG image from a template when the page is built or first requested; dynamic OG images walks through the approach.

How to test your link previews

1. 1

   Check the tags

   Open the page, view its source, and search for og:image. If it isn't in the source, crawlers won't see it.

2. 2

   Open the image address

   Paste the og:image URL into a private browser window. It should load directly, over https, with no login.

3. 3

   Use the platform's inspector

   The LinkedIn Post Inspector shows how LinkedIn sees a URL and refreshes its cache. Facebook has a similar Sharing Debugger.

4. 4

   Send it to yourself

   Paste the link into a chat app and a draft post. Look at the preview on a phone, where it is smallest.

5. 5

   Bust the cache after changes

   If an old image keeps appearing, give the new image a new address, for example by adding ?v=2 to its URL, then re-inspect.

File format and weight

Use PNG for designed cards with type and flat colour, and JPEG for photographic images. Avoid SVG, which most crawlers don't accept for previews, and be cautious with newer formats that some platforms may not read. Keep the file lean so the crawler fetches it quickly; a designed card rarely needs to be large. A touch of grain keeps a gradient from banding when a platform recompresses it.

In Gradiently, Link preview (Open Graph) 1200×630 is one of the built-in sizes, so you can lay a post out again as a preview with copy to sizes and keep one look across the post and the link. For a launch, the OG image is one item on a longer list; launch day graphics has the full checklist.