Open Graph images for your app's website

Updated October 30, 2026

An Open Graph image is the picture that shows when someone shares a link to your website on X, LinkedIn, Facebook, Slack, iMessage and most other apps. Make it 1200 × 630 pixels (1.91:1), set it with the og:image tag, add twitter:card set to summary_large_image so X shows it large, keep text away from the edges, and test it before you share the link.

What an Open Graph image is

Open Graph is a set of meta tags, started by Facebook, that tells other apps how to show a link to your page: its title, description, URL and image. When you paste a link into a post or a chat, the app fetches the page, reads these tags and builds a preview card.

Without an image tag, the app guesses. It might pick your logo, a random image from the page, or nothing at all. For an app’s website, that card is often the first thing people see of your product, so it’s worth controlling.

The size: 1200 × 630

The Open Graph protocol itself doesn’t set a pixel size. In practice, 1200 × 630, a 1.91:1 ratio, shows as a full-width card on nearly every platform, and LinkedIn’s 1200 × 627 is close enough that the same image works there. Use that size, and export as JPEG or PNG under a few megabytes so it loads quickly when the app fetches it.

Keep a safe area

Different apps trim the image slightly differently, and some show it smaller, as a thumbnail. To keep it readable everywhere:

Keep text and the device at least 60 to 80 pixels from every edge.
Put the important part in the center two-thirds.
Use large type: a headline of five words or fewer, at least 60 pixels tall.
Don’t repeat the page title in the image. The card shows the title under it anyway.

The tags to add

Put these in the <head> of each page. The Open Graph protocol lists og:title, og:type, og:image and og:url as required, and asks for og:image:alt whenever you set an image.

Tag	Example value
`og:title`	YourApp – Track your habits
`og:description`	One sentence about what the app does.
`og:type`	website
`og:url`	https://yourapp.com/
`og:image`	https://yourapp.com/og.jpg (a full URL, not a relative path)
`og:image:width` / `og:image:height`	1200 / 630
`og:image:alt`	The app’s home screen on an iPhone, on a blue background.
`twitter:card`	summary_large_image

In HTML it looks like this:

<meta property="og:image" content="https://yourapp.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The app's home screen on an iPhone">
<meta name="twitter:card" content="summary_large_image">

X reads the Open Graph tags for the title, description and image when its own twitter: versions are missing, so twitter:card is usually the only X-specific tag you need. Without it, X may show a small card or none.

One image per page

Your home page gets the hero image. Other pages can have their own:

Feature pages: the screen for that feature, framed.
Blog posts and guides: the post’s title on your brand background, or the screenshot the post is about.
Changelog or release notes: the new screen from that release.

A page-specific image makes a shared link look like it was made for that conversation, and it gets more clicks than the same logo card on every page.

Test the preview

Apps cache previews, sometimes for days, so test before you share a link widely.

Open the image URL in a browser. If it doesn’t load publicly, no app will show it.
Facebook’s Sharing Debugger shows what Facebook reads from your page, and its Scrape Again button refreshes a cached preview.
LinkedIn’s Post Inspector does the same for LinkedIn.
X: paste the link into a new post without sending it. The composer shows the card X will use.
Messages and Slack: send the link to yourself.

If an old image keeps showing, change the image’s filename (for example og-2.jpg) and update the tag. A new URL skips most caches.

Common mistakes

A relative image path. /og.jpg works in a browser but not in a preview card. Use the full URL with https://.
An image blocked from crawlers. If your robots.txt or a login page blocks the image, apps can’t fetch it.
Small text. In a chat thread the card can be shown a third of its size. Anything under about 40 pixels tall in the original becomes unreadable.
A tall phone screenshot on its own. Cropped to 1.91:1, a phone screenshot shows a slice of the status bar and not much else. Place it on a wide canvas instead.

Make one with a framed device

For an app, the strongest Open Graph image is usually the app itself: your best screen in a device frame, on your brand color, with a short headline. Because 1.91:1 is wide, one phone in the middle leaves a lot of space. Use it for a headline beside the phone, or show two or three screens in a row.

FeatureFrame has a 1.91:1 canvas preset. On a Mac:

Drop in your screenshot. FeatureFrame detects the iPhone or iPad from its size and frames it in a 3D model of that device.
Choose the 1.91:1 canvas, and a solid color, gradient or your own image as the background.
Tilt the device a little, or add up to three screenshots in a Row layout.
Export at 720p as JPEG. A 1.91:1 canvas comes out at 1376 × 720, the same shape as 1200 × 630 and a little sharper. Use it as is, or resize it to the exact size.

Leave the headline for a design tool or your website’s template if you need one; the framed device is the part that’s hard to make by hand.

Use the same image as the hero of your launch posts: see the launch images checklist. For the other sizes you’ll need, see image sizes for sharing app screenshots, and for single device frames, the device frame library.