Resize a general-purpose Open Graph image to 1200 × 630 pixels (about a 1.91:1 aspect ratio). Crop or pad the source to that canvas, keep text and logos inside a generous inner margin, export a web-ready raster file, and declare the asset with accurate Open Graph metadata. The Open Graph protocol defines the metadata fields, not a mandatory pixel size, so 1200 × 630 is a practical default rather than a universal rule.
What size should an Open Graph image be?
Use a 1200 × 630 pixel canvas for a standard page preview. This proportion works as a broadly useful starting point across services that read og:image, while leaving enough resolution for large preview cards and high-density displays. It is a recommendation from current sizing guidance, not a dimension mandated by the Open Graph protocol.
Do not treat 1200 × 630 as a guarantee that every network will display the complete image. Services can impose different aspect-ratio, resolution, and file-size limits, and some crop the same source differently on mobile and desktop. If one destination is critical, check that service’s current specifications and test an actual shared URL.
Resize an image step by step
1. Start with the largest clean source
Use the highest-resolution original available. Enlarging a small thumbnail to 1200 × 630 can create softness and ringing around text. If the source is already smaller, upscaling may be unavoidable, but avoid repeated save-and-resize cycles and begin from the uncompressed original whenever possible.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
2. Create a 1200 × 630 canvas
In your image editor, choose a custom canvas or crop preset of exactly 1200 pixels wide by 630 pixels high. Lock the aspect ratio at approximately 1.91:1 so later adjustments do not distort the artwork. A resize that changes width and height independently will stretch faces, logos, and interface screenshots; use a crop, pad, or proportional scale instead.
3. Choose crop or padding
- Crop: Fill the entire 1200 × 630 frame by trimming the sides or top and bottom. Reposition the crop around the subject before exporting.
- Pad or extend: Keep the complete source and add a background, blurred extension, or solid bands to reach the wide canvas. This avoids cutting off a product, person, or diagram but may leave less visual impact.
- Recompose: Move text, logos, and the focal subject into the wide frame rather than allowing an automatic center crop to decide what disappears.
Preview the result at the size people will actually see. A headline that is readable at 100% in an editor may be too small in a link card, especially when the service displays a reduced thumbnail.
4. Keep important content inside a safe area
Keep essential text, logos, faces, and callouts away from every edge. One specialist sizing guide uses the central 87% of the image as a visual safety zone—roughly a 60-pixel margin on each side of a 1200 × 630 canvas. That margin is a heuristic, not a platform rule, but it protects against interface-specific cropping and rounded corners.
- Leave extra room at the top and bottom when a platform may use a shorter card.
- Do not place a logo flush against a corner; give it breathing room and sufficient contrast.
- Keep text to a few words at a large size. Open Graph previews are not a substitute for the page’s accessible title and description.
5. Export a web-ready raster file
Export the final canvas as JPEG, PNG, or WebP according to the destination’s support. JPEG is usually efficient for photographic backgrounds; PNG preserves sharp type and transparency; WebP can reduce bytes when the consuming service accepts it. Keep the exported dimensions at 1200 × 630 and inspect the saved file rather than assuming the editor preserved the canvas.
Recommended Free Tools
File-size ceilings differ among platforms and can change. There is no single universal limit you can safely apply to every service. Check the destination’s current documentation, then compress until the file is comfortably below that limit without making small text visibly blurry. Strip unnecessary editing metadata if your workflow adds it, but retain the pixels and color profile needed for a predictable result.
6. Publish the file at a stable absolute URL
Host the image on an HTTPS URL that is reachable without a login, expiring token, or client-side JavaScript. Use the same canonical URL in your page metadata and verify that a direct request returns the image rather than an HTML error page. If you replace the file at the same URL, caches may continue serving the previous bytes; changing the filename or cache-busting path is often the clearest way to signal a new asset.
Add the Open Graph metadata
Place these tags in the document’s <head>. The image URL must be absolute, and the declared dimensions must match the exported asset. The Open Graph protocol documents og:image, og:image:width, and og:image:height; it also documents optional secure URL, MIME type, and alternative text properties. When a page specifies og:image, the protocol source recommends specifying og:image:alt as well.
<meta property="og:image" content="https://example.com/images/share-card.jpg">
<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">
<meta property="og:image:secure_url" content="https://example.com/images/share-card.jpg">
<meta property="og:image:type" content="image/jpeg">Use og:image:secure_url when the asset is served over HTTPS, and set og:image:type to the actual MIME type. The alt value should describe the meaningful content, not repeat a keyword list. If the image is decorative, say so briefly; the page’s surrounding text still carries the primary explanation.
One image or separate platform assets?
A single 1200 × 630 file simplifies maintenance and is a sensible default for a general site. Separate assets are worthwhile when a particular service uses a markedly different card shape or when a campaign’s text must remain readable after a known crop.
| Decision factor | Single general asset | Platform-specific assets |
|---|---|---|
| Aspect-ratio fit | Accepts some cropping risk on services with different cards | Can match each service’s preferred shape |
| Resolution | One 1200 × 630 master is easy to maintain | Allows a larger or denser export where required |
| File-size limits | One file to compress and monitor | Each destination can receive a file below its own ceiling |
| Metadata | Use the page’s og:image tags |
May require destination-specific metadata in addition to Open Graph |
| Operational cost | Less design and publishing overhead | More files, tests, and update paths to keep synchronized |
When you do create variants, keep a single high-resolution master and derive each crop from it. Record which URL is associated with each page so an old campaign image is not accidentally reused.
Check the preview after publishing
- Open the published page source and confirm that the intended
og:imageURL appears once in the relevant metadata. - Paste the page URL into the target service’s link-preview or debugger tool. Wix’s support guidance specifically recommends Facebook’s debugger after updating
og:imageso Facebook can refresh information it previously read. - Inspect the preview on a phone-sized viewport and a desktop-sized viewport. Look for clipped text, an unexpected fallback image, or a stale version.
- If the image changed at the same URL, purge the applicable CDN or page cache, then request a fresh scrape. Renaming the file is a reliable alternative when you control the page template.
A debugger for one network cannot prove how every other network or messaging app will render the card. Validate the service that matters to your audience, especially after changing dimensions, file format, or the focal crop.
Troubleshooting common Open Graph image problems
The preview is blurry
- Confirm the delivered file is actually 1200 × 630 rather than a smaller thumbnail generated by your CMS.
- Return to the highest-resolution source and export once at the target size.
- Use a less aggressive compression setting, particularly for small type and high-contrast edges.
- Check whether the destination creates a reduced thumbnail; a sharp source can still look soft in a low-resolution preview.
Important text or a logo is cut off
Reopen the 1200 × 630 composition and move critical elements inward. The roughly 60-pixel margin guideline is a useful starting point, but a shorter platform card may require more space. Avoid putting essential information in a decorative border or corner.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows 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 reinstallBest Value
The old image keeps appearing
Social crawlers and CDNs can cache both the page HTML and the image. Confirm the page now emits the new absolute URL, purge caches where available, and use the destination’s refresh/debugger flow. If the URL itself has not changed, publish a versioned filename and update og:image to that path.
No image appears at all
- Request the image URL directly without authentication and verify an image content type, not an HTML login page.
- Check that robots, firewall rules, hotlink protection, or a geographic restriction are not blocking the crawler.
- Ensure the metadata is in the initial HTML response and not injected only after client-side JavaScript runs.
- Make sure the width and height values are numeric and match the file’s real dimensions.
The file is rejected or ignored
Recheck the destination’s current format and byte limits; the reviewed guidance shows that limits differ by platform. If in doubt, try a compressed JPEG for a photographic card or a PNG for crisp graphic text, then test the exact published URL again.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance and maintenance checklist
- Keep one 1200 × 630 master and derive variants from it.
- Use descriptive, stable filenames and HTTPS hosting.
- Compress the exported raster without destroying small text.
- Set accurate
og:image:width,og:image:height, type, and alt metadata. - Test after every template or CDN change, not only after redesigns.
- Keep the visual message understandable without relying on tiny text; the page title and description remain important when an image is cropped or unavailable.
Or skip the browser setup
If you need to inspect how the finished page looks at a real viewport, ScreenshotNeo can capture the published URL through one request. It is a website screenshot API and MCP server for developers; it does not replace creating the 1200 × 630 asset, but it can automate visual checks after you publish. Cookie and consent banners are accepted and removed before the capture, along with more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and each response reports the page verdict and billing status.
See the ScreenshotNeo documentation for all parameters. A basic capture looks like this:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);You can select a viewport or device, capture a full page, wait for a selector or network idle, hide selectors, block requests, set cookies and headers, and choose PNG, JPEG, or WebP. The service also supports element captures, dark mode, retina scale, custom CSS and JavaScript, timezone and geolocation, transparent backgrounds, resizing, TTL-based caching, signed links, asynchronous jobs with signed webhooks, PDF output, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
| Plan | Included shots per month | Price |
|---|---|---|
| Free | 1,000 | $0; no card |
| 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 provides two months free. Start with 1,000 free screenshots a month with no card; paid plans start at $5 for 3,000 shots.
The Bottom Line
Build the image at 1200 × 630, protect the central content from cropping, export a sharp web-ready file, and publish matching Open Graph metadata. Treat that size as a practical default, then verify the actual preview on each service your audience uses.
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.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors
