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

[Canonical HTML page](https://gradiently.design/guide/open-graph-image-size)

Every time someone pastes your link, a small picture decides whether anyone clicks it. Here is the size, the tags and the layout that make that picture work.

## The short version

- The Open Graph image size that works across almost every platform is 1200×630 pixels, a ratio of about 1.91 to 1.
- Platforms read the og:image tag from your page's HTML when a link is shared, then cache the image, so changes may not appear until the preview is refreshed.
- The og:image address must be a full https URL that loads without a login, and the tags must be in the HTML the server sends, not added later by JavaScript.
- Link previews are often shown small, so an OG image needs a short headline in large type, centred, with generous margins.
- Some messaging apps crop previews to a square, so the most important words belong in the middle of the image.

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

The standard link preview, LinkedIn's near-identical link image, and the centre square that survives when an app crops the preview.

## 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.

```html
<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" />
```

The tags a link preview needs. X reads the Open Graph tags when its own are missing, but `twitter:card` set to `summary_large_image` asks for the large preview.

> **Width and height help** Declaring `og:image:width` and `og:image:height` lets some platforms draw the preview on the first share, instead of waiting until they have downloaded and measured the 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.

A 1200 by 630 link preview reading How to design a launch post on a gradient background

A link preview built for the small version: one short line, large and centred, with a small signature above it.

### Avoid

- The full page title in small type
- A screenshot of the page itself
- Words in the corners, where square crops cut them
- Text on a busy photo with no calm area

### Do

- A shortened headline people can read at a glance
- A designed card with one idea
- The key words in the centre square
- A calm background with high contrast behind the type

Contrast matters more at small sizes, not less. Check that your headline meets the ratios in [colour contrast](https://gradiently.design/guide/color-contrast-accessibility), and if the background is a gradient, test the contrast where the words actually sit. [Text on a gradient](https://gradiently.design/guide/text-on-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.

| Page type | What the image should say | How to make it |
| --- | --- | --- |
| Home page | Your name and one-line promise | Designed once, by hand |
| Article or guide | The article's short headline | Generated from the title |
| Product page | Product name, with the product shown | Generated, with the product image |
| Event page | Event name and date | Designed with the event look |
| Everything else | Your name and signature background | The site-wide default |

Where a per-page OG image earns its place, and where the default is enough.

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](https://gradiently.design/guide/dynamic-og-images) walks through the approach.

- Guides: deep violet: `linear-gradient(135deg, #140c2e 0%, #3b1f7a 55%, #7c4dff 100%)`
- Product: dark teal: `linear-gradient(135deg, #07201f 0%, #0e4d4a 55%, #2dd4bf 100%)`
- Events: ember: `linear-gradient(135deg, #2a0f0a 0%, #7a2a14 55%, #ff8a4c 100%)`

One family, three sections: the same dark-to-bright structure and angle, with a different hue per section, so previews are consistent but still tell people where a link goes.

## How to test your link previews

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. **Open the image address** Paste the `og:image` URL into a private browser window. It should load directly, over https, with no login.
3. **Use the platform's inspector** The [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) shows how LinkedIn sees a URL and refreshes its cache. Facebook has a similar Sharing Debugger.
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. **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](https://gradiently.design/guide/launch-day-graphics) has the full checklist.

## FAQ

### What is the best OG image size?

1200×630 pixels, a ratio of about 1.91 to 1. It works for Facebook, LinkedIn, X, Slack and most messaging apps.

### Why is my link preview showing an old image?

Platforms cache previews. Refresh the page in the platform's inspector, such as LinkedIn Post Inspector, or give the new image a new URL so it is fetched again.

### Why isn't my OG image showing at all?

Usually the og:image URL is relative, blocked by a login, or added by JavaScript after the page loads. Use a full https URL in the server-rendered HTML.

### Does X use Open Graph images?

Yes. X falls back to Open Graph tags when its own are missing. Add a twitter:card tag set to summary_large_image to get the large preview.

### Should every page have its own OG image?

Pages people share often, such as articles, products and events, benefit from their own image. Everything else can use a well-designed site-wide default.