Open Graph Image Guidelines

Use a 1200 × 630 pixel raster image as your practical starting point. Declare it with an absolute HTTPS og:image URL, include width, height and descriptive alt metadata, keep important content away from crop edges, and validate the preview on every platform you care about. Platform card types and limits vary, so 1200 × 630 is a reliable baseline rather than a universal guarantee.

1. What an Open Graph image is

Open Graph metadata lets a page become a rich object when it is shared. The protocol defines og:image as one of four required basic properties, alongside og:title, og:type and og:url. The image URL identifies the visual representation of that page in the social graph.

The protocol also defines og:image:url as equivalent to og:image. Optional structured properties describe the image more precisely:

og:image:secure_url: an HTTPS alternative when the main image URL is not secure.
og:image:type: the actual MIME type, such as image/png or image/jpeg.
og:image:width and og:image:height: the pixel dimensions.
og:image:alt: a description of meaningful image content, not a caption.

See the Open Graph protocol for the property definitions and ordering rules.

2. Recommended Open Graph image size

Prepare the master image at 1200 × 630 pixels, an aspect ratio of about 1.91:1. This size is a practical cross-platform default identified by a guide updated in July 2026. It is commonly accepted by Facebook, iMessage, Slack, Discord, WhatsApp and Telegram. LinkedIn lists 1200 × 627, but 1200 × 630 generally fits similarly. X can crop a 1200 × 630 image slightly for a large card.

Do not treat that canvas as a promise that every surface will show the same result. Card type, device, message client and platform updates can change the displayed crop.

Decision	Practical guidance
Default canvas	1200 × 630 pixels
Aspect ratio	Approximately 1.91:1
Important content	Keep text, faces and logos in a central safe area; let decorative backgrounds reach the edges
Smallest fallback	Some surfaces accept much smaller images, but a 1200 × 630 source gives crawlers more usable pixels

Secondary references list Facebook at a 200 × 200 minimum and up to 8 MB, LinkedIn at up to 1200 × 627 and 5 MB, and X at 300 × 157 minimum, 4096 × 4096 maximum and 5 MB. A community-maintained table reports different ratio and limit details. These values are volatile; confirm strict limits in the destination platform’s current documentation before publishing.

3. Image format, quality and cropping

Choose a compatible format

JPEG: a good default for photographs and gradients.
PNG: useful for screenshots, flat artwork, transparency and small text.
WebP: broadly supported, but an obscure crawler may still fail to decode it.
SVG: avoid for social previews unless the target platform explicitly supports it.
Animated GIF: many crawlers display only the first frame.

For broad compatibility, use PNG or JPEG unless your target services document support for another format. Ensure that og:image:type, when present, matches the file actually served.

Protect the safe area

Preview surfaces crop to different ratios. Put essential text and logos near the center and use edge regions for background decoration. Check both the full 1200 × 630 image and the likely crop before release. Avoid placing a headline flush against an edge where a square or 2:1 crop can remove it.

Keep files fetchable

Serve the image from a publicly reachable HTTPS URL. Do not require a browser session, a cookie, a JavaScript challenge or an authorization header that a social crawler cannot provide. Return the correct image bytes with a matching MIME type and a successful HTTP response.

4. Add the metadata to your page

Put the tags in the document’s <head>. Use absolute URLs, not relative paths.

<meta property="og:title" content="Open Graph Image Guidelines">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/open-graph-images">
<meta property="og:image" content="https://example.com/images/open-graph-guide.png">
<meta property="og:image:secure_url" content="https://example.com/images/open-graph-guide.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A webpage preview showing how to size and validate an Open Graph image">

The protocol allows multiple images. If you provide more than one, the first og:image is preferred when there is a conflict. Place that image’s structured properties immediately after its root tag; when another root og:image appears, subsequent structured properties belong to the new image.

<meta property="og:image" content="https://example.com/images/primary.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Primary article illustration">

<meta property="og:image" content="https://example.com/images/fallback.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Fallback article illustration">

5. Create and validate an image before publishing

