Use a 1200 × 630 pixel raster image as your practical starting point. Publish it at an absolute HTTPS URL, add width, height, and a descriptive og:image:alt, keep important content in the center, and test the resulting card on each service you care about. That size is widely usable, but it is not a universal guarantee: card ratios, file limits, cropping, and cache behavior vary by platform.
The short answer: prepare 1200 × 630 pixels
A 1200 × 630 canvas (about a 1.91:1 ratio) is the most useful cross-platform default identified by the July 2026 OG Image Design guide. It is listed for Facebook, iMessage, Slack, Discord, WhatsApp, and Telegram. LinkedIn lists 1200 × 627, although 1200 × 630 generally works similarly. X uses 1200 × 630 for a large card but may crop it toward a 2:1 presentation.
Treat 1200 × 630 as a production baseline, not as a promise that every surface will display the entire image. Use a raster file, an absolute HTTPS URL, and a real preview test before publishing an important campaign or release.
What og:image does
Open Graph lets a page be represented as a rich object when it is shared. The protocol defines four basic properties: og:title, og:type, og:url, and og:image. The image value is the URL of the visual representation that a crawler should associate with the page.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
Basic and structured image properties
og:imageis the required root image property.og:image:urlis defined as identical toog:image.og:image:secure_urlcan identify an HTTPS version.og:image:typedeclares the image MIME type, such asimage/jpegorimage/png. If you provide it, make sure it matches the actual response.og:image:widthandog:image:heightdescribe the pixel dimensions. They are optional in the protocol but useful to crawlers and debugging tools.og:image:altis a description of the meaningful content in the image. The protocol treats it as alternative text, not as a visible caption.
When a page has more than one image
Multiple og:image elements form an array. The first image is preferred when a consumer has to choose between conflicting values. Put that image’s width, height, type, and alt properties immediately after its root tag. When you start a new og:image tag, the properties that follow belong to the new image.
Platform dimensions and limits
The following figures combine the July 2026 practical guide with a community-maintained comparison. They are useful planning values, not permanent contracts. Card types and platform specifications change, so confirm a critical launch against the destination’s current documentation and preview tool.
| Destination | Practical image size or ratio | Published limits or notes |
|---|---|---|
| 1200 × 630; the guide lists 1.91:1 | Images under 600 pixels wide may appear as a small square thumbnail; 200 × 200 is listed as a minimum and 8 MB as a maximum file size. | |
| 1200 × 627; 1200 × 630 generally works similarly | The comparison lists up to 1200 × 627 and a 5 MB limit. | |
| X/Twitter | 1200 × 630 for a large card, with possible cropping toward 2:1 | The guide lists a 300 × 157 minimum, 4096 × 4096 maximum, and 5 MB limit. A community table records different ratio guidance, illustrating why the current card specification matters. |
| 1200 × 630 is listed as a practical size | The guide recommends keeping the file under 600 KB for this destination. | |
| iMessage, Slack, Discord, Telegram | 1200 × 630 | The guide lists this canvas for each; individual clients can still crop or resize the preview. |
The community table differs on several details, including an X 1:1 requirement in its interpreted summary and a Facebook recommendation of at least 600 × 314. Those discrepancies are a reason to treat secondary tables as comparison aids and verify strict limits with the platform owner.
Design the image for cropping and readability
Keep the important area central
Preview cards do not all use the same crop. Keep logos, headlines, faces, and other essential text inside a central safe area. Let background color or decorative shapes extend to the edges, where a crop is less damaging. The safe-area advice is design guidance, not an Open Graph protocol requirement.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose a broadly readable file format
- JPEG: a practical choice for photographs and other continuous-tone images.
- PNG: preferable for flat artwork, text-heavy graphics, and screenshots.
- WebP: broadly supported, but an obscure crawler can still have trouble with it; use PNG or JPEG when maximum compatibility matters.
- SVG: not suitable for the crawlers discussed by the practical guide.
- Animated GIF: commonly represented by its first frame, so do not put the only important information in later frames.
Serve the file with the correct MIME type, keep the byte size reasonable, and make sure the URL can be fetched without a login, cookie, or browser-only interaction.
Implement the metadata in your page
Place the tags in the document’s <head>. Replace the example values with the canonical URL and the image that you actually serve:
<meta property="og:title" content="Example article title">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/social-preview.png">
<meta property="og:image:url" content="https://example.com/social-preview.png">
<meta property="og:image:secure_url" content="https://example.com/social-preview.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A laptop displaying the example article beside a colorful chart">Rules that prevent common parser failures
- Use the complete
https://image URL. Relative paths can fail on some platforms. - Make the image publicly fetchable and return the intended raster file rather than an HTML error page.
- Keep dimensions next to the matching root
og:imagetag, especially when declaring multiple images. - Ensure the declared MIME type and the server’s actual
Content-Typeagree. - Write alt text that describes what matters in the visual; do not use it as a duplicate headline or a caption.
- Inspect the rendered HTML, not only a template file. Server-side rendering, plugins, or a theme can add a second image tag ahead of yours.
A practical publish-and-validate workflow
- Create the canvas. Start at 1200 × 630 pixels, then check the destination-specific ratio if a channel has a strict card type.
- Export a compatible raster. Use JPEG for photos or PNG for text and screenshots. Check the resulting dimensions and file size.
- Upload it to a stable HTTPS URL. Do not require authentication, a session cookie, or JavaScript to obtain the image.
- Add the tags. Include the root image, dimensions, and alt text in the page head. Put the preferred image first if you publish an array.
- Inspect the live response. Confirm that the URL in rendered HTML is the intended absolute URL, that the image responds successfully, and that its MIME type and dimensions are correct.
- Run the destination preview. Test the actual services where the link will be shared. The Open Graph project identifies Facebook Object Debugger as Facebook’s parser and debugger.
- Adjust for the observed crop. Move essential content inward or create a destination-specific image when a platform consistently trims the edges.
Why an image is missing, wrong, or stale
No image appears
Check for a typo in the exact og:image URL, an HTTP rather than HTTPS address, a redirect to a login page, a blocked crawler, or a response that is actually HTML. Fetch the URL directly and inspect its status, headers, and first bytes.
The wrong image is selected
Look for duplicate tags injected by a CMS, SEO extension, or theme. Because the first root image is preferred, put the intended image first and keep each image’s structured properties immediately below it.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesThe preview is cropped badly
Confirm the destination’s card type, then compare the crop with your original. Keep text and logos in the center and treat edge decoration as expendable. A 1200 × 630 source can still be cropped by a 2:1 or square presentation.
The image looks blurry or has the wrong colors
Verify that the source is large enough for the card, that the server is not returning a smaller derivative, and that the declared format matches the actual file. Re-export text-heavy artwork as PNG when JPEG compression makes lettering unreadable.
An old image remains after an update
Recheck the URL and the live HTML first. Then use the destination’s current debugger or scrape-refresh control. There is no universal cache lifetime or single cache-clearing procedure for every platform.
Performance, reliability, and accessibility considerations
- Use one stable, cacheable URL for a given version. If you need a new image, changing the filename or version path is often clearer than relying on an unknown crawler cache.
- Compress without making small type illegible. WhatsApp’s guide recommendation is under 600 KB; Facebook and LinkedIn limits in the comparison are much larger, but a smaller file still fetches faster.
- Do not depend on CSS backgrounds, client-side rendering, or a private asset host. Crawlers need the image URL from metadata and must be able to retrieve it directly.
- Keep
og:image:altmeaningful for systems and users that expose alternative text. It does not replace visible text in the image or the page’s accessible content. - For localized pages, ensure each page’s image and title describe that page’s language and content; do not let a shared template silently point every locale at an unrelated visual.
Or skip the browser setup
If you need to inspect the rendered page and produce a clean screenshot for a preview workflow, ScreenshotNeo is a 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 disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and every response reports the page verdict and billing status in X-Page-Verdict and X-Billed headers.
One GET request returns a PNG, JPEG, WebP, or PDF. The API supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, device presets and custom viewports, retina scale, PDF page controls, custom CSS and JavaScript, pre-capture clicks, hidden selectors, selector/delay/network-idle waits, request and resource blocking, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed image links, asynchronous webhooks, 100-URL bulk calls, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify a migration. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Best Value
See the ScreenshotNeo API documentation for authentication and options. The basic call is:
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}`);The Free plan includes 1,000 shots per month with no card. Paid plans are Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to start without a card.
Frequently Asked Questions
Is there a universal cache lifetime for Open Graph images?
No. Cache duration and refresh controls differ by destination, and the available material does not establish one platform-independent lifetime. Use the destination’s current debugger or scrape-refresh workflow when a corrected image is not appearing.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Should I trust a third-party platform-size table as a permanent specification?
No. Community tables and practical guides are useful for planning, but card types and limits can change. Verify a critical campaign against the destination platform’s current documentation and an actual preview.
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.
