Open Graph Image Format: Complete Guide to og:image, Sizes, and Debugging

Direct answer: og:image is an Open Graph metadata property whose value is a URL for an image representing a web page. It is not an image encoding format and it is not a special file type. Put the property in the document’s <head>, point it to an image that crawlers can fetch, and add optional structured properties such as its HTTPS URL, MIME type, pixel dimensions, and alternative text.

A practical starting point is a 1200 × 630 pixel image in JPEG, PNG, or WebP when the destination supports it. That dimension is a widely used cross-platform design recommendation, not a size mandated by the Open Graph protocol. Individual social networks can apply their own cropping, file-size, and format rules.

What the Open Graph image format means

Open Graph describes a page as an object in a social graph. The root image property tells a crawler which image represents that object:

<meta property="og:image" content="https://example.com/images/article-share.jpg">

The value is a fully qualified URL. When a user shares the page, a platform may fetch that URL and use the returned image in its preview card. The image itself can be any format the destination accepts; Open Graph does not define a new raster format or compression scheme.

The authoritative protocol documentation defines the core properties and examples at ogp.me. Treat platform rendering behavior as separate from the protocol: a valid tag does not guarantee identical crops or previews everywhere.

Minimal implementation

Add the following tags inside <head>. Keep the URL public, stable, and served over HTTPS.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta property="og:title" content="Open Graph Image Format">
  <meta property="og:description" content="A practical guide to og:image metadata.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-image-format">
  <meta property="og:image" content="https://example.com/images/open-graph-image-format.jpg">
  <meta property="og:image:alt" content="Diagram showing a web page image used in a social preview">
</head>
<body>...</body>
</html>

og:image:alt describes what is in the image. It is alternative text, not a visible caption. The protocol recommends supplying it whenever a page specifies og:image.

Every supported image property

Property	Purpose	Example
og:image	Primary image URL.	https://example.com/share.jpg
og:image:secure_url	HTTPS alternate URL when the image requires a secure connection.	https://example.com/share.jpg
og:image:type	MIME type of the image.	image/jpeg
og:image:width	Image width in pixels.	1200
og:image:height	Image height in pixels.	630
og:image:alt	Description of the visual content.	A chart of monthly signups

A complete declaration can therefore look like this:

<meta property="og:image" content="https://cdn.example.com/article.jpg">
<meta property="og:image:secure_url" content="https://cdn.example.com/article.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A developer reviewing Open Graph metadata">

Choosing dimensions, format, and file size

Is 1200 × 630 required?

No. The protocol specifies a URL and optional metadata, not one universal pixel size. 1200 × 630 is a useful default because it is a 1.91:1 landscape ratio used by many sharing guides. Confirm the current requirements of the platform you care about when exact rendering matters.

JPEG, PNG, or WebP?

• JPEG: usually the smallest choice for photographs and gradients.
• PNG: useful for sharp interface diagrams, line art, or transparency where supported.
• WebP: can reduce bytes, but verify that every target crawler and downstream platform accepts it.

Use the actual MIME type in og:image:type, and configure the server’s Content-Type header to match. A file named .jpg that is returned as another format can confuse validators and caches.

Design for cropping

Keep the title or subject away from the extreme edges. Platforms may crop a landscape image into a square or another ratio. Use strong contrast and a single clear subject so the preview remains understandable at small sizes. Do not put essential meaning only in tiny text inside the image; the metadata title and description should carry the page’s context.

Multiple Open Graph images

You may provide more than one og:image. The first image is preferred when values conflict. Put the structured properties for an image immediately after its root declaration, before starting the next image entry:

<meta property="og:image" content="https://example.com/share-wide.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Wide article illustration">

<meta property="og:image" content="https://example.com/share-square.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">
<meta property="og:image:alt" content="Square article illustration">

Do not interleave the width and height of one image after declaring another root image. Parsers interpret a new og:image as the beginning of a new image record.

Generating and validating the image

1. Export the artwork at the dimensions you selected.
2. Upload it to a public HTTPS URL with a stable path.
3. Request the URL without authentication and check that it returns an image status and matching MIME type.
4. Inspect the final rendered HTML, not only a template source file. Server-side frameworks can omit or overwrite head tags.
5. Use the target platform’s current preview debugger or validator. Crawlers cache results, so a corrected tag may not appear immediately.

curl -I https://example.com/images/article-share.jpg

