What Image Size Should You Use for Web Previews?

For most social and link previews, start with 1200 × 630 pixels (about a 1.91:1 ratio). This is a practical convention, not a universal requirement: the Open Graph protocol defines an image URL and optional dimensions but does not mandate one pixel size. Preview services can crop the asset differently.

For Google Discover, use an image at least 1200 pixels wide, with more than 300,000 total pixels and a 16:9 ratio. Enable large previews with max-image-preview:large (or use AMP). Keep the important subject away from edges because Discover can crop automatically.

Recommended sizes by use case

Use case	Starting size	Ratio	What to watch
General social or messaging link preview	1200 × 630	1.91:1	Platforms may crop or letterbox it.
Google Discover large image	At least 1200 px wide; over 300,000 pixels total	16:9	Use `max-image-preview:large`; Google selects and crops automatically.
In-page responsive hero	Based on the rendered slot	Any suitable layout ratio	Serve multiple candidates with `srcset` and `sizes`.
Open Graph metadata	Use your chosen preview asset	Prefer landscape	`og:image:width` and `og:image:height` describe the file; they do not impose a standard.

There is no size guaranteed to look identical everywhere. Check the current card documentation for a platform that matters to your launch.

Why 1200 × 630 is a useful default

A 1200 × 630 canvas is large enough for sharp display and maps well to the landscape cards used by many sharing surfaces. Treat it as a production starting point: keep the main subject near the center, leave safe margins for cropping, and export a high-quality JPEG, PNG, or WebP at a reasonable file size.

The Open Graph protocol requires four basic properties: og:title, og:type, og:image, and og:url. It also documents optional image properties for secure URL, width, height, MIME type, and alternative text. The width and height values report the asset’s dimensions; they are not a universal minimum or maximum. See the Open Graph protocol.

Google Discover requirements

Google’s published Discover guidance is more specific than the general Open Graph convention:

Width of at least 1200 pixels.
More than 300,000 total pixels.
A 16:9 aspect ratio for the large image.
max-image-preview:large in robots metadata, or AMP.

Google may choose and crop an image automatically. Provide a representative, high-quality image rather than a generic logo or text-heavy graphic, and compose the important content so it remains visible in a landscape crop. Read Google’s Discover documentation and its image SEO guidance.

Implement the metadata

Put these tags in the document’s <head>. Replace the example URL and image with canonical values from your page.

<title>Example article | Example.com</title>
<meta name="description" content="A concise description of the page.">

<meta property="og:title" content="Example article">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/articles/example">
<meta property="og:image" content="https://example.com/images/example-1200x630.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/webp">
<meta property="og:image:alt" content="A landscape illustration representing the article topic">

<meta name="robots" content="max-image-preview:large">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Example article">
<meta name="twitter:description" content="A concise description of the page.">
<meta name="twitter:image" content="https://example.com/images/example-1200x630.webp">

Use an absolute, publicly reachable HTTPS URL. Keep the image available to crawlers, return the correct Content-Type, and avoid requiring a session cookie or client-side JavaScript to fetch it.

Keep preview images separate from responsive page images

A social preview is metadata. An image rendered inside the article is selected according to the layout, viewport, and device. Do not force the 1200 × 630 asset into every in-page slot.

<img
  src="/images/article-800.jpg"
  srcset="/images/article-480.jpg 480w,
          /images/article-800.jpg 800w,
          /images/article-1200.jpg 1200w,
          /images/article-2000.jpg 2000w"
  sizes="(max-width: 700px) 100vw, 800px"
  width="1200"
  height="800"
  alt="Description of the article illustration"
  loading="lazy"
>

Keep a valid src fallback because some browsers and crawlers may not understand srcset or sizes. Use <picture> when you need alternate formats or art direction. Google documents these responsive-image techniques in its image best practices.

Design and cropping checklist

Export a 1200 × 630 master for general sharing.
Make a 16:9 version at 1200 pixels or wider for Discover.
Keep faces, products, and other essential subjects inside a central safe area.
Avoid placing small text near edges; crops and small screens make it unreadable.
Use a representative image, not a generic site logo.
Generate a useful alt description for metadata; describe the image content rather than writing a caption.
Set explicit width and height attributes on in-page images to reduce layout shift.

Generate a preview by rendering the page

