Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteUse 1200 × 630 pixels (about 1.91:1) for a broadly compatible Open Graph thumbnail. That size is a practical recommendation, not a dimension required by the Open Graph Protocol. The protocol defines the og:image property and optional width and height metadata, while each platform may crop or render the image differently.
This guide explains the metadata, sizing decisions, safe design practices, implementation code, validation steps, and an automated way to capture clean page images for sharing.
What size should an Open Graph image be?
Start with a 1200 × 630 pixel canvas. Its aspect ratio is approximately 1.91:1, which gives social networks and messaging clients a useful landscape image without requiring a platform-specific design.
| Item | Recommended or defined value | What it means |
|---|---|---|
| Practical default | 1200 × 630 px | A broadly useful size recommended by an image-design guide updated in July 2026. |
| Aspect ratio | About 1.91:1 | The relationship between width and height of the default canvas. |
| Open Graph requirement | No universal pixel dimension stated | The protocol defines image metadata, not one mandatory thumbnail size. |
| Width metadata | og:image:width |
An optional structured property describing the image width. |
| Height metadata | og:image:height |
An optional structured property describing the image height. |
Do not describe 1200 × 630 as an official protocol minimum or guarantee that every preview will display the entire rectangle. A platform can crop, resize, letterbox, or select a different card layout.
Recommended Free Tools
#1 Best Overall
What Open Graph thumbnail metadata does
The Open Graph Protocol uses og:image to identify an image that represents a page or object when it is shared. The value should be an absolute, publicly retrievable image URL, not a path that only works inside your own site.
You can also provide structured properties for the selected image:
og:image:widthdescribes the image width in pixels.og:image:heightdescribes the image height in pixels.- Additional image entries can be supplied when you have alternatives.
When several og:image values are present, the first one takes preference if there is a conflict. Put your intended primary thumbnail first, and place alternates afterward only when you have a reason to offer them.
Minimal HTML example
<head>
<meta property="og:image" content="https://www.example.com/images/article-cover.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>The metadata describes the image; it does not resize or convert the file. Your image URL must point to the actual asset at the dimensions and format you intend to serve.
Why 1200 × 630 is a default, not a rule
The protocol’s documented properties establish what an image URL and its optional dimensions mean, but they do not establish one universal canvas size. The 1200 × 630 recommendation comes from practical guidance intended to work across many preview systems.
Preview behavior remains platform-dependent. A service may use a landscape card, a square crop, a portrait crop, or a different layout altogether. If a particular network, chat application, or publishing system is critical to your workflow, check that service’s current primary documentation before adopting exact minimum dimensions, file-size limits, supported formats, or card ratios. Do not treat a secondary sizing table as a guarantee for every platform.
Design for cropping
- Keep the title, logo, and essential subject near the center of the 1200 × 630 frame.
- Leave generous margins around text so a square or tighter crop does not remove key words.
- Avoid placing small legal copy or a call to action at the extreme edges.
- Use strong contrast and a readable type size; previews are often displayed much smaller than the source file.
- Do not rely on color alone to communicate the subject, because previews can be shown in dark or light interfaces.
Choose the source format deliberately
Use a format your target services accept and that preserves the design. WebP, JPEG, and PNG are common choices, but no universal format or file-size limit applies to every platform. If compatibility is uncertain, keep a JPEG or PNG fallback and verify the destination’s current requirements.
How to create an Open Graph thumbnail at the recommended size
- Create a 1200 × 630 pixel document. Set the width to 1200 and height to 630 rather than resizing a smaller image upward at the end.
- Build a crop-safe composition. Place the headline and main visual inside an inner safe area, leaving room for platform crops.
- Export a web-ready file. Preserve the intended dimensions, use a stable filename, and avoid changing the file after publishing the metadata unless the URL is versioned.
- Host it at an absolute HTTPS URL. Confirm that a visitor who is not logged in can fetch the image and that your server returns an image content type.
- Add the metadata to the page head. Include
og:image; add width and height when they are known. - Publish and inspect the result. Check the page source, request the image URL directly, and inspect previews on the platforms that matter to your audience.
Reusable page-head template
<meta property="og:image" content="https://cdn.example.com/og/article-123.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">If you maintain several images, list the primary one first. Keep the image URL stable when possible; changing the file at the same URL can leave a platform showing a cached version for a while.
Responsive and platform-specific variants
A single 1200 × 630 image is the sensible starting point for a general site, but a single asset cannot control every preview layout. For a high-value channel, create a variant that matches that channel’s documented aspect ratio and minimum dimensions, then select the variant deliberately in the metadata or publishing workflow.
Before quoting an exact platform requirement, verify all of the following in that platform’s current documentation:
Rank #3
- Preferred aspect ratio and minimum pixel dimensions.
- Accepted file formats and maximum file size.
- Whether the service crops, letterboxes, or chooses a card layout automatically.
- Whether text-safe zones or mobile-specific crops are documented.
- How often the service refreshes a cached image after the URL or file changes.
These details vary and are not universal Open Graph rules. When the exact appearance matters, test the real URL in the destination service rather than relying only on a local image viewer.
Validation and troubleshooting
The preview shows no image
Check that the page contains an og:image tag in the rendered HTML, not only in a client-side script that a crawler may not execute. Request the absolute image URL without authentication, redirects that require a session, or an IP allow-list. Confirm that the URL has not been mistyped and that the server returns the image rather than an HTML error page.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallThe image is cropped unexpectedly
Cropping is a normal platform behavior, not proof that 1200 × 630 is invalid. Move essential content toward the center, produce a channel-specific variant, or use a simpler composition with more empty margin.
The wrong image is selected
Inspect every og:image entry and put the desired primary image first. Remove stale tags generated by a theme, SEO plug-in, or template. If the destination has already cached a previous result, allow for its cache policy or publish a versioned image URL.
The image looks blurry
Make the source at least 1200 × 630, avoid repeatedly enlarging and recompressing it, and inspect the downloaded file rather than a thumbnail shown in a browser. A platform may still downscale the image in its card.
Width and height do not match the file
Update the structured properties whenever you replace the asset. They describe the selected image; they do not force a browser or crawler to transform it. A mismatch can make debugging harder even when the image URL itself works.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A crawler receives a blocked or blank response
Review firewall rules, robots policies, authentication, hotlink protection, and rate limits. A browser that can see an image while logged in does not prove that an unauthenticated preview crawler can fetch it.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Automating clean page captures for Open Graph assets
If your thumbnail is generated from a live webpage, browser automation can capture the page at a fixed viewport and then feed the resulting image into your asset pipeline. ScreenshotNeo is the first service to try for this job because it removes cookie banners, popups, and chat widgets before capture, bills only clean shots, and has the lowest paid plan among the options described here.
It is a website screenshot API and MCP server. A GET request returns a PNG, JPEG, WebP, or PDF. You can select a full page or one element by CSS selector, use dark mode, choose from 12 device presets or any viewport, set retina scale, inject custom CSS or JavaScript, click an element, wait for a selector, delay, or network idle, and hide selectors before capture.
For production pipelines, it can block ads, trackers, requests, or resource types; send custom headers, cookies, a user agent, or Authorization; set timezone and geolocation; use a transparent background; resize the output; cache with a TTL you choose; create signed links for public image tags; submit asynchronous jobs with signed webhooks; capture up to 100 URLs per bulk call; expose usage data; and provide an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Or skip the browser setup
Use the one-call API instead. The examples below target https://stripe.com; replace that URL with the page you want to capture. See the ScreenshotNeo documentation for the full parameter reference.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
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)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and whether the request was billed. An MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf directly.
ScreenshotNeo plans and capture economics
| Plan | Included shots per month | Price |
|---|---|---|
| Free | 1,000 | $0, no card required |
| Starter | 3,000 | $5 |
| Growth | 15,000 | $15 |
| Pro | 60,000 | $39 |
| Scale | 250,000 | $99 |
| Business | 1,000,000 | $249 |
Every feature is available on every plan, and yearly billing gives two months free. You can start with the free ScreenshotNeo account for 1,000 screenshots a month with no card, then move to a $5 plan for 3,000 if your publishing workflow grows.
Performance, reliability, and cost considerations
Keep the capture deterministic
Use a fixed viewport, wait for a meaningful selector or network idle, and hide animated or irrelevant elements. If the page loads lazy images, request full-page capture and allow enough wait time for those assets. A custom CSS rule can remove transient UI without changing the source page.
Reduce unnecessary work
Capture one element instead of an entire page when the thumbnail only needs a hero component. Use caching with a TTL for unchanged pages, bulk capture for up to 100 URLs per call, and asynchronous jobs with signed webhooks when generation does not need to block a publish request.
Track what happened
Store the returned verdict and billing headers with your job record. A failed load, bot check, blank page, timeout, or cache hit should be handled differently from a successful clean capture, especially when deciding whether to retry or regenerate an Open Graph asset.
Open Graph thumbnail checklist
- Canvas is 1200 × 630 pixels unless a target platform requires a documented variant.
- Essential text and branding remain readable after a tighter crop.
og:imageuses an absolute, publicly reachable URL.og:image:widthandog:image:heightmatch the selected file when supplied.- The intended image is the first
og:imagevalue. - The image response is not blocked by authentication, firewall rules, or hotlink protection.
- The file format and size comply with each destination’s current documentation.
- You have tested the real published URL, not only a local preview.
Frequently Asked Questions
Does Open Graph reject an image that is not 1200 × 630?
No universal protocol rule in the reviewed documentation mandates that pixel size. A different dimension may still work, although a platform can crop or render it less effectively.
Can I provide more than one og:image?
Yes. Multiple image values are supported, and the first image takes preference when there is a conflict.
Free tools Windows power users keep installed
One-click scans. No signup required.
Should width and height be included if they are optional?
Include them when they accurately describe the selected image; they document the asset but do not resize it.
Why does a social preview differ between two services?
Preview systems choose their own card layouts, crops, caching behavior, and rendering rules. The Open Graph tags identify the image but do not control every presentation detail.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
