ScreenshotNeo
Sign in Get a free key

BlogGuides

Website Social Preview Image Size: The Practical 1200 × 630 Guide

Use 1200 × 630 pixels as a practical default for website social previews, then verify each platform’s crop, limits, metadata, and cache.

By the ScreenshotNeo team1 October 20266 min read

Use 1200 × 630 pixels (about 1.91:1) for a general-purpose website social preview image. It is a practical cross-platform starting point, not a universal rule. LinkedIn documents a minimum of 1200 × 627 pixels, recommends a 1.91:1 ratio, and limits the file to 5 MB. Other platforms may crop, resize, or impose different limits, so create a separate asset when a channel has a distinct layout.

Use case Recommended starting point What to verify
One image shared across several services 1200 × 630 px, 1.91:1 Platform crop, file-size limit, and cache refresh behavior
LinkedIn website sharing At least 1200 × 627 px; 1.91:1 recommended 5 MB maximum and the current LinkedIn requirements
Portrait-first publishing Create a separate portrait composition Confirm the destination’s current official dimensions

The Open Graph protocol defines metadata for a rich link preview, but it does not mandate one universal pixel size. Treat 1200 × 630 as a production default that gives you enough resolution for large previews while preserving the broad 1.91:1 shape.

Why 1200 × 630 works as a default

A 1200 × 630 image is close to the 1.91:1 landscape ratio used by major link-preview layouts. It gives designers room for a title, product image, or illustration while keeping important details visible when a service trims the edges.

Do not interpret the default as a promise that every network will show the full bitmap. Preview services can select a different crop, use a different card template, or retain an older fetched image. If one channel is strategically important, design and export an asset for that channel instead of relying on one shared file.

Open Graph tags to add to your page

Place these elements in the HTML <head>. The Open Graph protocol defines og:title, og:type, og:image, and og:url as the basic properties. Add the optional image fields, especially og:image:alt, so crawlers have a useful description.

<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/article">
<meta property="og:image" content="https://www.example.com/images/article-social-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:secure_url" content="https://www.example.com/images/article-social-1200x630.jpg">
<meta property="og:image:alt" content="An illustrated diagram showing the article's main idea">
<meta property="og:description" content="A concise description of the page.">

The protocol specification is documented at ogp.me. LinkedIn’s sharing guidance lists the Open Graph title, image, description, and URL tags and specifies its 1200 × 627 minimum and 5 MB maximum.

Choosing the image format

  • JPEG: A practical default for photographic or gradient-heavy artwork.
  • PNG: Useful when you need crisp flat graphics or transparency, if the destination accepts it within its size limit.
  • WebP: Can reduce bytes, but verify that every destination you care about fetches and displays it correctly.

Use an absolute, publicly reachable HTTPS URL. Keep the file below the strictest platform limit you must meet; LinkedIn documents 5 MB. Add the correct MIME type and make sure your server returns the image rather than an HTML error page.

Designing a preview that survives cropping

  1. Start at 1200 × 630. Export at the intended final dimensions instead of enlarging a small source.
  2. Keep essential content inside a central safe area. Leave breathing room around logos, faces, and text because a platform may crop the edges.
  3. Use readable contrast. Preview cards are often shown much smaller than the source image.
  4. Keep text short. A social card is a visual summary, not the full page title.
  5. Export a channel-specific version when needed. A portrait-first placement may need a different composition and focal point.

The cited guidance supports planning for crop variability but does not define one universal safe-area measurement. Check the actual card rendered by each service.

Validate the implementation

1. Inspect the source

View the raw HTML and confirm that the tags are in the document head, the URL is absolute, and the dimensions match the actual file. If your framework renders metadata server-side, fetch the page without JavaScript and check the returned source.

2. Check the image directly

Open the og:image URL in a private browser window. Confirm it loads without authentication, redirects, hotlink protection, or an HTML error response. Check the pixel dimensions and compressed file size.

3. Inspect a platform preview

Use the destination platform’s own URL inspection or preview-debugging facility where available. After changing the image, inspect the URL again; cached preview data can make an old image appear for a while. Do not assume one platform’s refresh timing applies to another.

Common problems and fixes

Symptom Likely cause Fix
No image appears Missing or malformed og:image, private URL, or blocked crawler Use an absolute HTTPS URL, return the image publicly, and inspect the raw head tags.
The old image still appears Preview cache Use the platform’s inspector or debugger to request a fresh fetch, then recheck the URL.
Image is cropped badly Important content is near an edge or the service uses a different card ratio Move key content inward and export a platform-specific composition.
LinkedIn rejects or omits the image Below 1200 × 627, over 5 MB, or another fetch problem Meet LinkedIn’s documented minimum and file limit, then inspect the page again.
Wrong image is selected Multiple image tags, template metadata, or a stale cache Declare one intentional og:image, remove conflicting tags, and refresh the preview.
Image loads in a browser but not for crawlers Requires cookies, JavaScript, authentication, or blocks automated requests Host a directly fetchable asset and verify response headers and redirects.

Performance, reliability, and cost considerations

  • Keep the asset small enough to fetch quickly. Compression reduces delay, but preserve legibility at card size.
  • Use stable URLs. Changing filenames or query strings can make cache behavior harder to reason about; when you intentionally replace an image, inspect the updated page with the platform tool.
  • Serve over HTTPS with a successful image response. Avoid access controls that a crawler cannot satisfy.
  • Generate variants during your build. A 1200 × 630 default plus a channel-specific portrait asset is easier to maintain than editing images manually after publication.
  • Budget for platform-specific verification. The Open Graph protocol does not define one size or one cache duration for every service.

Or skip the browser setup

If you need to visually check how a page renders at a controlled viewport, ScreenshotNeo can capture the URL with one request. Its API supports any viewport, full-page capture, image resizing, custom CSS and JavaScript, and other capture controls. The response is a PNG, JPEG, WebP, or PDF.

See the ScreenshotNeo API documentation for request details.

cURL

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

Python

import requests

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

Node.js

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

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and each response identifies the page verdict and billing status in 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 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

Is 1200 × 630 an official requirement?

No. It is a practical general-purpose recommendation. The Open Graph protocol defines metadata, not one universal image dimension.

Can I use 1200 × 627 instead?

Yes. It meets LinkedIn’s documented minimum and remains close to the 1.91:1 landscape ratio.

Do I need og:image:width and og:image:height?

They are optional structured Open Graph properties, but declaring accurate values helps describe the asset. Always include the required og:image URL.

Why does a changed image not appear immediately?

Preview data may be cached. Inspect the URL with the platform’s own debugging or inspection tool and verify the fetched source.

Should every platform use the same image?

Use 1200 × 630 as a shared starting point, then create separate assets when a platform’s crop or placement favors another composition.

Source references

Keep reading

7 min read

LinkedIn Open to Work Image

Learn what LinkedIn’s Open to Work photo frame means, who can see it, how to add or remove it, and how to choose the right privacy setting.