Open Graph Image Safe Zone: Sizes, Margins, and Crop-Safe Design

Short answer: The Open Graph Protocol does not define a safe-zone measurement. For a general-purpose share image, start with a 1200×630-pixel canvas and keep essential text, logos, and faces inside a centered inset. A conservative working area is 1000×500 pixels, leaving 100 pixels on the left and right and 65 pixels above and below. Another current design guide recommends roughly 60 pixels on every edge. Treat both as practical design heuristics, not official platform rules.

Different services and placements crop, scale, mask, or nearly preserve the image. Mobile cards can show less content than desktop cards, so inspect the actual preview wherever the image matters.

What the Open Graph specification actually requires

The Open Graph Protocol defines metadata that describes a page. Its four basic properties are og:title, og:type, og:image, and og:url. It does not say where content must sit inside the image.

og:image is the URL of an image representing the page. Optional structured properties include its MIME type, width, height, secure URL, and alternative text. If you provide an image, the specification recommends providing og:image:alt; that value should describe the image rather than act as a caption.

Recommended dimensions and safe-zone margins

Item	Practical starting point	What it means
Canvas	1200 × 630 px	A widely used general-purpose share-image size, not an OGP requirement.
Conservative inner area	1000 × 500 px	Leaves 100 px horizontally and 65 px vertically on a 1200 × 630 canvas.
Alternative inset	About 60 px on every edge	A less conservative guide recommendation that creates a larger central area.
Bleed area	The outer margins	Use for gradients, textures, and decoration that can tolerate cropping.

These recommendations differ because there is no universal rendering frame. A platform may crop the top and bottom, trim the sides on a narrow screen, apply rounded corners, or display the image almost as supplied. Keep anything that must be read or recognized inside the stricter inset.

What belongs inside the safe area

• Article or product title text
• Brand mark or logo
• People, product faces, or other subjects that must remain visible
• Numbers, dates, labels, and calls to action
• High-contrast details that explain the image

What can extend to the edges

• Solid color, gradients, and abstract texture
• Decorative shapes that remain understandable when cropped
• Background photography with no essential subject near an edge

Design an OG image step by step

1. Create a 1200 × 630 document. Use the dimensions as a cross-platform starting point.
2. Mark an inner guide. For a conservative layout, draw a rectangle from (100, 65) to (1100, 565). Keep essential elements inside it.
3. Place the title and logo. Leave additional breathing room around letterforms; anti-aliasing and scaling can make edge-aligned text harder to read.
4. Let the background bleed. Extend colors and nonessential artwork to all four edges so a crop does not reveal an unintended border.
5. Check small-screen readability. View the image at card width, not only at 1200 pixels. Remove words that become too small rather than moving them closer to an edge.
6. Export a web-friendly image. PNG works well for sharp graphics; JPEG can reduce photographic file size. Keep the file at the dimensions your target surfaces accept.
7. Publish direct metadata. Put the tags in the HTML response that a crawler receives.

Open Graph metadata example

Place the following in the document head. Replace the image URL and description with values for the page being shared.

<meta property="og:title" content="Designing an Open Graph image">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/articles/og-image">
<meta property="og:image" content="https://example.com/images/og-image.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 for an article about Open Graph image design">

The image URL should be directly fetchable by the relevant crawler. Apple’s Messages technical note says that link previews do not follow meta redirects or run JavaScript, and advises: “Avoid text in preview images.” If Messages is an important destination, keep the artwork understandable without relying on a large block of embedded text and make the metadata available in the initial HTML.

Validate the safe zone on real previews

1. Open the page source or server response and confirm the OG tags are present without client-side JavaScript.
2. Fetch the image URL directly and confirm it returns the intended file, dimensions, and content type.
3. Preview the page in each destination where it will be shared.
4. Check both a wide card and a narrow/mobile context.
5. Look for top/bottom cropping, side cropping, rounded-corner masking, and unreadable text.
6. Move only essential elements inward when a crop fails; keep the background extended to the bleed.

Common problems and fixes

Symptom	Likely cause	Fix
The logo is cut off	It sits in the bleed or a platform crops the sides.	Move it into the conservative 1000 × 500 inner area and recheck the target preview.
The title disappears on mobile	The narrow card crops the top/bottom or scales the text too far down.	Shorten the title, increase its size, and keep it centered with extra vertical margin.
The preview shows an old image	A sharing service or intermediary cached an earlier response.	Confirm the current image at its URL, then use the destination’s current preview-refresh process.
No image appears	The crawler cannot fetch the URL, the response is not an image, or the tag is missing from initial HTML.	Check the HTTP response, content type, absolute URL, permissions, and server-rendered metadata.
Alt text is shown as a caption	og:image:alt was written as marketing copy.	Use a concise description of the visual; keep the page title and caption in their own fields.
Messages does not show the expected preview	The page depends on a redirect or JavaScript to expose metadata.	Serve the metadata directly in the linked page response, as described in Apple’s technical note.
Text is technically inside the inset but still hard to read	Low contrast, small type, or compression reduces legibility.	Increase contrast and type size, simplify the background, and inspect the image at the actual card size.

Or skip the browser setup

If you need to inspect the rendered page while validating social cards, ScreenshotNeo can return a screenshot from one GET request. Its capture flow accepts cookie and consent banners before the shot and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. The service also has an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

See the ScreenshotNeo API documentation for the available options. The following calls capture a page you can inspect at desktop or mobile dimensions by adding the relevant query parameters from the documentation.

cURL

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

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/articles/og-image"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/articles/og-image' }); const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo includes full-page capture, device presets, arbitrary viewports, retina scale, custom CSS and JavaScript, selector waits, network-idle waits, hidden selectors, headers, cookies, user agents, geolocation, caching, signed links, asynchronous jobs, bulk capture, and a usage API. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account to check your OG image in real browser output.

Performance, reliability, and cost notes

• Keep source images reasonably sized. Large files increase transfer and decode time before a crawler can render the preview.
• Serve stable URLs. A permanent image URL reduces broken metadata and makes cache behavior easier to reason about.
• Do not rely on one preview. Crop behavior and cache refresh timing differ by destination; validate the surfaces that matter to your audience.
• Automate regression checks. For generated social cards, compare the rendered result after template changes and alert when title or logo pixels leave the intended inset.
• Budget screenshot capture deliberately. ScreenshotNeo bills only clean shots; bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. Its selectable cache TTL can reduce repeated captures when you are checking the same page.

FAQ

Is 100 pixels the official OG safe-zone margin?

No. The protocol specifies metadata, not an inset. The 100-pixel horizontal and 65-pixel vertical margins are a conservative design heuristic for a 1200 × 630 canvas.

Can I use a different image size?

Yes. Use the dimensions required by your target surface, then create an inset based on the likely crop. The 1200 × 630 canvas is a practical general-purpose starting point.

Should the logo touch the safe-zone boundary?

Leave extra breathing room. The inset is a boundary for essential content, not a target line for placing it.

Does og:image:alt replace visible text?

No. It describes the image for metadata consumers. It does not guarantee that a platform will display the description as a caption or substitute for a readable design.

How do I know which crop a platform uses?

Inspect the actual preview in the relevant desktop and mobile contexts. General safe-zone guidance reduces risk but cannot guarantee identical rendering everywhere.