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:type" content="website">

Related guides

• Social media image sizes
• Image SEO guide
• Image performance guide