An Open Graph image is the preview picture that appears when a page’s link is shared — on Facebook, X, LinkedIn, Slack, Discord, iMessage, and nearly every other platform. It’s the large visual on the card, sitting above the title and description. You set it with a single line of HTML, and it becomes the first thing anyone sees before they decide to click.
This is the plain-English guide to what OG images are, why they matter, and how to get one on every page of your site.
What Is an OG Image, Exactly?
When you paste a link into a social platform or chat app, that platform’s crawler fetches the page and looks for a specific meta tag in the HTML:
<meta property="og:image" content="https://yoursite.com/og/page.png" />That tag points to an image. The crawler downloads it and renders it as the preview card. No image tag, no picture — just a bare grey box with your URL, which looks broken and gets fewer clicks.
So there are two things people mean by “OG image”:
- The og:image tag — the line of HTML that points to the file.
- The Open Graph image — the actual picture that shows up in the preview.
The tag is the pointer; the image is what people see.
Why OG Images Matter
A link is a piece of content whether you designed it that way or not. When someone shares your page, the preview card is your ad — and you either control what it says or you leave it to chance.
- Clicks. A branded card with the article title and a clear visual reads as trustworthy and gets clicked. A blank grey box reads as broken.
- Trust. Consistent, on-brand previews make your links look professional everywhere they travel — in DMs, group chats, and feeds you’ll never see.
- Reach. Every share is free distribution. A preview that communicates the page’s actual value turns more of that reach into visits.
What a Good OG Image Includes
The best OG images aren’t decorative — they carry information. A strong card usually has:
- A clear headline (the page or product title), large enough to read as a thumbnail.
- Brand identity — logo, colors, and type that make it recognizably yours.
- The one relevant detail — a price, a stat, an author, a category — that makes this page’s card different from every other page’s.
Keep text and logos inside the safe zone so nothing important gets cropped. Exact dimensions, per-platform quirks, and the mistake that silently fails crawlers are in the OG image sizes and specs guide.
How OG Images Work Under the Hood
OG images are one part of the broader Open Graph protocol — the set of meta tags that also define your title, description, and URL. Crawlers read these tags from the raw HTML (no JavaScript), so anything rendered client-side won’t be seen.
If you want the full picture of how the tags fit together and which ones matter, read the Open Graph protocol explained.
One Image, or One Per Page?
Most sites set a single OG image for the whole domain — usually a logo card — and move on. It works, but it wastes the opportunity. When every page has an image that reflects its actual content (the article title, the product name, the key number), previews stop being generic branding and start being useful signals.
The catch is scale. Designing a unique image for every blog post, product page, and profile by hand isn’t realistic. You need either a build pipeline that renders and screenshots a template per page, or a service that does it dynamically at request time.
OpenGraph does the latter: you design one template, point your og:image at an OpenGraph URL, and every page gets its own branded card generated from its live metadata — no pipeline to build or maintain. For storefronts, that looks like dynamic OG images on Shopify. See example cards in our case studies.
Check Your Own Pages
Not sure what your links look like right now? Paste any URL into the OG & meta tag inspector. It shows the exact image, title, and description each platform will render — so you can catch a missing tag, a wrong size, or a relative URL before anyone shares the link.
Frequently Asked Questions
What is an Open Graph image?
The preview image shown when a page's link is shared on social platforms and chat apps. It is set with the og:image meta tag and appears as a large card on Facebook, X, LinkedIn, Slack, Discord, and iMessage.
What is the difference between an OG image and the og:image tag?
The og:image tag is the line of HTML that points to the image file; the Open Graph image is the picture itself. The tag tells crawlers where to find the image to show in the preview.
Do I need a different OG image for every page?
You do not have to, but unique per-page images outperform a single site-wide logo card. A dynamic OG image service generates one automatically per page from its title, description, and live data.
How do I check what my OG image looks like?
Paste any URL into an OG inspector. It shows the exact image, title, and description each platform will render, so you can catch a missing tag, a relative URL, or a stale card before anyone shares the link.