# OG image size, meta tags, and examples

> What an OG image is, the 1200 × 630 size, the meta tags to copy, how Facebook, LinkedIn, and X show it, and how to make one for every page.

Canonical: https://bannerify.co/blog/og-image
Last updated: 2026-10-15

By Duc An, 2026-10-15.

An OG image is the picture that shows up when someone shares your link on Facebook, LinkedIn, X, Slack, or iMessage. You set it with the `og:image` meta tag from the Open Graph protocol. Without one, the network picks some image from the page, or shows no image at all.

**The short answer:** make the OG image **1200 × 630 pixels** (1.91:1), PNG or JPEG, under 3 MB, and add it with this tag in the `head` of the page:

```html
<meta property="og:image" content="https://example.com/og/page.png" />
```

This guide covers the size on each network, the full set of tags to copy, and three ways to make an image for every page.

## The size: 1200 × 630

Use **1200 × 630 pixels**, a 1.91:1 ratio. It is what the big networks ask for:

| Network | Recommended size | Ratio | Minimum | Max file size |
| --- | --- | --- | --- | --- |
| Facebook | 1200 × 630 | 1.91:1 | 600 × 315 for the large card | 8 MB |
| LinkedIn | 1200 × 627 | 1.91:1 | | 3 MB |
| X (Twitter), `summary_large_image` | Any 2:1, for example 1200 × 600 | 2:1 | 300 × 157 | 5 MB |

- **Facebook** wants at least 1200 × 630 for the best result on high-resolution screens. Below 600 × 315 the image still shows, but much smaller.
- **LinkedIn** shows the image at 1.91:1, so a 1200 × 630 image fits.
- **X** shows large cards at a 2:1 ratio, up to 4096 × 4096 pixels. A 1200 × 630 image loses a few pixels at the top and bottom there.

