What is an Open Graph image?

An Open Graph image (often shortened to OG image) is the picture that appears when someone shares a link to your page. Paste a link into X, LinkedIn, Facebook, Slack, Discord, WhatsApp or iMessage, and the card that appears, with an image, a title and often a short description, is built from your page’s Open Graph tags.

The image is set with a single line in your page’s <head>:

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

When a platform sees a link for the first time, it visits the page, reads that tag, downloads the image and uses it in the preview.

Where the name comes from

Open Graph is a set of meta tags that Facebook introduced in 2010 so that any web page could describe itself when shared: its title, a description, an image and what kind of content it is. The idea caught on, and today almost every platform that shows link previews reads Open Graph tags. X has its own twitter: tags too, but falls back to Open Graph ones when they’re missing.

You’ll see a few names for the same thing: OG image, Open Graph image, social image, share image, link preview image or social card. They all mean the image in og:image.

Where OG images appear

More places than most people expect:

• Social networks: X, LinkedIn, Facebook, Threads, Bluesky, Mastodon and Pinterest.
• Messaging apps: WhatsApp, iMessage, Telegram, Signal and Facebook Messenger.
• Work tools: Slack, Microsoft Teams, Discord and Notion, whenever a link is pasted into a message or page.
• Some email clients and link-sharing tools, which build previews the same way.

Every one of those is a moment when someone decides whether to click.

What happens without one

If your page has no og:image, platforms do one of three things:

1. Show a plain text link, which is easy to scroll past.
2. Show a small grey placeholder where the image would be.
3. Guess, by picking some other image from your page. That might be your logo, an advert, or a small icon stretched to fill the card.

None of these help. A clear, well-designed image makes a link look intentional and trustworthy, and it takes up more space in the feed.

What makes a good OG image

A share image is seen small and in passing, usually on a phone, alongside dozens of others. That changes the rules compared with a normal graphic:

• Few words, big type. A short headline readable at thumbnail size beats a paragraph. If you can’t read it at 400 pixels wide, it’s too small.
• One clear idea. The headline of the article, the name of the product, the date of the event.
• Strong contrast. Text that stands out from the background, especially over photos.
• Your brand, quietly. A logo or name in a corner helps people recognise you without competing with the message.
• Room at the edges. Platforms crop slightly differently, so keep important text away from the very edge. Our size guide explains the safe area.
• A unique image per page. X’s own guidance advises against using one generic image, such as your logo, across every page. A preview that reflects the specific page gets more clicks.

The right size

The short answer is 1200 × 630 pixels, a ratio of 1.91:1. It looks right on Facebook, LinkedIn, X, Slack, Discord and messaging apps. For the details, including file size limits and how each platform crops, see the OG image size guide.

The tags you need

An image alone isn’t quite enough. A complete preview needs a title and description too, and X needs one extra tag to show a large image:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A one-sentence summary of the page." />
<meta property="og:image" content="https://example.com/og/my-page.png" />
<meta property="og:url" content="https://example.com/my-page" />
<meta name="twitter:card" content="summary_large_image" />

Each tag is explained in Open Graph meta tags explained.

How to make one

You don’t need a design app. In the MakeOGImage.com editor you can:

1. Start from a template, or a colour, gradient or your own photo.
2. Type your title and description, and add your logo.
3. Switch between the X, Facebook, LinkedIn, Slack and Discord previews to see how it will look.
4. Download a PNG or JPG, and copy the ready-made meta tags for HTML, Astro or Next.js.

If your site has many pages, batch images creates one for every page at once, from a list, a spreadsheet or your sitemap.

Checking that it works

Once the image and tags are on your live page, paste the address into the OG checker. It shows how the link appears on each platform and flags anything missing, too small or broken.

If you’ve changed an image and the old one still appears when you share the link, that’s caching. Why your link preview isn’t updating explains how to fix it.