What Is an Open Graph Image? The Complete Guide

When you paste a link into Facebook, X, LinkedIn, Slack, Discord, WhatsApp or iMessage and a tidy little card appears — a picture, a headline, a short description — you are looking at Open Graph in action. The picture in that card is the Open Graph image, and it is very often the single biggest factor in whether someone clicks your link or scrolls straight past it.

This guide explains exactly what an Open Graph image is, what size it should be, the meta tags that control it, and the mistakes that quietly break previews across half the internet.

What Open Graph actually is

The Open Graph protocol was introduced by Facebook in 2010 so that any web page could describe itself to social platforms in a predictable way. Instead of each platform guessing your title and scraping a random image from the page, you declare the important bits yourself using <meta> tags in the page’s <head>.

A minimal set looks like this:

<meta property="og:title" content="How we cut churn by 38% in one quarter">
<meta property="og:description" content="The three experiments that moved the needle.">
<meta property="og:image" content="https://example.com/og/churn.png">
<meta property="og:url" content="https://example.com/blog/churn">
<meta property="og:type" content="article">

The og:image tag is the one that produces the picture in the share card. Every major platform reads it — and the ones that prefer their own format, like X, fall back to it when their specific tag is missing.

The correct Open Graph image size

The recommended Open Graph image size is 1200×630 pixels, a 1.91:1 aspect ratio. This is the size that renders as a full-width “summary large” card on every platform that supports one, and it is the dimension you should treat as the standard.

1200×630 — the universal target. Use this unless you have a specific reason not to.
Minimum 600×315 — below this, platforms shrink your card to a small thumbnail with the image off to the side.
Under 5 MB — many crawlers refuse larger files. Aim well under 1 MB; a clean PNG or JPEG is plenty.

Keep important text and your logo inside a centre safe zone — roughly the middle 1080×600 region, with at least 60px of breathing room on every edge. Different apps crop the edges slightly differently, and some overlay a play button or avatar in a corner.

A share card is an advertisement you didn’t pay for. The image is the headline of that ad.

Twitter/X cards build on the same tags

X uses its own twitter: namespace but happily reads your Open Graph tags as a fallback. To guarantee the large image card, add one extra line:

<meta name="twitter:card" content="summary_large_image">

Without it, X may show a cramped “summary” card with a tiny square thumbnail — the same beautiful 1200×630 image, squeezed into a postage stamp. One tag fixes it.

Common mistakes that break previews

Most broken share cards come down to a short list of repeat offenders:

Relative image URLs. og:image must be an absolute URL (https://…). Crawlers do not run your JavaScript or resolve relative paths reliably.
Missing og:image:width and og:image:height. Declaring these lets crawlers reserve space and render the card faster, instead of waiting to download and measure the file.
Wrong dimensions. A 800×800 square or a 16:9 hero photo gets cropped or downgraded to a small card.
Cached old images. Platforms cache aggressively. After you change an image, re-scrape the URL in the platform’s debugger so the new version propagates.
One generic image for the whole site. A single homepage banner on every page is a missed opportunity — per-page images dramatically out-click a static logo.

How to generate the right image for every page

For a five-page site, hand-making images in a design tool is fine. For a blog, a docs site, or a store with hundreds of URLs, doing it by hand does not scale — and the pages you skip end up with no preview image at all.

The durable approach is to generate Open Graph images programmatically: a template defines the layout, fonts, colours and logo once, and each page’s title and metadata fill in the variables automatically. The image is rendered server-side at exactly 1200×630, served behind a single og:image tag, and regenerated whenever the page changes.

That is exactly what Ogwave does. Point it at your sitemap.xml and it discovers every URL, reads each page’s title, and renders an on-brand card for all of them — then lets you A/B test two variants and keep the higher-performing one. You can also paste any URL into the free preview tool to see how your current tags render across platforms and get a corrected, copy-paste meta block.

The short version

An Open Graph image is the preview picture for your link. Make it 1200×630, keep the text in the safe zone, use an absolute URL, declare the width and height, add twitter:card=summary_large_image, and give every page its own image rather than one generic banner. Get those right and your links earn the click they deserve.

Frequently asked questions

What size should an Open Graph image be?

Use 1200 x 630 pixels (a 1.91:1 ratio). It is the size Facebook, LinkedIn and X expect, and it downsizes cleanly to smaller thumbnails. Keep important text and logos inside the centre safe zone so nothing is cropped.

What meta tags are required for an Open Graph image?

At minimum: og:image (an absolute HTTPS URL), plus og:title, og:description and og:url. Adding og:image:width and og:image:height (1200 and 630) helps platforms render the card immediately without re-fetching the image.

Do Twitter / X cards use the same tags?

X falls back to the Open Graph tags, so a correct og:image usually works. To control it explicitly, add twitter:card (set to summary_large_image) and optionally twitter:image and twitter:title.

Why is my Open Graph image not showing?

The most common causes are a relative (non-absolute) og:image URL, an image behind login or blocked by robots, the wrong dimensions, or a stale platform cache. Re-scrape the URL in the platform debugger after fixing the tag.