OG image guide: size, meta tags, and examples

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.

This guide covers the size that works everywhere, the 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:

Facebook wants at least 1200 × 630 for the best result on high-resolution screens. Below 600 × 315 the image still shows, but much smaller. The file can be up to 8 MB.
LinkedIn asks for at least 1200 × 627 at 1.91:1, up to 5 MB.
X shows large cards at a 2:1 ratio, from 300 × 157 up to 4096 × 4096 pixels, under 5 MB. A 1200 × 630 image loses a few pixels at the top and bottom there.

So keep text and logos away from the edges, and keep the file well under 5 MB. PNG and JPEG work everywhere: JPEG for photos, PNG for flat graphics and text.

The meta tags

Put these in the head of every page, in the HTML that your server sends:

<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 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 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 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 work:

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:

<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.

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

The free 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, 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. PRO is $29 a month for 10,000 generations. Details on pricing.

If your OG images are still made by hand, start with the free plan and move one page type, such as blog posts, to a template first. The rest of the image generation API works the same way for emails, social posts, and product images.