Export a 1200 × 630 PNG or JPEG.
Check that text and other essential details remain inside the central safe area.
Upload it to a stable, public HTTPS URL.
Inspect the rendered HTML, rather than only a template source file, and confirm the final og:image value.
Request the image URL directly and verify its status, dimensions and MIME type.
Paste the page into each destination platform’s preview or debugger.
If you replace an image at the same URL, use the platform’s refresh or scrape tool; crawlers can retain an older copy.

The Open Graph site identifies Facebook Object Debugger as Facebook’s parser and debugger. Other services provide their own preview tools. There is no universal cache lifetime, so use the target service’s current debugger when a preview is stale.

# Check response headers and redirects
curl -I https://example.com/images/open-graph-guide.png

# Download the bytes for local inspection
curl -L https://example.com/images/open-graph-guide.png -o /tmp/og-image.png

# Inspect dimensions and format with ImageMagick
identify /tmp/og-image.png

6. Troubleshoot missing or incorrect previews

Symptom	Likely cause	Fix
No image appears	The tag is absent, malformed or outside the rendered head	Inspect rendered HTML and add a valid `og:image` tag
Image URL is ignored	The URL is relative, non-HTTPS or not publicly fetchable	Use an absolute HTTPS URL that returns the image without authentication
Old image remains	The platform cached the previous scrape	Use its debugger or refresh workflow and verify the exact URL being fetched
Image is cropped badly	Important content is near an edge or the card uses another ratio	Move essential content toward the center and preview the target card type
Image is rejected	File is too large, dimensions are unsupported or MIME type is wrong	Compress the file, use PNG or JPEG, confirm dimensions and match `og:image:type` to the response
Wrong image is selected	Multiple roots are present and the first one wins	Put the preferred image first and keep each image’s structured tags together
Preview works in a browser but not in sharing	The crawler cannot execute required JavaScript or pass a bot check	Serve a static image URL that is directly fetchable

7. Performance, reliability and cost considerations

Generate the image once and serve it from a cacheable, stable URL.
Keep the file within each destination’s current size limit; WhatsApp guidance commonly recommends staying below 600 KB.
Use explicit width and height so crawlers can understand the asset before downloading it.
Do not rotate the image URL on every request. A stable URL makes refresh and debugging predictable.
When content changes, either update the asset at a known URL and refresh the platform cache or publish a versioned URL and update og:image.
Use a static fallback image for pages whose primary visual is generated client-side.

Platform limits and card behavior change. Treat third-party comparison tables as planning aids and verify important values against current platform-owned documentation.

8. Or skip the browser setup

If your Open Graph artwork is a rendered web page or component, ScreenshotNeo can capture it through one HTTP request. Set a 1200 × 630 viewport (or resize the result) and choose PNG, JPEG or WebP as needed. The API can also apply custom CSS, hide selectors, wait for a selector or network idle, set headers and cookies, and capture a specific element.

Cookie banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages and failed loads are never billed. An MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

See the ScreenshotNeo documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/og-render \
  -o og-image.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://example.com/og-render",
    },
    timeout=90,
)
r.raise_for_status()
open("og-image.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/og-render'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('og-image.webp', data);

Responses identify whether a capture was clean and billed through the X-Page-Verdict and X-Billed headers. Cache hits, failed loads, timeouts, blank pages and bot checks cost nothing. Create a free ScreenshotNeo account to get 1,000 screenshots each month with no card.

9. FAQ

Is 1200 × 630 mandatory?

No. It is a practical default that fits many services. Check the card type and current requirements for each important destination.

Should I use `og:image:url` or `og:image`?

Use og:image; the protocol defines og:image:url as identical. You do not need both unless your tooling expects both.

Is `og:image:alt` visible as a caption?

No. It describes the meaningful image content for metadata consumers; it is not a visible caption.

Why does a correct image still look different on each platform?

Services use different card ratios, crops, caches and fallback rules. Validate the rendered preview on the actual service instead of relying only on the source dimensions.

Can I use one image for every page?

Yes, but a page-specific image usually communicates more context. Keep a stable generic fallback for pages that cannot generate a custom asset.