If the preview is assembled from live HTML and CSS, render a dedicated preview route at a fixed 1200 × 630 viewport. A browser automation script can load the route, wait for fonts and images, and save a screenshot. The exact browser API varies, but the workflow is consistent:

Build a route containing only the share-card composition.
Set the viewport to 1200 × 630 and device scale factor to 1 or 2.
Wait for document.fonts.ready and all critical images.
Capture as PNG for lossless graphics or WebP/JPEG for smaller delivery.
Publish the resulting file at a stable HTTPS URL and reference it from og:image.

// Browser-automation pseudocode
await page.setViewportSize({ width: 1200, height: 630 });
await page.goto('https://example.com/share-card/article-1', { waitUntil: 'networkidle' });
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'article-1.webp', type: 'webp' });

Or skip the browser setup

ScreenshotNeo captures a URL through one GET request and can return PNG, JPEG, WebP, or PDF. It can load lazy images, capture a CSS-selected element, set a viewport or device preset, apply dark mode and retina scale, inject CSS or JavaScript, click an element, wait for a selector, delay, or network idle, and set headers, cookies, user agent, authorization, timezone, or geolocation. It can also hide selectors, block ads, trackers, requests, or resource types, resize images, cache with a chosen TTL, create signed links, run asynchronous jobs with signed webhooks, capture up to 100 URLs per bulk call, and expose usage and OpenAPI endpoints.

Use the same URL that renders your 1200 × 630 card. Full API options are in the ScreenshotNeo documentation.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/share-card/article-1 \
  -o preview.webp

Python

import requests

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

Node.js

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

ScreenshotNeo accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

The Free plan includes 1,000 shots each month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.

Performance, reliability, and cost

File size: Google notes that images can contribute substantially to page weight. Use modern compression and responsive candidates; do not ship a 2000-pixel file into a 320-pixel slot.
Cacheability: Give generated previews stable URLs and long cache lifetimes when the content is immutable. Version the filename when the design changes.
Reliability: Keep the metadata image on a highly available HTTPS host, return a fast response, and avoid expiring signed URLs before crawlers can fetch them.
Rendering: Wait for fonts and critical images before capture. A network-idle wait alone may finish before a late image or animation is ready.
Cost: Static, pre-rendered assets usually cost less to deliver than rendering on every request. If you use an API, cache repeated captures and select an appropriate TTL. ScreenshotNeo does not bill cache hits or failed captures.

Troubleshooting

Symptom	Likely cause	Fix
No preview appears	Missing or relative `og:image`, blocked crawler, or non-HTTPS URL.	Use an absolute HTTPS URL, verify it returns an image directly, and allow crawlers.
Preview is cropped badly	Important content is near an edge or the platform uses another ratio.	Move the subject into the safe area and provide a landscape composition.
Discover shows a small image	Large-image preview is not enabled.	Add `max-image-preview:large` and meet the 1200-pixel, 300,000-pixel, 16:9 guidance.
Old image persists	The platform cached previous metadata.	Keep the URL stable for unchanged content; version the URL when replacing an asset, then use the platform’s current debugger or recrawl process.
Screenshot contains a cookie banner or popup	The page was captured before consent handling or overlay removal.	Handle the banner in browser automation, hide the selector, or use ScreenshotNeo’s consent and popup removal.
Screenshot is blank or incomplete	Capture ran before lazy content, fonts, or JavaScript finished.	Wait for a selector, a delay, or network idle; ensure the target URL is reachable without authentication.
Image looks soft	Source pixels are smaller than the displayed slot or device scale is too low.	Export at the target dimensions or larger and use an appropriate retina scale.

FAQ

Is 1200 × 630 mandatory?

No. It is a practical cross-platform starting point. Open Graph itself does not define a universal pixel size.

Can I use a square image?

You can, but a square asset may be cropped or letterboxed on landscape preview surfaces. Use a landscape master when the destination is unknown.

Should the Open Graph image match the hero image?

It may, but it does not have to. Choose the asset that communicates the page clearly in a compact landscape card.

Does a larger file always improve ranking?

No. Google recommends representative, high-quality images, while also recommending efficient delivery. Pixel dimensions and file weight both matter.

What should I do when a platform has its own specification?

Follow that platform’s current official documentation and test the exact card or message surface. No single file is guaranteed to render identically everywhere.