Figment.so
BlogHow to usePricing

What Is an Open Graph Image, and What Size Should It Be?

An Open Graph image is the picture a social platform shows in a link preview, set on your page with the og:image meta tag. It comes from the open Open Graph protocol, which "enables any web page to become a rich object in a social graph" — a standard way to describe a page's title, type, image, and URL so any platform reading those tags can build a consistent preview card. Facebook and LinkedIn both document how they read these tags, but they don't document the same recommended image size, so the right size depends on which platform's own guidance you're checking.

What tags make up an Open Graph image?

Per the Open Graph protocol specification (ogp.me, checked September 2026), every page needs four required properties: og:title, og:type, og:image, and og:url. og:image is defined simply as "an image URL which should represent your object within the graph."

Beyond the base tag, og:image has optional structured properties you attach with a colon suffix:

  • og:image:url — identical to og:image.
  • og:image:secure_url — an alternate URL to use if the page requires HTTPS.
  • og:image:type — a MIME type for the image.
  • og:image:width — the number of pixels wide.
  • og:image:height — the number of pixels high.
  • og:image:alt — a description of what's in the image, not a caption.

The spec is direct about that last one: "If the page specifies an og:image it should specify og:image:alt." A minimal, correct example from the spec itself:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

What size does Facebook recommend?

Per Meta's own Images in Link Shares documentation (checked September 2026): "Use images that are at least 1200 x 630 pixels for the best display on high resolution devices." Facebook separately states a hard floor — "the minimum allowed image dimension is 200 x 200 pixels" — and a practical minimum for the larger link-post layout: "at the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images." Below that, the image can still show, just smaller.

Two more specifics from the same page: the image file "must not exceed 8 MB," and Facebook recommends keeping images "as close to 1.91:1 aspect ratio as possible to display the full image in Feed without any cropping."

Meta's separate sharing best practices page adds a technical tip: set og:image:width and og:image:height "to specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it" — a small speed optimization, not a requirement.

What size does LinkedIn recommend?

LinkedIn's own help article, Make your website shareable on LinkedIn (checked September 2026), states that to be shareable at all, your source code needs og:title, og:image, og:description, and og:url tags in the correct format. It then lists image requirements "specific to the LinkedIn sharing module": a maximum file size of 5 MB, minimum image dimensions of 1200 (w) x 627 (h) pixels, and a recommended ratio of 1.91:1.

LinkedIn also documents a size cutoff worth knowing if your image is smaller than the recommendation: "images less than 401 pixels wide display as a thumbnail image" rather than the larger preview format.

What about X?

This is where the guidance gets thinner. X's Open Graph and Twitter-card tags (twitter:card, twitter:image, and the og:image fallback) have been documented for years, but as of September 2026, X's current developer documentation site (docs.x.com) no longer hosts a dedicated Cards reference page. The old developer.twitter.com and developer.x.com URLs for the Cards documentation now redirect to the site's general developer overview or return a 404, and a full pull of the current docs.x.com content turns up no Cards or link-preview-image section — only an unrelated "cards" feature inside the Ads API for lead-generation forms. X's separate Card Validator preview tool, formerly hosted at cards-dev.twitter.com, is also no longer available, with no current official replacement in its place.

We can't point you to a live, X-owned page that states how X reads these tags or what image size it recommends, so we're not going to invent one here. Check the actual rendered preview on X (see below) rather than relying on a documented number.

One image, or different tags per platform?

You don't need three separate images. A single image sized to satisfy the largest stated minimum — Facebook's "at least 1200 x 630 pixels," which is effectively the same figure as LinkedIn's 1200x627 minimum — at roughly a 1.91:1 ratio will clear both platforms' documented thresholds at once. Set og:image, og:image:width, og:image:height, and og:image:alt once, in the <head> of the page, and Facebook and LinkedIn both read the same image.

If a page genuinely needs a different crop per platform — for example, a square image for one context and a wide banner for another — the og:image:width/og:image:height pair lets you repeat the og:image tag with different images and dimensions; per the spec, when a tag can have multiple values, "just put multiple versions of the same <meta> tag on your page," and consumers generally use the first one listed.

How do I check what the preview will actually look like?

Don't guess from the tags alone — each platform caches what it's seen before, so a live check matters more than the HTML.

  • Facebook: Use the Sharing Debugger "to test how your websites are viewed by our scraper." Meta's own guidance notes the same tool "also refreshes any scraped content we have for your websites," which matters if you've updated the image since the link was last shared, since Facebook otherwise works on "the standard 24 hour update period."
  • LinkedIn: Use LinkedIn's own Post Inspector. LinkedIn's help center explains why this matters: "the preview window may show an old image that is cached" if you've shared the same URL before, and the Post Inspector refreshes it. One limit worth knowing: "the changes you make will only affect the URL's preview image and information for new posts that include it. The preview for any existing posts with this URL will remain the same" — so fixing the tag doesn't retroactively fix a post you already published.
  • X: With no current official validator, the practical check is a real one — start a new post with the link and look at the preview it renders before you send it.

A quick checklist before you publish

  • og:title, og:type, og:image, and og:url are set on every page you expect to be shared.
  • The image is at least 1200x630px (covers both Facebook's and LinkedIn's stated minimums) at roughly a 1.91:1 ratio.
  • og:image:width, og:image:height, and og:image:alt are set alongside og:image.
  • The image file is under 5 MB (LinkedIn's limit; well under Facebook's 8 MB ceiling too).
  • The image is served over HTTPS and at an absolute URL, not a relative path.
  • You've checked the actual rendered preview in Facebook's Sharing Debugger and LinkedIn's Post Inspector after publishing or updating the image, not just read the tags in your page source.

If you're building the page in Figma and publishing it as a static site, the same rule of checking the actual output, not just what you designed, applies to your favicon too — see how to add a favicon from a Figma design for the parallel export problem. And an Open Graph image is one item on a longer pre-launch list; our checklist for reviewing an AI-generated website before launch covers the rest of what to verify before you send traffic to a new page.

The bottom line

og:image is the tag Facebook and LinkedIn both document, but the recommended size isn't universal: Facebook documents at least 1200x630px, LinkedIn documents a 1200x627px minimum, and X currently documents neither on a live page we could find. Set the image, its width, height, and alt text once, size it to clear the larger of the two documented minimums, and then check the real rendered preview with Facebook's Sharing Debugger and LinkedIn's Post Inspector — not the meta tags alone — before you rely on it.


Get the latest content from Figment. Subscribe today for Figma design guides and website building tips.


Figment.so

Contact

Twitter

Pricing

Privacy

Terms