# Social preview image sizes: the OG cheat sheet

> Open Graph image sizes for Facebook, LinkedIn, WhatsApp, iMessage, Discord, Slack and Google Discover, drawn to scale, with the tags and the fixes.

Cheat sheet by Serghei Pogor, founder of CurlShot (https://curlshot.com/about/serghei-pogor). Published 11 October 2026. Page for people: https://curlshot.com/blog/social-preview-image-sizes

Make one image of 1200 x 630 pixels (aspect ratio 1.91:1) and point og:image at it with an absolute https:// URL. That size is what Facebook recommends, it clears the LinkedIn minimum of 1200 x 627 and the Google Discover minimum width of 1200 pixels, and it is well inside the WhatsApp limit of 4:1. Keep the file under 600 KB, the tightest documented limit, and keep the title inside the centre 1120 x 600 pixels so a 2:1 or 16:9 crop does not cut it.

## Key facts

- Facebook asks for at least 1200 x 630 pixels, as close to 1.91:1 as possible, and no more than 8 MB.
- LinkedIn asks for at least 1200 x 627 pixels at 1.91:1 and no more than 5 MB. An image less than 401 pixels wide becomes a thumbnail.
- WhatsApp has the tightest file limit: under 600 KB, 300 pixels wide or more, no wider than 4:1.
- Apple Messages wants at least 900 pixels of width. Google Discover wants at least 1200 pixels of width and the max-image-preview:large setting.
- The Open Graph protocol requires four tags (og:title, og:type, og:image, og:url) and recommends no image size at all.
- Slack, Telegram, Mastodon and Pinterest publish no preview image size, and the X Cards reference could not be found on its documentation site on 11 October 2026.

## Preview image shapes, to scale

The page draws these shapes at one scale. The recommended image is 1200 x 630 px.

| Shape | Pixels | Aspect ratio | Basis | Documented |
| --- | --- | --- | --- | --- |
| Facebook | 1200 x 630 | 1.91:1 | Recommended minimum for sharp previews | yes [2] |
| LinkedIn | 1200 x 627 | 1.91:1 | Minimum image dimensions | yes [5] |
| Google Discover | 1280 x 720 | 16:9 | Google's own example of a large image | yes [12] |
| X large card | 1200 x 600 | 2:1 | From an X reference we could not find today | no |
| WhatsApp limit | 1200 x 300 | 4:1 | The widest shape WhatsApp accepts | yes [7] |
| Square crop | 630 x 630 | 1:1 | The worst case to design for | no |

## Terms

- **Link preview**: The card with a title, a line of text and an image that an app shows in place of a bare link. Slack calls making one "unfurling".
- **Open Graph**: A set of <meta> tags, defined at ogp.me, that tell an app which title, text and image to use for a page. The image tag is og:image.
- **Aspect ratio**: Width divided by height. 1200 x 630 is 1200 / 630 = 1.905, which Facebook and LinkedIn write as 1.91:1.
- **Safe area**: The part of an image that is still visible after a platform crops it to another shape.
- **Crawler**: The program an app sends to fetch your page and read its tags, for example facebookexternalhit or Slackbot-LinkExpanding.
- **Preview cache**: The copy of a preview that a platform stores, so it does not fetch your page on every share. It is why an old image can keep showing.

## What size should an Open Graph image be on each platform?

Each row states what the platform itself publishes. "Not stated" means the page gives no number. Numbers in brackets point at the sources list.

| Platform | Size | Aspect ratio | Max file size | Formats | Notes | Source |
| --- | --- | --- | --- | --- | --- | --- |
| Facebook | At least 1200 x 630 px | As close to 1.91:1 as possible | 8 MB | Not stated | Under 600 x 315 px the image is shown much smaller. The smallest allowed is 200 x 200 px. | [2] |
| LinkedIn | At least 1200 x 627 px | 1.91:1 | 5 MB | Not stated | An image less than 401 px wide is shown as a thumbnail. | [5] |
| WhatsApp | 300 px wide or more | 4:1 or less | Under 600 KB | Not stated | The <head> with the tags must be within the first 300 KB of the HTML. | [7] |
| iMessage (Apple Messages) | At least 900 px wide | Not stated | 10 MB for all images, icons and video together | Not stated | Under 150 px wide the image may be ignored or shown as an icon. Apple advises against text in the image. | [8] |
| Google Discover | At least 1200 px wide, more than 300,000 pixels in total | 16:9 | Not stated | Not stated | Large images also need max-image-preview:large (or AMP). Google crops the image itself. | [12] |
| Discord | No size published (its example uses 1200 x 630) | Not stated | Not stated | PNG, GIF, JPEG, WebP, AVIF | The large layout needs twitter:card set to summary_large_image. The whole fetch must finish in 10 seconds. | [11] |
| Slack | No size published | Not stated | Not stated | Not stated | Reads Open Graph and X Card tags. Use 1200 x 630: common practice, not documented. | [9] [10] |
| X (Twitter) | No page to check today | Not verifiable | Not verifiable | Not verifiable | The old X Cards addresses now redirect to the documentation home page, and we could not find the reference there. The figures repeated from it are 2:1, 300 x 157 px minimum, 4096 x 4096 px maximum and under 5 MB: common practice, not documented. | none |
| Telegram | No size published | Not stated | Not stated | Not stated | Use 1200 x 630: common practice, not documented. | none |
| Mastodon | No size published | Not stated | Not stated | Not stated | Preview cards are generated from Open Graph tags. Use 1200 x 630: common practice, not documented. | [14] |
| Pinterest | No size published for link metadata | Not stated | Not stated | Not stated | Rich Pins read Open Graph or Schema.org metadata. The Rich Pins overview gives no image size. | [15] |

Threads is not in the table: no Threads page that states a link preview image size could be found.

## One image that works everywhere

Use one 1200 x 630 px image, PNG or JPEG, under 600 KB.

1. Size: 1200 x 630 px. It meets the Facebook recommendation [2], the LinkedIn minimum of 1200 x 627 px [5], the Google Discover width of 1200 px and its 300,000 pixel floor (1200 x 630 = 756,000) [12], the Apple width of 900 px [8] and the WhatsApp ratio limit of 4:1 [7].
2. File size: under 600 KB, the tightest documented limit (WhatsApp [7]). That is also under 5 MB (LinkedIn [5]) and 8 MB (Facebook [2]).
3. Format: PNG or JPEG. Only Discord publishes a list of formats, and both are on it [11].
4. Title and logo: inside the centre 1120 x 600 px, so a 2:1 or 16:9 crop does not cut them.
5. The one thing that must always show: inside the centre 630 x 600 px, which also survives a square crop.
6. Text: few words, large. Apple advises against text in preview images because they are shown at many sizes [8].

What a centred crop keeps of a 1200 x 630 px image. No platform documents where it crops; a centred crop is the assumption.

| Cropped to | Used by | What is left | Cut from each side | Share kept |
| --- | --- | --- | --- | --- |
| 1.91:1 | Facebook, LinkedIn | 1200 x 630 px | nothing | 100% |
| 2:1 | X large card (not documented) | 1200 x 600 px | 15 px top and bottom | 95.2% |
| 16:9 | Google Discover | 1120 x 630 px | 40 px left and right | 93.3% |
| 1:1 | Square thumbnail, the worst case | 630 x 630 px | 285 px left and right | 52.5% |

Formula: a crop wider than the image keeps the width and has height = width / ratio. A crop narrower than the image keeps the height and has width = height x ratio.

## Which Open Graph tags do I need?

The Open Graph protocol requires four tags: og:title, og:type, og:image and og:url [1]. This set adds the ones the platforms above ask for.

```html
<meta property="og:title" content="How we cut our build time in half">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/build-time">
<meta property="og:image" content="https://example.com/og/build-time-3f9a1c.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="How we cut our build time in half, by Ada Example">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:site_name" content="Example">
<meta name="twitter:card" content="summary_large_image">
<meta name="robots" content="max-image-preview:large">
```

- `og:title`: The title of the page as it should appear in the preview. One of the four tags the Open Graph protocol requires. Facebook asks for it without the site name. [1] [3]
- `og:type`: What kind of thing the page is. Required by the protocol. Facebook treats a page without it as "website". [1] [3]
- `og:url`: The canonical address of the page, without session or tracking parameters. Required by the protocol. [1] [7]
- `og:image`: The address of the preview image. Required by the protocol. Write it as an absolute https:// URL: WhatsApp requires an absolute URL. [1] [7]
- `og:image:width`: The width of the image in pixels. With width and height present, Facebook can show the image on the first share and Discord does not have to download the image to measure it. [1] [2] [11]
- `og:image:height`: The height of the image in pixels. [1]
- `og:image:type`: The MIME type of the image. Optional. [1]
- `og:image:alt`: A description of what is in the image, not a caption. The protocol says a page that sets og:image should set it. [1]
- `og:description`: One or two sentences about the page. Optional in the protocol, but WhatsApp expects it and LinkedIn lists it. On WhatsApp 80 characters are enough. [1] [5] [7]
- `og:site_name`: The name of the whole site. Optional. Apple Messages shows it as the site name. [1] [8]
- `twitter:card`: Asks for the layout with a large image. Discord shows the image large only with this value, and Apple Messages and Slack read X Card tags too. [8] [10] [11]
- `robots`: Allows Google to show a large image preview. Google Discover needs it (or AMP) before it uses the large image. [12] [13]

## Why is my link preview not updating or wrong?

| Symptom | Cause | Fix | Source |
| --- | --- | --- | --- |
| The old image still shows after you changed it | The platform kept its own copy. Facebook caches images by URL and does not update them unless the URL changes. | Save the new image under a new file name, update og:image, then refresh the page in the tools listed below. | [3] |
| No preview at all, only the bare link | The crawler never saw the tags. Apple Messages does not run JavaScript and does not follow meta redirects, so tags added in the browser do not exist for it. | Put the tags in the HTML your server sends, inside <head>. Server-side redirects are followed. | [8] |
| The tags are there, but far down a heavy page | Crawlers stop reading early. WhatsApp needs the <head> within the first 300 KB of the HTML, Facebook needs the tags before the first 1 MB, and Apple limits the page to 1 MB. | Move the meta tags to the top of <head>, above inline scripts and styles. | [4] [7] [8] |
| Title and text appear, the image does not | The image address is relative, or the server blocks the crawler. LinkedIn names both a blocked crawler and a protected directory as causes. | Use an absolute https:// URL, and let the crawlers in: facebookexternalhit, WhatsApp, Slackbot-LinkExpanding and the others must get the image without a login. | [4] [5] [7] [9] |
| The image is tiny or missing on one platform only | It breaks a limit of that platform: over 600 KB on WhatsApp, over 5 MB on LinkedIn, over 8 MB on Facebook, less than 401 px wide on LinkedIn, less than 150 px wide in Apple Messages. | Export 1200 x 630 px and compress the file to less than 600 KB. | [2] [5] [7] [8] |
| Discord shows a small thumbnail beside the text | Without a layout tag Discord uses its small-image layout. | Add twitter:card with the value summary_large_image. | [11] |
| Google Discover shows a small image, or none | Large images are off by default, or the image is less than 1200 px wide. | Add the robots tag max-image-preview:large and use an image at least 1200 px wide that is not your logo. | [12] |
| The first person to share the page gets no image on Facebook | The crawler has not measured the image yet. | Add og:image:width and og:image:height so the crawler can show the image at once, or scrape the page in the Sharing Debugger before you share it. | [2] |
| The preview times out on a slow page | Discord gives the whole fetch, images included, 10 seconds. Facebook expects the page within a few seconds. | Serve the page and the image fast, from a cache or a CDN, and keep the image small. | [4] [11] |

How long each platform keeps a preview, and how to refresh it:

| Platform | Keeps it for | How to refresh | Tool | Source |
| --- | --- | --- | --- | --- |
| Facebook | Images are cached by URL and are not updated unless the URL changes. | Give the image a new file name, then run the page through the Sharing Debugger, which scrapes it again. | [Sharing Debugger](https://developers.facebook.com/tools/debug/) | [3] |
| LinkedIn | Shows the cached image for a link that was shared before. No duration published. | Enter the URL in Post Inspector. The change applies to new posts only; existing posts keep their preview. | [Post Inspector](https://www.linkedin.com/post-inspector/) | [6] |
| Slack | About 30 minutes, for the whole service. | Wait about 30 minutes and post the link again. | None published | [9] |
| Discord | About 30 minutes. | Share the URL with a new query string, such as ?v=2. | Embed Debugger (in the Discord developer documentation) | [11] |
| Telegram | No duration published. | Open @WebpageBot in Telegram and send it the link. It returns an updated preview. | @WebpageBot | [16] |

X is not in this list: its Cards pages, including the validator, are no longer on its documentation site.

## How to generate Open Graph images automatically

A preview image per page does not have to be drawn by hand. Design the card once as an HTML page fixed to 1200 x 630 px, then render it to an image for each title. With CurlShot that is one request: send the HTML and set the viewport to the size of the card.

```bash
curl -X POST "https://curlshot.com/api/v1/screenshot" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<body style=\"margin:0;width:1200px;height:630px;display:flex;flex-direction:column;justify-content:center;padding:80px;box-sizing:border-box;background:#f8fafc;color:#0f172a;font-family:sans-serif\"><div style=\"font-size:28px\">example.com</div><h1 style=\"font-size:72px;line-height:1.1;margin:24px 0 0\">How we cut our build time in half</h1></body>",
    "viewport_width": 1200,
    "viewport_height": 630,
    "format": "png"
  }' \
  --output og-card.png
```

The result is `og-card.png`, 1200 x 630 px. The defaults for `viewport_width` and `viewport_height` are 1280 and 1024, so set both. Render the card when a page is published, save the file on your own site under a name that changes with the content, and point `og:image` at that file.

- [How to generate Open Graph images from HTML](https://curlshot.com/docs/guides/open-graph-images): the full guide, with a template and caching.
- [Open Graph image generator](https://curlshot.com/tools/open-graph-image-generator)
- [HTML and Markdown input](https://curlshot.com/docs/html-and-markdown)

## Questions

### What is the best Open Graph image size?

1200 x 630 pixels, an aspect ratio of 1.91:1. Facebook recommends at least that size, LinkedIn asks for at least 1200 x 627, and Google Discover and Apple Messages ask for 1200 and 900 pixels of width. One image of 1200 x 630 pixels meets all four.

### What is the maximum file size for an og:image?

It depends on the platform. Facebook allows 8 MB and LinkedIn 5 MB, but WhatsApp asks for an image under 600 KB. Keep the file under 600 KB and it passes every limit that a platform has published.

### Is 1200 x 630 the same as 1.91:1?

Yes, in practice. 1200 divided by 630 is 1.905 and the LinkedIn minimum of 1200 x 627 is 1.914. Facebook and LinkedIn both call that shape 1.91:1, and Facebook only asks for a ratio as close to 1.91:1 as possible.

### Which Open Graph tags are required?

The Open Graph protocol requires four: og:title, og:type, og:image and og:url. In practice also add og:description, og:image:width, og:image:height, og:image:alt and twitter:card with the value summary_large_image, because individual platforms ask for them.

### Why does my link preview show the old image?

The platform kept its own copy. Facebook caches images by URL and does not update them unless the URL changes, and Slack and Discord keep a preview for about 30 minutes. Give the new image a new file name, update og:image, then refresh the page in the Facebook Sharing Debugger and the LinkedIn Post Inspector.

### Does X (Twitter) use Open Graph images?

X cannot be checked against its own documentation today: the Cards pages on its developer site now redirect to the documentation home page. The figures usually repeated from the old reference are a 2:1 image of at least 300 x 157 pixels and under 5 MB, requested with twitter:card set to summary_large_image. Treat them as common practice, not as a published rule.

### How do I make a preview image for every page automatically?

Design the card once as an HTML page fixed to 1200 x 630 pixels and render it to an image for each title. With CurlShot that is one POST request with the HTML and viewport_width 1200 and viewport_height 630. Save the file on your own site and point og:image at it.

## Sources

1. ogp.me, "The Open Graph protocol": https://ogp.me/ (checked 11 October 2026)
2. Meta for Developers, "Images in Link Shares": https://developers.facebook.com/docs/sharing/webmasters/images/ (checked 11 October 2026)
3. Meta for Developers, "A Guide to Sharing for Webmasters": https://developers.facebook.com/docs/sharing/webmasters/ (checked 11 October 2026)
4. Meta for Developers, "Meta Web Crawlers": https://developers.facebook.com/docs/sharing/webmasters/web-crawlers/ (checked 11 October 2026)
5. LinkedIn Help, "Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928 (checked 11 October 2026)
6. LinkedIn Help, "Use Post Inspector to refresh URL": https://www.linkedin.com/help/linkedin/answer/a6233775 (checked 11 October 2026)
7. WhatsApp, Meta for Developers, "Link Previews": https://developers.facebook.com/docs/whatsapp/link-previews/ (checked 11 October 2026)
8. Apple Developer Documentation, "TN3156: Create rich previews for Messages": https://developer.apple.com/documentation/technotes/tn3156-create-rich-previews-for-messages (checked 11 October 2026)
9. Slack, "Slack Robots": https://api.slack.com/robots (checked 11 October 2026)
10. Slack Developer Docs, "Unfurling links in messages": https://docs.slack.dev/messaging/unfurling-links-in-messages (checked 11 October 2026)
11. Discord Developer Documentation, "Link Previews": https://docs.discord.com/developers/link-previews/overview (checked 11 October 2026)
12. Google Search Central, "Get on Discover": https://developers.google.com/search/docs/appearance/google-discover (checked 11 October 2026)
13. Google Search Central, "Robots meta tags specifications": https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag (checked 11 October 2026)
14. Mastodon documentation, "PreviewCard entity": https://docs.joinmastodon.org/entities/PreviewCard/ (checked 11 October 2026)
15. Pinterest Developers, "Rich Pins overview": https://developers.pinterest.com/docs/web-features/rich-pins-overview/ (checked 11 October 2026)
16. Telegram Bugs and Suggestions, "Link preview update (tip)": https://bugs.telegram.org/c/57 (checked 11 October 2026)

## Go deeper

- [Guide: generate Open Graph images from HTML](https://curlshot.com/docs/guides/open-graph-images)
- [Open Graph image generator](https://curlshot.com/tools/open-graph-image-generator)
- [HTML to image](https://curlshot.com/tools/html-to-image)
- [HTML and Markdown input](https://curlshot.com/docs/html-and-markdown)

## Read next

- [Viewport sizes cheat sheet: phones to desktops](https://curlshot.com/blog/viewport-sizes-cheat-sheet.md): Viewport sizes in CSS pixels, screenshot sizes and device pixel ratios of iPhone, Pixel, Galaxy, iPad and laptop screens, drawn to scale, and the sizes to test.
- [PNG, JPEG, WebP or PDF for website screenshots](https://curlshot.com/blog/png-jpeg-webp-pdf-for-screenshots.md): A decision flow, a comparison table and our own file-size measurements for choosing PNG, JPEG, WebP or PDF when you save a screenshot of a web page.
- [Why website screenshots look wrong, and the fixes](https://curlshot.com/blog/why-website-screenshots-look-wrong.md): A field guide to 11 ways a website screenshot goes wrong, from blank lazy images to cookie banners and cut-off pages, with the cause and the fix for each.
- [Full-page screenshot on every device and browser](https://curlshot.com/blog/full-page-screenshot-every-device.md): Exact keys and menu names to screenshot a whole web page in Chrome, Firefox, Edge, Safari, iPhone, iPad and Android, checked against each vendor.