Open Graph Image Guide: Size, Safe Area, and Compression

What an Open Graph image does

An Open Graph image is the preview image that appears when a web page is shared in apps like Facebook, LinkedIn, Slack, Discord, and messaging tools. A weak preview image makes a page feel unfinished. A clean preview image helps readers recognize the topic before they click.

Use 1200 x 630 as the default canvas

The most practical default is a 1200 x 630 pixel image. It has a 1.91:1 aspect ratio, works well for large social cards, and is widely used for article previews, product pages, and landing pages. Avoid tiny images because they can render blurry or be ignored by preview generators.

Design with a center safe area

Different apps crop and scale previews differently. Keep the headline, logo, product, and face near the center. Leave breathing room around the edges so the image still works if a platform trims the sides slightly or displays the preview in a smaller card.

• Use large text; small text is unreadable in chat previews.
• Keep one clear focal point.
• Use high contrast between foreground and background.
• Do not place important text right against the edge.
• Compress the final image so the preview loads quickly.

Add the right meta tags

Your page should include at least these tags in the head:

<meta property="og:title" content="Page title">
<meta property="og:description" content="Short page summary">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Concise image description">
<meta property="og:type" content="website">

Use a crawlable absolute image URL

The og:image value should be a complete HTTPS URL, not a relative path such as /images/share.jpg. The image must be available without a login, cookie prompt, or blocked bot request. Return the correct image content type and avoid redirect chains; preview crawlers often have shorter timeouts than a normal browser.

Give every page its own relevant preview when possible. Reusing one generic logo image across articles makes shared links difficult to distinguish and loses the chance to explain what each page contains.

Test the published URL, not only the image

1. Publish the page and open its canonical URL in a private browser window.
2. Open the absolute og:image URL directly and confirm that it returns the intended image.
3. Use the sharing debugger or preview inspector provided by the platform you care about.
4. After replacing an image, request a fresh scrape because platforms may cache the old preview.
5. Check at least one compact mobile preview; large desktop previews can hide unreadable text.

Troubleshoot a missing or stale preview

• No image: inspect the rendered page source for a missing, duplicated, or malformed og:image tag.
• Old image: clear the platform cache or publish the replacement under a versioned filename.
• Wrong crop: return to a 1.91:1 canvas and move essential content toward the center.
• Blurry preview: verify the source is actually 1200 x 630 rather than a small image enlarged by CSS.
• Slow preview: resize first, then compress; do not serve a multi-megabyte camera original as social metadata.

Related guides

• Social media image sizes
• Image SEO guide
• Image performance guide
• Image accessibility and alt text