# What is an Open Graph image? Tags, sizes and specs in 2026

> An Open Graph image is the picture a link shows when shared. What the og:image tags mean, the 2026 sizes that work everywhere, and how sites generate them.

Published 2026-10-24 · https://shareglint.com/en/guides/what-is-an-open-graph-image

An **Open Graph image** (OG image) is the picture that appears when a link to your page is shared on LinkedIn, Facebook, X, Slack, Discord, WhatsApp, iMessage and similar apps. You choose it with one tag in the page's `<head>` — `<meta property="og:image" content="https://…">` — and the platform's crawler fetches it when the link is first shared. In 2026 the size that works everywhere is **1200×630 pixels**, as JPEG or PNG, under 5 MB.

## Where it comes from: the Open Graph protocol

[Open Graph](https://ogp.me/) is a set of `<meta>` tags Facebook introduced in 2010 to turn any web page into a "rich object" with a title, a type, a URL and an image. Almost every platform that builds link previews reads it today, including ones that compete with Facebook.

The protocol lists four required properties:

```html
<meta property="og:title" content="What is an Open Graph image?">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/og-image">
<meta property="og:image" content="https://example.com/og/og-image.png">
```

`og:image` has optional structured properties that help crawlers and accessibility ([ogp.me §structured properties](https://ogp.me/#structured)):

| Tag | What it does |
|---|---|
| `og:image:width`, `og:image:height` | Pixel size; lets Facebook lay out the card before it downloads the file |
| `og:image:type` | MIME type, such as `image/png` |
| `og:image:alt` | Text description of the image ("not a caption"); the spec says a page with `og:image` should set it |
| `og:image:secure_url` | An HTTPS URL, from the days when `og:image` was often plain HTTP |

Add `og:description` for the line of text under the title, and `twitter:card` for X (see below).

## What platforms do with it

When a link is pasted, the platform's crawler — `facebookexternalhit`, `LinkedInBot`, `Twitterbot`, `Slackbot-LinkExpanding`, `Discordbot` and others — downloads the page's HTML, reads the tags, then downloads the image. The result is cached: the next person who shares the same URL gets the stored preview without a new fetch. That cache is why "I fixed the image but the old one still shows" is the most common OG question; the [debugging guide](https://shareglint.com/en/guides/og-image-not-showing) covers how to refresh each platform.

Two consequences matter for developers:

- **The tags must be in the server's HTML.** Preview crawlers do not wait for your JavaScript; meta tags set by a client-side app after load are invisible to them.
- **The URL must be absolute and public.** The crawler fetches the image itself, without your cookies, from its own servers.

## Sizes and limits in 2026

| Platform | What it asks for | Source |
|---|---|---|
| Facebook | At least 1200×630 for high-resolution displays; 600×315 minimum for a large card; 8 MB max; close to 1.91:1 | [Meta](https://developers.facebook.com/docs/sharing/webmasters/images) |
| LinkedIn | Minimum 1200×627, 1.91:1, max 5 MB, JPG/PNG/GIF | [LinkedIn Help](https://www.linkedin.com/help/linkedin/answer/a521928) |
| X | 2:1 for `summary_large_image`, 300×157 to 4096×4096, under 5 MB | [X developer docs](https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image) |
| Slack, Discord, WhatsApp, Telegram | No published size; 1200×630 displays well | — |

One 1200×630 image satisfies all of them. The [OG image size guide](https://shareglint.com/en/guides/og-image-size) has the per-platform detail, including why WebP is a bad idea for `og:image` (LinkedIn does not list it).

## og:image vs twitter:image

X has its own tags (Twitter Cards). `twitter:card` chooses the layout — `summary_large_image` for a big image above the title — and `twitter:image` the picture. X [falls back to Open Graph](https://developer.x.com/en/docs/x-for-websites/cards/overview/markup) when a `twitter:` property is missing, so the usual set is:

```html
<meta property="og:image" content="https://example.com/og/post.png">
<meta name="twitter:card" content="summary_large_image">
```

Note the attribute: Open Graph uses `property=`, Twitter Cards use `name=`. Most parsers accept either, but following each spec avoids surprises.

## What makes a good OG image

The image is shown at roughly 500 pixels wide in a feed and smaller in chat apps, next to your title in plain text. So:

- **Large type, few words.** A title set at 60–80 px on a 1200-px canvas stays readable when scaled down; body-size text does not.
- **Keep it inside the safe area.** X trims 1200×630 to 2:1 and some apps round corners; leave margins of about 60 px.
- **Do not repeat the page title verbatim if the platform already shows it** — or do, but make it the dominant element, not one of five.
- **Brand consistently.** A logo or colour bar in the same place on every card makes your links recognisable in a busy feed.
- **Small files.** 50–300 KB is typical for a text card; multi-megabyte photos are slow to fetch and sometimes skipped.

## How sites produce one image per page

A single site-wide image is fine for a homepage; for articles, products, docs pages and job posts, a per-page image with that page's title works better. The common ways to make them:

1. **By hand** in a design tool — fine for a handful of pages.
2. **At build time or in a job**, with a headless browser (Puppeteer, Playwright) or a drawing library (Pillow, GD, Satori/`next/og`). Free per image, but you maintain the renderer, fonts and memory.
3. **With an image API**: you keep a template and send the page's fields, either from your server or as a signed URL right in the `og:image` tag. Shareglint is one of these: 21 built-in 1200×630 templates, your own HTML and CSS templates, and a Free plan of 100 images a month. Others include Bannerbear, Placid and HTMLCSStoImage — see the [honest comparison](https://shareglint.com/en/guides/bannerbear-vs-placid).
4. **With a screenshot of the page itself** — quick, but a desktop screenshot is the wrong shape and hard to read at thumbnail size; [when screenshots make sense](https://shareglint.com/en/guides/screenshot-api-vs-templates).

Framework-specific walkthroughs: [Next.js](https://shareglint.com/en/guides/nextjs-og-images-without-vercel-og-limits), [Laravel](https://shareglint.com/en/guides/dynamic-og-images-laravel), [Rails](https://shareglint.com/en/guides/dynamic-og-images-rails), [Django](https://shareglint.com/en/guides/dynamic-og-images-django), [WordPress](https://shareglint.com/en/guides/wordpress-og-images-without-code) and [static sites](https://shareglint.com/en/guides/og-images-static-sites-hugo-jekyll-astro).

## A minimal, complete example

```html
<head>
  <title>How we cut our image pipeline to 900 ms</title>
  <meta name="description" content="Moving rendering off the request path and caching by content hash.">

  <meta property="og:title" content="How we cut our image pipeline to 900 ms">
  <meta property="og:description" content="Moving rendering off the request path and caching by content hash.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/blog/image-pipeline">
  <meta property="og:image" content="https://example.com/og/image-pipeline.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="How we cut our image pipeline to 900 ms">
  <meta name="twitter:card" content="summary_large_image">
</head>
```

Paste the live URL into [Facebook's Sharing Debugger](https://developers.facebook.com/tools/debug/) or our [OG Checker](https://shareglint.com/en/tools/og-checker) to see the card before anyone shares it.

## FAQ

### What is an OG image?

The image set in a page's og:image meta tag. Social networks and messaging apps show it in the preview card when someone shares a link to the page, next to the title and description from og:title and og:description.

### Is og:image required?

The Open Graph protocol lists og:image among the four required properties, with og:title, og:type and og:url. Platforms still show a preview without it, but usually as text only or with an image they guessed from the page.

### What size should an OG image be?

1200×630 pixels (1.91:1), JPEG or PNG, under 5 MB. That meets Facebook's recommendation and LinkedIn's 1200×627 minimum, and it works for X's summary_large_image card, Slack, Discord and messaging apps.

### What is the difference between og:image and twitter:image?

og:image comes from the Open Graph protocol and is read by almost every platform. twitter:image is X's own tag; X uses it first and falls back to og:image when it is missing. Most sites set og:image plus twitter:card and skip twitter:image.