# og:image

The Open Graph image tag declares the visual a chat preview, social card, or AI summary attaches to your page. Missing one means the consumer renders a placeholder next to your name.

By AgentSite · 2 min read · Updated 2026-05-24

`og:image` is the Open Graph property that declares the visual a downstream consumer — Slack, Discord, X, LinkedIn, AI chat clients — attaches to your page when rendering a link. It is required by Open Graph. Without one, the consumer picks a fallback: a placeholder or a screenshot the page doesn't control.

## The tag

```html
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A short description of the image.">
```

[The Open Graph protocol](https://ogp.me/) lists `og:image` as one of four required tags (alongside `og:title`, `og:type`, `og:url`) and notes that "if the page specifies an `og:image` it should specify `og:image:alt`." The width, height, and alt sub-properties are optional but improve consumer rendering.

## Size and format

[Facebook's image documentation](https://developers.facebook.com/docs/sharing/webmasters/images/) names the working dimensions: "Use images that are at least 1200 x 630 pixels for the best display on high resolution devices… The minimum allowed image dimension is 200 x 200 pixels. The size of the image file must not exceed 8 MB." Facebook recommends a 1.91:1 aspect ratio so the image "display\[s\] the full image in Feed without any cropping."

The same ratio works across the consumer surface. Slack, X, Discord, and the link-preview cards that AI chat clients render all crop or pad against ~1.91:1; ship the canonical 1200×630 PNG or JPG and every consumer renders cleanly.

## [Schema.org](http://Schema.org) pairing

[`schema.org/image`](https://schema.org/image) is the structured-data equivalent — every type that inherits from `Thing` (including `Article`, `Product`, `Recipe`) accepts an `image` property, either a URL or a fully described `ImageObject`. Ship the same image in `og:image` and the [Schema.org](http://Schema.org) `image` property and both surfaces agree.

## Anti-patterns

Three failures show up reliably:

1.  **No tag at all.** The page has no `og:image`. The consumer picks something — the first IMG in the body, a logo, a placeholder — and you have no control over what people see.
2.  **Wrong-aspect crop.** A 1024×768 image gets center-cropped to 1.91:1 and the focal element drops out of frame. Test against the consumer's rendering, not the source dimensions.
3.  **Image URL that 404s.** The tag points at a path that returns 404, so consumers cache the missing-image placeholder. Set `Cache-Control: public, max-age=31536000` on the image URL once it's stable.

## Where this fits

og:image is a Layer 3 head-tag signal that completes the head triplet with [page title](/page-title) and [meta description](/meta-description) — title, summary, and visual together form the consumer-side preview the engine assembles from your head. The layered place is in [the five layers of AEO](/five-layer-aeo); the catalog of failure modes is in [AEO problems](/aeo-problems).