Skip to content
CurlShot
Cheat sheetBy 9 min read

Social preview image sizes, drawn to scale: the Open Graph cheat sheet

A social preview image is the image an app shows when someone shares your link. Each platform asks for a slightly different shape. Here are six of them at one scale, each over the dashed outline of 1200 x 630.

  • Facebook[2]

    1200 x 630 px

    Recommended minimum for sharp previews

  • LinkedIn[5]

    1200 x 627 px

    Minimum image dimensions

  • Google Discover[12]

    1280 x 720 px

    Google's own example of a large image

  • X large card

    1200 x 600 px

    From an X reference we could not find today

  • WhatsApp limit[7]

    1200 x 300 px

    The widest shape WhatsApp accepts

  • Square crop

    630 x 630 px

    The worst case to design for

Every shape is drawn at the same scale: a rectangle half as wide on the page is half as wide in pixels. A solid outline is a number the platform publishes; a dashed one is not documented by any platform page that can be opened today.

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

Facebook, LinkedIn, WhatsApp, Apple Messages and Google Discover each publish a size rule for link preview images, and the rules differ. The table states only what each platform says on its own page. Where a platform gives no number, the cell says so.

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.
Link preview image requirements by platform, with the source of each row
PlatformSizeAspect ratioMax file sizeFormatsGood to know
Facebook[2]At least 1200 x 630 pxAs close to 1.91:1 as possible8 MBNot statedUnder 600 x 315 px the image is shown much smaller. The smallest allowed is 200 x 200 px.
LinkedIn[5]At least 1200 x 627 px1.91:15 MBNot statedAn image less than 401 px wide is shown as a thumbnail.
WhatsApp[7]300 px wide or more4:1 or lessUnder 600 KBNot statedThe <head> with the tags must be within the first 300 KB of the HTML.
iMessage (Apple Messages)[8]At least 900 px wideNot stated10 MB for all images, icons and video togetherNot statedUnder 150 px wide the image may be ignored or shown as an icon. Apple advises against text in the image.
Google Discover[12]At least 1200 px wide, more than 300,000 pixels in total16:9Not statedNot statedLarge images also need max-image-preview:large (or AMP). Google crops the image itself.
Discord[11]No size published (its example uses 1200 x 630)Not statedNot statedPNG, GIF, JPEG, WebP, AVIFThe large layout needs twitter:card set to summary_large_image. The whole fetch must finish in 10 seconds.
Slack[9][10]Not documentedNo size publishedNot statedNot statedNot statedReads Open Graph and X Card tags. Use 1200 x 630: common practice, not documented.
X (Twitter)Not documentedNo page to check todayNot verifiableNot verifiableNot verifiableThe 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.
TelegramNot documentedNo size publishedNot statedNot statedNot statedUse 1200 x 630: common practice, not documented.
Mastodon[14]Not documentedNo size publishedNot statedNot statedNot statedPreview cards are generated from Open Graph tags. Use 1200 x 630: common practice, not documented.
Pinterest[15]Not documentedNo size published for link metadataNot statedNot statedNot statedRich Pins read Open Graph or Schema.org metadata. The Rich Pins overview gives no image size.

X cannot be checked today

The Cards pages on the X developer site now redirect to the documentation home page, so no X figure in this article has a source. The numbers in the X row are the ones repeated from the old reference. Threads is left out for the same reason: no Threads page stating a link preview image size could be found.

The protocol itself sets no size

The Open Graph protocol defines og:image:width and og:image:height only as a number of pixels and recommends no dimensions or ratio[1]. Every size on this page is a rule of one platform.

One preview image that works everywhere

One image of 1200 x 630 pixels, saved as PNG or JPEG under 600 KB, satisfies every documented rule in the table above. The remaining risk is cropping, and a safe area handles it.

123
  1. Centre 630 x 600 px. Survives every crop, a square included. Put the one thing that must always show here.
  2. Centre 1120 x 600 px. Survives a 2:1 and a 16:9 crop: 40 px in from the left and right, 15 px in from the top and bottom. Keep the title and the logo inside.
  3. The outer edge. Can be cut. Background only.
The safe area of a 1200 x 630 px image, assuming a crop from the centre. No platform documents where it crops, so the centre is the working assumption.
  • 1200 x 630 pxMeets what Facebook recommends[2], the LinkedIn minimum of 1200 x 627 px[5], the Google Discover floor of 1200 px of width and 300,000 pixels (1200 x 630 = 756,000)[12], the 900 px Apple asks for[8] and the WhatsApp limit of 4:1[7].
  • Under 600 KBThe tightest documented limit is the one WhatsApp sets[7]. A file that passes it is also under the 5 MB of LinkedIn[5] and the 8 MB of Facebook[2].
  • PNG or JPEGOnly Discord publishes a list of accepted formats, and both are on it[11]. The other platforms name none, so a newer format is an untested bet.
  • Title and logo in the centre 1120 x 600 pxA 2:1 or a 16:9 crop then cuts only background.
  • The essential thing in the centre 630 x 600 pxA face, a logo or the key word placed there is still whole when the image is cropped to a square.
  • Few words, largePreviews are shown at many sizes. Apple advises against text in the image for that reason[8], so keep to a short title that still reads when the card is small.

What each crop keeps of a 1200 x 630 image

A crop to a wider shape keeps the width, and its height is width / ratio. A crop to a narrower shape keeps the height, and its width is height x ratio.

