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 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:
<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):
| 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 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 |
|---|---|---|
| At least 1200×630 for high-resolution displays; 600×315 minimum for a large card; 8 MB max; close to 1.91:1 | Meta | |
| Minimum 1200×627, 1.91:1, max 5 MB, JPG/PNG/GIF | LinkedIn Help | |
| X | 2:1 for summary_large_image, 300×157 to 4096×4096, under 5 MB |
X developer docs |
| Slack, Discord, WhatsApp, Telegram | No published size; 1200×630 displays well | — |
One 1200×630 image satisfies all of them. The OG image size guide 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 when a twitter: property is missing, so the usual set is:
<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:
- By hand in a design tool — fine for a handful of pages.
- 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. - 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:imagetag. 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. - 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.
Framework-specific walkthroughs: Next.js, Laravel, Rails, Django, WordPress and static sites.
A minimal, complete example
<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 or our OG Checker to see the card before anyone shares it.
