What Size Should an Open Graph Image Be?
Use 1200 × 630 pixels (1.91:1) for most Open Graph images, then validate crops, metadata, file size, and platform previews.
Use 1200 × 630 pixels for a practical Open Graph default. That is approximately a 1.91:1 aspect ratio and works well for common link previews. Keep important artwork near the center, declare the image dimensions and descriptive alt text, and inspect the real preview on each platform before publishing.
The Open Graph protocol itself does not require a universal pixel size. It requires an og:image URL and defines optional properties such as width, height, MIME type, secure URL, and alt text. The 1200 × 630 recommendation comes from platform guidance, including [Wix’s current help guidance](https://support.wix.com/en/article/wix-editor-recommended-ogimage-size), rather than from the protocol specification ([Open Graph protocol](https://ogp.me/)).
Recommended Open Graph image dimensions
| Setting | Practical guidance | Why it matters |
|---|---|---|
| Canvas | 1200 × 630 px | Provides a 1.91:1 image suitable for many link-preview cards. |
| Aspect ratio | 1.91:1 | Matches the common large landscape preview shape. |
| Smaller threshold | 600 × 315 px or larger | Wix notes that smaller images can appear as small previews. |
| Minimum sometimes cited | 200 × 200 px | A square fallback may be accepted by some consumers, but it is not the recommended share-card canvas. |
| File size | Keep it below the target service’s limit | Wix guidance says 8 MB for its implementation; WhatsApp previews in that guidance require under 300 KB. |
These limits are service-specific and can change. Treat them as validation targets for the platforms you use, not as one global Open Graph rule. The [Wix reference](https://support.wix.com/en/article/wix-editor-recommended-ogimage-size) documents the 1200 × 630 recommendation, the 600 × 315 preview threshold, an 8 MB limit, and its WhatsApp-specific 300 KB guidance.
Why 1200 × 630 is the default
A 1200 × 630 canvas is large enough to remain legible on high-density screens while preserving the landscape ratio used by many social cards. It also gives designers room for a headline, subject, and brand treatment without forcing a square crop.
It is a rendering default, not protocol law. A consumer can crop, resize, recompress, or ignore parts of the metadata. One secondary cross-platform summary reports that an X large-image card can use a 2:1 crop, trimming a 1.91:1 image slightly ([urlpipe.dev](https://urlpipe.dev/guides/open-graph-image-sizes)). Keep logos, faces, and other essential details inside a central safe area.
Open Graph markup to add to a page
Put the following tags in the page’s <head>. Replace the URL and description with the actual image and its contents.
<meta property="og:title" content="Your page title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/images/share-card.jpg" />
<meta property="og:image:secure_url" content="https://example.com/images/share-card.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 concise description of the image contents" />
The four basic properties are og:title, og:type, og:image, and og:url. The protocol defines the other image fields as structured properties. If you provide multiple og:image values, the first one has preference when values conflict ([ogp.me](https://ogp.me/)).
Write useful image alt text
og:image:alt should describe what the image contains. Write “Blue dashboard chart comparing monthly signups” instead of “Share image” or a marketing caption. The protocol recommends supplying alt text when an image is specified.
Designing a 1200 × 630 image
- Reserve a safe area. Keep type, faces, product details, and logos away from the outer edges. This protects against small platform crops.
- Use one visual subject. A simple focal point survives thumbnail rendering better than a busy collage.
- Check contrast at thumbnail size. Preview the image around 300 pixels wide; thin type and low-contrast overlays disappear quickly.
- Choose the format deliberately. JPEG is a practical choice for photographs, PNG for sharp flat graphics or transparency, and WebP when the target preview service accepts it.
- Compress after export. Reduce bytes without introducing blocking or halos around text. Recheck the final dimensions after optimization.
- Use a predictable URL. Serve the image over HTTPS with a stable content type and no authentication requirement.
Validate the image before publishing
- Confirm the file is exactly 1200 × 630 pixels unless a target platform requires another ratio.
- Open the image directly and verify it returns HTTP 200 with the intended MIME type.
- Check that the URL is publicly reachable by crawlers; do not require a session cookie or client-side JavaScript.
- Inspect the generated HTML and confirm only the intended primary
og:imagecomes first. - Use each platform’s current preview or debugger tool to refresh a changed image. Cached cards can outlive the old file.
- Repeat the check after deployment, because redirects, CDN transformations, and access rules can change what crawlers receive.
Inspect a live page and its preview image
You can inspect the page source manually, use a browser’s developer tools, or capture the rendered page to see what a visitor sees. A screenshot is useful for checking that the page content and image composition match your intended share card; it does not replace checking the actual og: tags.
Capture a rendered verification screenshot with cURL
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://example.com \
-o page.webp
Capture with Python
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
timeout=90,
)
r.raise_for_status()
open("page.webp", "wb").write(r.content)
Capture with Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('page.webp', Buffer.from(await res.arrayBuffer()));
See the [ScreenshotNeo documentation](https://screenshotneo.com/docs/) for request options. ScreenshotNeo can capture a full page, a selected element, a chosen viewport or device preset, and a rendered page after a selector, delay, or network-idle wait. Those options help verify responsive layouts, but metadata validation still requires reading the HTML.
Or skip the browser setup
[ScreenshotNeo](https://screenshotneo.com) provides a one-request website screenshot API and MCP server. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response reports the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor, and other MCP clients use take_screenshot, get_page_info, and capture_pdf.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp
There is a free tier of 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots. [Create a free ScreenshotNeo account](https://screenshotneo.com/account/sign-up/).
Common errors and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No image appears in the card | Missing or inaccessible og:image |
Use an absolute HTTPS URL that returns the image without authentication. |
| Old image remains after a change | Platform or CDN cache | Use the platform’s current debugger or refresh tool, then wait for its cache to expire. |
| Image is cropped badly | Consumer uses a different aspect ratio | Move essential content into the center safe area and inspect the target platform’s preview. |
| Preview is tiny | Image is below the consumer’s preferred dimensions | Export at 1200 × 630; Wix notes that under 600 × 315 can appear as a small image. |
| Image rejected or omitted | File exceeds a service limit or has an unsupported MIME type | Compress it, verify Content-Type, and check the target service’s current limit. Wix cites 8 MB generally and under 300 KB for WhatsApp in its guidance. |
| Wrong image is selected | Several og:image tags or conflicting templates |
Put the preferred image first and remove duplicate tags. |
| Screenshot shows a popup | Capture happened before the page settled | Wait for a selector, delay, or network idle, or hide the popup selector in the capture request. |
| Screenshot request times out | Slow page, blocked resource, or bot check | Reduce unnecessary resources, set an appropriate wait condition, and inspect the verdict headers. Failed loads and timeouts are not billed by ScreenshotNeo. |
Performance, reliability, and cost considerations
- Keep the source small. A correctly sized, compressed image downloads faster and is less likely to hit service limits.
- Use a stable cacheable URL. Version the filename when the artwork changes, then refresh platform previews.
- Test authenticated and localized pages separately. A crawler may not receive cookies, headers, geolocation, or a particular timezone.
- Separate metadata checks from visual checks. Validate HTML tags with an HTTP request or parser; use a screenshot to inspect the rendered design.
- Control capture waits. Waiting for a specific selector is usually more predictable than an unnecessarily long fixed delay. Network idle can be slower on pages with persistent analytics connections.
- Batch recurring checks. ScreenshotNeo supports caching with a chosen TTL, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, and a usage API. Choose these options when monitoring many pages.
- Budget by successful captures. ScreenshotNeo bills only clean shots; cache hits and failed or blank captures are not billed.
FAQ
Is 1200 × 630 mandatory?
No. It is the practical cross-platform default. The Open Graph protocol specifies an image URL and metadata fields, not a universal pixel size.
Should an Open Graph image be PNG or JPEG?
Use JPEG for photographic artwork and PNG when you need crisp flat graphics or transparency. Confirm the target platform accepts your chosen format.
Can I use a 1200 × 630 image on X?
Usually, but a large-image card may crop it toward a 2:1 shape. Keep critical content centered and check the current preview.
How do I describe the image for accessibility?
Set og:image:alt to a concise description of the visual contents. It should describe the image, not repeat the page title as a caption.
Why does the preview differ between services?
Each service can apply its own crop, cache, file-size limit, and rendering rules. Validate the page with the preview tool for each destination.
Final checklist
- Image is 1200 × 630 pixels and has a 1.91:1 ratio.
- Important content sits inside a centered safe area.
- File size and MIME type meet each target service’s current rules.
og:title,og:type,og:url, andog:imageare present.og:image:width,og:image:height,og:image:type, and descriptiveog:image:altare supplied.- The image URL is absolute, HTTPS, public, and returns the intended file.
- Only the preferred image is first when multiple images are declared.
- Previews are refreshed and checked on the platforms where the link will be shared.