What a centred crop keeps of a 1200 by 630 pixel image
Cropped toUsed byWhat is leftCut from each sideShare kept
1.91:1Facebook, LinkedIn1200 x 630 pxNothing100%
2:1X large card (not documented)1200 x 600 px15 px top and bottom95.2%
16:9Google Discover1120 x 630 px40 px left and right93.3%
1:1Square thumbnail, the worst case630 x 630 px285 px left and right52.5%

How will your image size be cropped?

Type the width and height of any image to see what a centred crop to each preview shape keeps, and which documented minimums the size meets. The checks are the rules from the platform table.

Aspect ratio 1.905:1, 756,000 pixels in total.

  • Cropped to 1.91:1

    1200 x 630 px, 100% kept

    Facebook, LinkedIn

  • Cropped to 2:1

    1200 x 600 px, 95.2% kept

    X large card (not documented)

  • Cropped to 16:9

    1120 x 630 px, 93.3% kept

    Google Discover

  • Cropped to 1:1

    630 x 630 px, 52.5% kept

    Square thumbnail, the worst case

  • Meets: Facebook: at least 1200 x 630 px
  • Meets: LinkedIn: at least 1200 x 627 px
  • Meets: Google Discover: at least 1200 px wide and more than 300,000 pixels
  • Meets: Apple Messages: at least 900 px wide
  • Meets: WhatsApp: 300 px wide or more, no wider than 4:1

Which Open Graph tags do I need?

The Open Graph protocol requires four tags on every page: og:title, og:type, og:image and og:url[1]. The set below adds the tags that individual platforms ask for. Put it in the <head> your server sends.

The minimal tag set
<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">

Open Graph tags use the property attribute, as the protocol writes them[1]. The last two are ordinary name tags.

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?

A link preview is wrong for one of three reasons: the platform kept an old copy, its crawler never saw the tags, or the image breaks one of that platform's limits. Find the symptom, then the fix.

  1. 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.[3]

    Fix: Save the new image under a new file name, update og:image, then refresh the page in the tools listed below.

  2. 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.[8]

    Fix: Put the tags in the HTML your server sends, inside <head>. Server-side redirects are followed.

  3. 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.[4][7][8]

    Fix: Move the meta tags to the top of <head>, above inline scripts and styles.

  4. 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.[4][5][7][9]

    Fix: Use an absolute https:// URL, and let the crawlers in: facebookexternalhit, WhatsApp, Slackbot-LinkExpanding and the others must get the image without a login.

  5. 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.[2][5][7][8]

    Fix: Export 1200 x 630 px and compress the file to less than 600 KB.

  6. Discord shows a small thumbnail beside the text

    Without a layout tag Discord uses its small-image layout.[11]

    Fix: Add twitter:card with the value summary_large_image.

  7. Google Discover shows a small image, or none

    Large images are off by default, or the image is less than 1200 px wide.[12]

    Fix: Add the robots tag max-image-preview:large and use an image at least 1200 px wide that is not your logo.

  8. The first person to share the page gets no image on Facebook

    The crawler has not measured the image yet.[2]

    Fix: 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.

  9. 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.[4][11]

    Fix: Serve the page and the image fast, from a cache or a CDN, and keep the image small.

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

Preview caching and refresh tools by platform
PlatformKeeps it forHow to refreshTool
Facebook[3]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
LinkedIn[6]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
Slack[9]About 30 minutes, for the whole service.Wait about 30 minutes and post the link again.None published
Discord[11]About 30 minutes.Share the URL with a new query string, such as ?v=2.Embed Debugger (in the Discord developer documentation)
Telegram[16]No duration published.Open @WebpageBot in Telegram and send it the link. It returns an updated preview.@WebpageBot

X is missing from this list on purpose: its Cards pages, the validator included, are no longer on its documentation site. WhatsApp and Apple Messages publish no cache duration and no refresh tool.

How to generate Open Graph images automatically

A preview image for every 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 that HTML to an image for each title. Any headless browser can do it; a screenshot API does it without a browser to run.

With CurlShot it is one request: send the HTML and set the viewport to the size of the card. 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.

Render a 1200 x 630 card from HTML
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, exactly 1200 x 630 px: a light card with the site name and a large title.

Questions people ask

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. [1]ogp.me, The Open Graph protocol. Checked .
  2. [2]Meta for Developers, Images in Link Shares. Checked .
  3. [3]Meta for Developers, A Guide to Sharing for Webmasters. Checked .
  4. [4]Meta for Developers, Meta Web Crawlers. Checked .
  5. [5]LinkedIn Help, Make your website shareable on LinkedIn. Checked .
  6. [6]LinkedIn Help, Use Post Inspector to refresh URL. Checked .
  7. [7]WhatsApp, Meta for Developers, Link Previews. Checked .
  8. [8]Apple Developer Documentation, TN3156: Create rich previews for Messages. Checked .
  9. [9]Slack, Slack Robots. Checked .
  10. [10]Slack Developer Docs, Unfurling links in messages. Checked .
  11. [11]Discord Developer Documentation, Link Previews. Checked .
  12. [12]Google Search Central, Get on Discover. Checked .
  13. [13]Google Search Central, Robots meta tags specifications. Checked .
  14. [14]Mastodon documentation, PreviewCard entity. Checked .
  15. [15]Pinterest Developers, Rich Pins overview. Checked .
  16. [16]Telegram Bugs and Suggestions, Link preview update (tip). Checked .

Go deeper

Read next

Screenshot any page in one step

Paste an address into CurlShot and download the screenshot. A free account gives you 100 screenshots every month. No card needed.

Try it freeSee the plans