So one 1200 × 630 image works on all of them: keep text and logos away from the edges, and keep the file under 3 MB, the lowest limit. For the sizes of posts, covers, and profile photos on each network, see [social media image sizes](https://bannerify.co/blog/social-media-image-sizes). PNG and JPEG work everywhere: JPEG for photos, PNG for flat graphics and text.

## The meta tags (OG metadata)

The Open Graph tags are the OG metadata of a page: its type, URL, title, description, and image. Put these in the `head` of every page, in the HTML that your server sends:

```html
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/blog/dark-mode" />
<meta property="og:title" content="We shipped dark mode" />
<meta property="og:description" content="Every screen, both themes, no flash on load." />
<meta property="og:image" content="https://example.com/og/dark-mode.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dark mode launch card with the app logo" />

<meta name="twitter:card" content="summary_large_image" />
```

The [Open Graph tags reference](https://bannerify.co/blog/open-graph-tags) explains each tag, the og:type values, and the optional tags. The details that matter:

- **Use an absolute URL** with `https://` in `og:image`. A path like `/og/dark-mode.png` does not work.
- **Send the tags in the server HTML.** The crawlers of social networks do not run JavaScript, so they never see tags that a script adds in the browser.
- **Add `og:image:width` and `og:image:height`.** Facebook uses them to show the image on the first share, without downloading and measuring it first.
- **X reads the Open Graph tags** when its own `twitter:` tags are missing, so `twitter:card` is the only X tag you need.

## What a good OG image looks like

A good OG image has one job: tell people what the page is before they open it.

- **Title first.** The page title in big type, 4 to 10 words. It has to read on a phone, where the card is only a few hundred pixels wide.
- **One visual.** A logo, a product photo, an author photo, or a screenshot. Not all four.
- **Brand in the same spot.** The same colors, font, and logo position on every page, so people know it is you in a busy feed.
- **No small print.** Text under about 24 pixels at 1200 wide is hard to read in a feed.

Patterns that work:

- **Blog posts**: the title, the author name and photo, and the site logo.
- **Docs pages**: the section name, the page title, and the product logo.
- **Product pages**: the product photo, the name, and the price.
- **Launches and changelogs**: the feature name and a screenshot.

The [template gallery](https://bannerify.co/gallery) has 25 OG templates in these patterns that you can copy.

## Make one for every page

Designing an image by hand works for your home page, and the free [OG image generator](https://bannerify.co/tools/og-image-generator) makes one in a minute. It does not work for 300 blog posts, or for product pages that change every week. There are three ways to automate it.

### 1. Draw it in code

Libraries like `@vercel/og` and Satori turn JSX into an image when it is requested. They fit well when you are a developer and the design is simple. The cost is that the layout lives in your code: every font, color, and spacing change is a code change and a deploy, and only part of CSS is supported.

### 2. Screenshot a page

Build a special HTML page for the image and screenshot it with a headless browser. All of CSS works, but you have to run and scale a browser to do it.

### 3. Fill a template from a URL

Design the image once in an editor, and make the parts that change (title, author, photo) named layers. Then build a URL for each page that carries the values for those layers. This is how Bannerify [signed URLs](https://bannerify.co/docs/essentials/signed-urls) work:

```ts
import { Bannerify } from "bannerify-js"

const bannerify = new Bannerify(process.env.BANNERIFY_API_KEY!)

// Runs on your server, for example while you render the page head.
const ogImage = await bannerify.generateImageSignedUrl("tpl_your_og_template", {
  modifications: [
    { name: "title", text: post.title },
    { name: "author", text: post.author.name },
    { name: "avatar", src: post.author.avatarUrl },
  ],
})
```

Then put the URL in the tag:

```tsx
<meta property="og:image" content={ogImage} />
```

What happens next:

- Signing the URL makes no network request, so it adds nothing to your page load.
- The image renders the first time a network asks for it. After that, the cache serves it for up to 7 days, and cache hits do not count toward your quota.
- When you change the design and save the template, its cached images are cleared, so every page gets the new design. You do not touch the code.
- The API key stays on your server. The URL is safe to share: it holds a signature, not your key.

The signed URL docs also show Python, PHP, and Go, and how to sign a URL without an SDK.

## Check it before you share

Networks cache what they scrape, often for days, so test a page before you post it:

- **The free [Open Graph checker](https://bannerify.co/tools/open-graph-checker)** shows the X, Facebook, and LinkedIn previews of any URL at once, lists the missing tags, and checks the image size.
- **Facebook Sharing Debugger** shows what Facebook sees, and scrapes the page again after you change it.
- **LinkedIn Post Inspector** does the same for LinkedIn.
- **X** shows the card in the composer. Paste the link into a new post and look before you publish.
- **Slack and Discord** show the card as soon as you paste the link into a message to yourself.

If the image does not show, check these first: the `og:image` URL is absolute and opens in a private browser window, the page does not need a login, the file is under 5 MB, and your `robots.txt` does not block the crawler of that network.

## Try it

Copy an OG template from the [gallery](https://bannerify.co/gallery), give the layers that change clear names, and sign one URL per page. The free plan includes 100 generations a month and one template, and cache hits do not count. Automate starts at $29 a month for 3,000 generations. Details on [pricing](https://bannerify.co/pricing).

If your OG images are still made by hand, [start with the free plan](https://app.bannerify.co) and move one page type, such as blog posts, to a template first. The rest of the [image generation API](https://bannerify.co/product/image-generation-api) works the same way for emails, social posts, and product images.

## Related

- [Social media image sizes for 2026: Instagram, Facebook, LinkedIn, X, YouTube](https://bannerify.co/blog/social-media-image-sizes)
- [How to make certificates from an Excel list](https://bannerify.co/blog/certificates-from-excel)
- [Open Graph tags: og:type, og:title, og:url, and the rest](https://bannerify.co/blog/open-graph-tags)
- [All posts](https://bannerify.co/blog)