Use a 1200×630-pixel canvas and keep every essential title, logo and face inside a centered safe area. A conservative working inset is 100 pixels from the left and right edges and 65 pixels from the top and bottom, leaving a 1000×500-pixel inner rectangle. Some current design guidance instead uses roughly 60 pixels on every edge. Neither measurement is defined by the Open Graph Protocol, so treat it as a crop-resistant design heuristic and verify the real preview on each service you target.
What the Open Graph Protocol actually requires
The Open Graph Protocol (OGP) defines metadata that describes a page to social and messaging crawlers. It does not define a safe-zone measurement, text margin, logo position or universal crop. Its four basic properties are og:title, og:type, og:image and og:url. The og:image value is the URL of the image representing the page.
OGP also defines optional structured image properties: og:image:secure_url, og:image:type, og:image:width, og:image:height and og:image:alt. If you provide an image, the protocol recommends providing alt text as well. Write that alt value as a description of the image, not as a caption or a second headline.
Because no official safe-zone number exists, statements such as “the official OG safe area is 60 pixels” are inaccurate. Margin advice is a practical response to unknown card sizes, responsive layouts and platform-specific cropping.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Recommended canvas and safe-zone measurements
Start with 1200×630 pixels
Current design guides reviewed for this topic use 1200×630 pixels as a general-purpose starting canvas. It is a recommendation for broad sharing compatibility, not a dimension mandated by OGP. Build the background to the full 1200×630 bleed so that modest crops do not expose empty edges.
Use a conservative 1000×500 inner area
One 2026 guide recommends a 1000×500 safe area centered inside the 1200×630 canvas. The arithmetic is straightforward:
- Horizontal inset:
(1200 − 1000) ÷ 2 = 100pxon each side. - Vertical inset:
(630 − 500) ÷ 2 = 65pxon the top and bottom.
Place text, logos, product marks, faces and other information that must survive every preview inside those boundaries. Let decorative gradients, photographs and texture run to the edge.
Why you may see a 60-pixel rule
Another 2026 guide advises keeping important content in the central approximately 87 percent, described in practice as about 60 pixels from every edge. This creates a larger usable area than the 1000×500 rectangle. The two recommendations are not identical standards; the more generous 1000×500 inset is the safer choice when you do not control the destination or when the title is difficult to reflow.
| Approach | Canvas | Suggested inset | When it helps |
|---|---|---|---|
| Conservative inner rectangle | 1200×630 | 100px horizontal, 65px vertical (1000×500 content area) | Important text, logos and faces must remain visible across uncertain crops. |
| Central-area heuristic | 1200×630 | About 60px on every edge; approximately central 87% | You need more design room and will validate the actual destination previews. |
These are design-guide recommendations published in 2026, not protocol requirements or statistical guarantees. A safe zone reduces risk; it cannot force every service to render the same rectangle.
Design for the crop you cannot see
Different placements show different portions
A full-width desktop card may display nearly the entire image, while a narrow mobile card can crop more aggressively. Cropping can remove the top and bottom, trim the sides, apply rounded-corner masking or scale the image down until text becomes unreadable. One current guide specifically describes top-and-bottom cropping for X’s 2:1 large card and slight side crops in small-screen contexts.
Separate essential and expendable content
- Essential: article title, brand name, logo, person’s face, price, date or legal notice. Keep these inside the conservative inset.
- Supportive: subtitle, illustration details and secondary labels. Keep them inside the inset when possible; otherwise test their loss gracefully.
- Expendable: background photography, gradients, patterns and decorative flourishes. Extend these to the bleed and allow them to crop.
Account for text length and contrast
Do not fill the safe area simply because it is available. A short, high-contrast headline usually survives scaling better than a paragraph. Keep line breaks intentional, leave breathing room around the logo and check that text remains legible when the preview is reduced to a phone-sized card. Contrast and font size are design decisions; the safe-zone measurements do not guarantee readability.
Platform-aware validation
- List the destinations. Record whether the page will be shared in a desktop feed, mobile feed, direct message, chat application or link preview.
- Identify likely crop direction. Expect top/bottom loss in some wide cards and side loss in narrow placements. Treat rounded corners and overlays as additional loss at the perimeter.
- Protect the center. Put must-see information inside the 1000×500 rectangle unless you have a tested reason to use the looser 60-pixel heuristic.
- Render real previews. Inspect the target page after publishing its metadata. A preview from one service is not evidence that another service will use the same crop.
- Recheck changing requirements. Platform card dimensions, file limits and rendering behavior can change. Consult the current official guidance for a platform before promising a precise result.
Keep an editable master at 1200×630 and export a platform-specific variant only when testing demonstrates that one destination needs it. Do not move critical content toward an edge merely to fill a crop that another service may not 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 errorsPublish accurate image metadata
Place the properties directly in the page’s HTML head. The illustrative markup below uses the OGP property names and describes a 1200×630 image:
<meta property="og:title" content="Designing an Open Graph safe zone">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/social-card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="A blue abstract background with the title Designing an Open Graph safe zone">Make metadata available without client-side execution
Apple’s Messages technical documentation says link previews do not follow meta redirects or run JavaScript. The crawler therefore needs the metadata in the directly fetched HTML response. Server-render the tags, avoid requiring a browser script to insert them, and make the image URL publicly retrievable by the relevant crawler.
Describe the image, do not duplicate the caption
The alt value should identify meaningful visual content—for example, “A blue abstract background with the title Designing an Open Graph safe zone.” It is not a replacement for og:title, and it should not be stuffed with keywords.
Check the live result before launch
- Fetch the published HTML and confirm that each required property appears in the head.
- Open the image URL directly from an unauthenticated session and confirm it returns the intended file.
- Verify the declared width, height, MIME type and actual file agree.
- Preview the URL in every major destination that matters to your audience, including a narrow mobile context.
- Check the smallest useful rendering: title still readable, logo intact and no critical face or badge clipped.
- After changing the image, allow for crawler caching and verify again rather than assuming the old preview has updated.
A preview inspector can reveal that a page is serving stale metadata, a redirect instead of the intended image, or a different image than the one in your design file. Treat that inspection as a validation step, not as proof of a universal crop.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Common failures and fixes
The title is clipped
Cause: The title sits outside the crop used by a narrow or 2:1 card. Fix: move it into the conservative inset, shorten the wording or create a tested destination-specific variant.
The logo disappears on one service
Cause: The mark is too close to an edge or hidden by rounded-corner masking. Fix: keep the entire mark, including its clear space, inside the inner rectangle and preview at the smallest card size.
The preview shows an old image
Cause: A crawler or messaging client cached the previous URL response. Fix: confirm the live HTML and image first; then use the destination’s documented refresh or debug mechanism. Changing a filename or URL can help distinguish a new asset, but it does not repair incorrect metadata.
The image is missing entirely
Cause: The crawler cannot access the image, the URL is malformed, or the tags are injected only after JavaScript runs. Fix: serve the tags in the initial HTML, test the image URL without authentication, use an absolute HTTPS URL and check the response content type.
The image looks soft
Cause: The source is being enlarged, recompressed or displayed at a different aspect ratio. Fix: export the 1200×630 master at the intended dimensions, keep text away from fine detail and compare the destination’s actual thumbnail rather than judging only the source file.
Messages does not show the expected text
Cause: Messages preview generation does not run JavaScript or follow meta redirects. Fix: put OGP tags directly in the fetched document and ensure the linked image is reachable without an interactive login.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need to inspect the rendered page or generate a clean reference image, ScreenshotNeo provides a website screenshot API and MCP server. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP tools—take_screenshot, get_page_info and capture_pdf—work with Claude, Cursor and other MCP clients.
One GET request can capture the published page; the complete parameter reference is in the ScreenshotNeo documentation:
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 og-preview.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("og-preview.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}`);ScreenshotNeo supports full-page capture, a CSS-selected element, device presets and custom viewports, retina scale, dark mode, custom CSS and JavaScript, clicks, waits, blocked resources, headers, cookies, user agents, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call and a usage API. These options let you reproduce the narrow or desktop context in which you are validating an OG card.
Best Value
| Plan | Included shots | Price |
|---|---|---|
| Free | 1,000 per month | $0, no card |
| Starter | 3,000 | $5 |
| Growth | 15,000 | $15 |
| Pro | 60,000 | $39 |
| Scale | 250,000 | $99 |
| Business | 1,000,000 | $249 |
Yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
FAQ
Is 1200×630 an official Open Graph requirement?
No. It is a widely used design recommendation in current guides. OGP specifies metadata properties, not an image canvas or safe-zone geometry.
Should the background stay inside the safe zone?
No. Extend backgrounds and decorative elements to the full bleed. Reserve the inset for information that must remain visible after cropping.
Can one safe zone guarantee every platform preview?
No. Rendering, crop direction and card dimensions vary by service and placement. Validate the actual destinations you care about.
What should og:image:alt contain?
A concise description of the image’s meaningful visual content, rather than a caption or keyword list.
Frequently Asked Questions
Does the Open Graph Protocol define any safe-zone pixels?
No. Safe-zone measurements are practical design guidance, not OGP fields or requirements.
What is the safest default inset for a 1200×630 card?
Use a centered 1000×500 area: 100 pixels from each side and 65 pixels from the top and bottom.
Recommended Free Tools
Why should I inspect more than one preview?
Services and placements can crop different edges or apply different masks, so one preview cannot represent all destinations.
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.
