You have seen a thousand of them without knowing the name. Paste a link into Slack, iMessage, WhatsApp or a post on any social platform, and instead of a bare blue address you get a little card: a picture, a headline, a line of description. That picture is the OG image, and this is what it is, why every page you publish should have one, and how it gets there.
No prior knowledge assumed. If you have ever wondered why some links look rich and yours looks like plain text, this is the whole answer.
What OG stands for
OG is short for Open Graph, a small standard Facebook published in 2010 so that any page could describe itself to any platform that shows link previews. The name stuck far beyond Facebook. Today Slack, Discord, LinkedIn, WhatsApp, iMessage, X and most others read the same Open Graph tags to build the card they show.
An OG image, then, is the picture named by one specific tag, og:image, in the hidden part of your page. When a platform unfurls your link, that tag tells it which picture to put on the card.
Where it lives
The tag sits in the <head> of your HTML, the part of the page a browser reads but a person never sees. A minimal version looks like this.
<head>
<meta property="og:title" content="Your page headline" />
<meta property="og:description" content="One line about the page" />
<meta property="og:image" content="https://example.com/og.png" />
</head>Three tags, and the card has a headline, a subhead and a picture. The image tag is the one this post is about, and the one people most often get wrong.
Why a page needs one
A link with no OG image still works. It just looks like nothing. In a feed of cards with pictures, a bare text link is the one nobody clicks, because it gives no reason to.
- It earns the click. A card with a clear picture and headline is read at a glance and pulls attention that a plain URL never gets.
- It controls the story. Without
og:image, a platform either shows nothing or grabs some random image off the page, often a logo or an advert. Setting the tag means you decide what represents your link. - It looks trustworthy. A rich, correct preview signals a real page. A broken or missing one signals the opposite, whether or not that is fair.
For the design side of making that picture actually get clicked, nine rules for social previews covers what survives at the small size these cards are seen.
What makes a good one
Two things decide whether an OG image works: its size, and what is on it.
The size is one number. 1200 by 630 pixels. It is the shape every major platform expects, large enough to stay sharp and small enough to load fast. The full breakdown of what each platform crops from that rectangle is in the OG image size guide.
The content is a headline, not a scene. These cards are seen small, in a scrolling feed, next to twenty others. A few large words carry further than a detailed illustration. Keep the important text away from the edges, which are the first thing to be cropped.
The mistake that breaks almost every one
The single most common reason an OG image fails is a relative URL. The tag must point at a full, absolute address.
<!-- Wrong: a crawler is not on your site, so this resolves to nothing -->
<meta property="og:image" content="/og.png" />
<!-- Right: a full address any crawler can fetch -->
<meta property="og:image" content="https://example.com/og.png" />A platform reading your tag is not browsing your site, so a path like /og.png means nothing to it. Only a complete https:// URL works. If your card renders blank, check this first.
How X fits in
X, formerly Twitter, is the one platform with its own extra layer of tags called Twitter Cards. It reads your Open Graph tags too, but to get the full-width banner rather than a small square thumbnail you need one X-specific tag. The whole relationship, and the minimal set that satisfies both systems, is in Twitter Card vs Open Graph.
Do you have to make each one by hand
No, and for more than a handful of pages you should not. There are two paths.
- One card, made once. For a landing page or a small site, design a single image, drop the tag in, done.
- A card per page, generated. For a blog or a site with many pages, the card is drawn automatically from each page's own title and brand, so a new page gets a correct card with no design work. You can even build one straight from a page's address, which generating OG images from a URL walks through.
How to check it before you share
Once the tag is in, do not test by posting the link, because that caches whatever the card looks like right then. Use the free platform validators instead. The one-minute routine for that, and the handful of failures behind nearly every broken card, is in how to test your OG image before you share it.
The short version
An OG image is the preview picture set by the og:image tag. Make it 1200 by 630, put a clear headline on it, point the tag at a full https:// URL, and check it with a validator before the link goes out. Do that and every place your link gets pasted shows a card you chose instead of a bare address or a broken box.