What Is an Open Graph Image? A Quick Explainer

An Open Graph image is the picture that shows up when you paste a link into Slack, X, LinkedIn, or a text message and it renders as a card with a title, description, and image instead of just a bare URL. That card isn't magic — it's built from a small set of meta tags in the page's HTML, and the image specifically comes from one tag: og:image.

Where 'Open Graph' comes from

Open Graph is a protocol Facebook introduced in 2010 so that any web page could describe itself in a standardized way — this is the title, this is the description, this is the representative image. The idea caught on well beyond Facebook: X, LinkedIn, Slack, Discord, iMessage, and most other platforms that render link previews now read the same og: tags, even though only Facebook originally defined them. It's one of the rare cases of a single company's spec becoming a de facto web standard by adoption rather than by committee.

What the tags actually look like

The three tags that matter most all live in the page's head element: og:title sets the headline shown on the card, og:description sets the short summary text beneath it, and og:image points to the URL of the image itself. A minimal example, written out as it would appear in HTML, looks like a meta tag with property="og:title" and a content attribute holding the headline, followed by the same pattern for og:description and og:image with its content set to a full image URL. None of this is visible on the page itself — it's metadata a crawler reads, not something a visitor sees while browsing.

• og:title — the headline shown in the preview card
• og:description — a one- or two-sentence summary beneath the headline
• og:image — the URL of the image shown on the card, ideally 1200×630px

Why it actually matters

A page with no og:image set doesn't fail to open — it just renders as a plain blue link with no visual context, sometimes with a generic favicon if you're lucky. A page with a well-made og:image renders as a card with a headline, a summary, and a purpose-built image, which is noticeably more likely to get a click and noticeably harder to mistake for spam. In a feed full of other links competing for attention, the difference between the two is the difference between something that looks intentional and something that looks broken.

The practical part

For a single static page, you can hand-write these three tags and point og:image at a fixed file. It gets more involved once you have hundreds of pages — blog posts, product pages, listings — each needing its own accurate title and a matching image, generated correctly and kept in sync as content changes. That's the specific problem a dynamic OG image renderer solves: instead of exporting an image per page by hand, the image is generated from a template that pulls in each page's real title and data automatically, so the tag is always accurate without manual upkeep.