Check for a successful status, a sensible Content-Type such as image/jpeg, and redirects that do not require cookies or login. Avoid URLs that depend on a short-lived signed token unless the crawler can fetch them during the token’s lifetime.

Common reasons an Open Graph image is not showing

Symptom	Likely cause	Fix
No image at all	Missing tag, relative URL, or blocked request.	Use one absolute HTTPS URL and allow anonymous access.
Old image persists	Social crawler cache.	Use the platform’s refresh tool or change the asset URL when appropriate.
Wrong image appears	Another og:image appears first.	Move the preferred image declaration above alternatives.
Image is broken	404, timeout, TLS error, or hotlink protection.	Fetch the URL from an external network and remove authentication requirements.
Image is cropped badly	Platform-specific aspect ratio.	Keep important content centered and check the destination’s current guidance.
Alt text is missing	og:image:alt was omitted or placed under the wrong image.	Add descriptive alt text directly after the matching root tag.
Metadata works in source but not production	JavaScript injects tags after the crawler snapshot.	Render Open Graph tags in the initial server response.

Rendering reliable previews with ScreenshotNeo

If your Open Graph artwork is generated from a live page, a screenshot service can capture the final rendered state instead of relying on a local browser script. ScreenshotNeo is a website screenshot API and MCP server. It accepts one GET request and returns PNG, JPEG, WebP, or PDF.

Its clean-shot workflow accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Each step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and whether the request was billed.

Or skip the browser setup

See the ScreenshotNeo API documentation for the complete option list. This one-call example captures Stripe as WebP:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Use it when you need cookie banners, popups, and chat widgets removed before the shot; when bot checks, blank pages, and failed loads should never be billed; or when an MCP server should let AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

Relevant capture options for social images

• Full-page capture: loads lazy images and captures the complete document.
• Element capture: target the card or hero artwork with a CSS selector.
• Viewport and device presets: reproduce desktop, mobile, or retina layouts.
• Dark mode: capture the theme that matches your intended preview.
• Custom CSS and JavaScript: hide controls or add a print-only composition.
• Wait controls: wait for a selector, a delay, or network idle before capture.
• Blocking rules: block ads, trackers, requests, or resource types to reduce noise.
• Headers, cookies, user agent, timezone, and geolocation: reproduce the content your page serves to a crawler or audience.
• Caching: choose a TTL when repeated captures can reuse an image.
• Signed links and async jobs: publish images in public <img> tags or receive completed captures by signed webhook.
• Bulk capture: submit up to 100 URLs per call.

Performance, reliability, and cost considerations

Generate images asynchronously when a page contains heavy JavaScript or many fonts. Wait for a meaningful selector instead of an arbitrary long delay when possible. Block analytics and advertising requests that cannot affect the artwork. Cache a result with a TTL when the page changes infrequently; bypass or shorten the TTL for frequently updated articles.

For reliability, make the image URL deterministic, log the returned verdict and billing headers, and treat bot checks, blank pages, and timeouts as capture outcomes that need handling. Keep a fallback image for pages whose source is temporarily unavailable. Bulk capture is useful for publishing many article previews, while signed webhooks prevent a request from blocking a build.

ScreenshotNeo offers a free 1,000-shot monthly plan, then Starter at $5 for 3,000, Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000, and Business at $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Only clean shots are billed.

Implementation checklist

• Use an absolute HTTPS og:image URL.
• Return the correct image MIME type and a successful status.
• Choose dimensions for the platforms you actually use.
• Add og:image:alt that describes the visual content.
• Place structured fields directly after their image declaration.
• Put the preferred image first when multiple images are supplied.
• Keep important artwork inside a safe center area for cropping.
• Validate the production HTML and refresh crawler caches.
• Record a fallback image and an operational plan for failed captures.

FAQ

Is og:image the same as a favicon?

No. A favicon identifies a site or browser tab. og:image represents the shared page in a social preview.

Can I use a relative image path?

Use an absolute URL. Relative paths depend on the page URL and are more likely to fail in crawlers or previews.

Does og:image:alt appear as a visible caption?

No. It is descriptive metadata. The platform may use it for accessibility or internal processing.

Should every page have a unique image?

A unique image helps readers distinguish shared pages, but a stable site-wide fallback is better than a missing or inaccessible image.

Why does a validator show one image while the platform shows another?

Platforms cache independently and can apply different selection and crop rules. Check tag order, fetchability, and the destination’s current debugger.