What is an Open Graph image?

An Open Graph image is the visual part of a link preview. When someone pastes your URL into LinkedIn, X, Slack, Discord, WhatsApp, or iMessage, the app reads the page's meta tags and builds a card: title, description, domain, and image. The image is the part people notice first, and it is the part most sites leave to chance.

The name comes from the Open Graph protocol, originally introduced by Facebook in 2010 and now read by most social and messaging platforms. Some articles write the phrase as one word, opengraph image; it describes the same asset. The protocol does not describe a design system. It describes a small set of metadata fields that tell a platform what to show when a URL is shared outside the browser.

Where an Open Graph image appears

The same og:image can produce very different cards. Each platform picks its own container, crop, and text layout, which is why a design that looks correct on Facebook can lose its headline on X or Slack.

What the og:image tag actually does

The tag lives in the document head and points at an image URL. The platform fetches that URL independently when it builds the preview. That last detail explains most broken previews: the image has to be publicly reachable, not hidden behind a login, a local development host, or a signed URL that expires.

<head>
  <meta property="og:title" content="A clearer way to ship" />
  <meta property="og:description" content="What changed, why it matters, and what to try first." />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/blog/a-clearer-way-to-ship" />
  <meta property="og:site_name" content="Example" />
  <meta property="og:image" content="https://example.com/og/a-clearer-way-to-ship.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Dark card with the headline: A clearer way to ship" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="A clearer way to ship" />
  <meta name="twitter:description" content="What changed, why it matters, and what to try first." />
  <meta name="twitter:image" content="https://example.com/og/a-clearer-way-to-ship.png" />
  <meta name="twitter:image:alt" content="Dark card with the headline: A clearer way to ship" />
</head>

The Open Graph protocol names four required properties: og:title, og:type, og:image, and og:url. og:description is optional in the specification but is used by nearly every platform, so leaving it out wastes the second most visible line in the card.

Open Graph image vs. the image on your page

The og:image does not have to be the hero image, the first image in the article, or even an image that appears on the page. In fact, a purpose-built card is usually better: it can carry the headline, the brand mark, and a single supporting idea without inheriting the page's layout.

The exception is a page whose hero is already a well-composed 1.91:1 card with readable type. In that case, pointing og:image at it saves an asset. Just check the crop at small sizes before you ship.

Why 1200 x 630 is the standard

1200 x 630 is 1.904:1, close to the 1.91:1 ratio that Facebook, LinkedIn, and several other platforms use for large link cards. It is wide enough to hold a headline and a brand mark, large enough to stay sharp on high-density displays, and small enough to load quickly. X's large card is often described as 1200 x 628; the two-pixel difference does not matter in practice.

The ratio matters more than the exact dimensions. A 2400 x 1260 image has the same shape and twice the pixels. A 1200 x 1200 square does not: platforms will crop it, usually from the centre, and any text near the top or bottom can disappear. If you need one asset for every surface, design at 1200 x 630 and keep the important content inside the middle 80 percent.

What makes an Open Graph image work

• One idea. A headline of six to ten words beats a paragraph. The card is a billboard, not a summary.
• Type you can read at 300 px wide. If the headline disappears in a Slack thumbnail, it is too small.
• High contrast. Dark type on a light field or light type on a dark field. Avoid mid-tone gradients behind body text.
• A visible brand mark. The logo or domain tells people where the link goes before they read the title.
• Deliberate spacing. Text near an edge is the first thing a crop removes.
• A file under 1 MB. Smaller images load faster and fail less often. JPG or WebP is usually enough; use PNG when you need crisp flat colour.

The best cards are not always the most decorative. A solid background, one strong line of type, and a logo can outperform a busy illustration because it survives every container. If you want a system rather than one-off cards, start with a template and change the words, not the layout.

How to add an Open Graph image to a page

1. 01Make the image. Use a template or a blank 1200 x 630 canvas. Export a JPG, PNG, or WebP under 1 MB.
2. 02Upload it to a public URL. It must return HTTP 200 without a login. Do not use a local path or a data URL.
3. 03Add the tags to the head. At minimum og:title, og:type, og:image, and og:url. Add the image dimensions and alt text.
4. 04Add X card tags if you want control there. twitter:card, twitter:title, twitter:description, and twitter:image.
5. 05Fetch the page as a crawler. Confirm the tags are in the server-rendered HTML, not injected only after JavaScript runs.
6. 06Test with each platform's debugger. Refresh the cache after changing an image at the same URL.

If you use a framework, the mechanics are the same; only the file changes. Next.js exposes the tags through its metadata API, WordPress plugins write them for you, and static HTML needs them written by hand. The Open Graph meta tags guide has a tag-by-tag reference, and the Next.js guide shows the App Router version.

How to test an Open Graph image

• Facebook Sharing Debugger shows the scraped tags and lets you re-scrape a URL. It is the most useful single check because it exposes exactly what the crawler sees.
• LinkedIn Post Inspector does the same for LinkedIn and reveals cache state.
• X composer preview is the practical check. Paste the URL into a draft post and look at the card before publishing.
• Slack and Discord refetch when you paste the URL again. If the old card persists, change the image filename or append a version query string.
• Your own browser is not a test. A page can look fine to you and still serve different tags to a crawler, especially when the tags are injected client-side.

Common mistakes

• Using a relative image path, or a URL that only works on your local machine.
• Pointing og:image at a page instead of an image file.
• Serving an image behind authentication, hotlink protection, or a CDN rule that blocks social crawlers.
• Letting a CMS plugin and hand-written tags both emit og:image, so the platform picks the wrong one.
• Injecting the tags with client-side JavaScript only. Many crawlers do not run your app.
• Using a square image and losing the headline to a centre crop.
• Setting the image to 1200 x 630 in the tag but serving a 600 x 315 file, which looks soft on retina displays.
• Forgetting og:url, so shares of syndicated copies all point at the original page.

Do Open Graph images affect Google rankings?

Not directly. Google has said Open Graph metadata is not a ranking signal, and Google's rich results use schema.org structured data rather than Open Graph. What Open Graph images do affect is how a link looks when it is shared: a clear card earns more clicks, and more clicks from real people can lead to more links and more discovery. That is an indirect effect, not a ranking switch.

There is one Google surface worth knowing about: Discover. Google may use a page's image for Discover cards, and allowing large image previews with max-image-preview:large keeps that option open. That is a different mechanism from og:image, but the same design rules apply: a clean, wide, high-contrast image with a readable subject.