What is an Open Graph image?

An Open Graph image is the picture that appears when someone pastes your URL into Facebook, LinkedIn, WhatsApp, Slack, Discord, and many other apps. It is not a special binary format. It is a normal PNG or JPG that your page points to with the og:image meta tag. This reference explains what that tag does, how cards combine image + title + description, which size to ship, and the mistakes that break previews.

If you already know the definition and need design habits, jump to OG image best practices. If you are comparing Facebook-style tags with X, see Open Graph vs Twitter Cards.

Where Open Graph came from (in one paragraph)

Open Graph is a set of HTML meta properties originally popularized for Facebook. The idea is simple: a public page declares structured fields—title, description, type, canonical URL, and image—so a crawler can build a rich card without scraping the whole layout. Other products adopted the same vocabulary. That is why fixing og:image often repairs previews across several networks at once.

What og:image actually does

When a crawler fetches your URL, it looks for tags like:

<meta property="og:title" content="Ship notes for October" />
<meta property="og:description" content="What we released and how to try it." />
<meta property="og:image" content="https://example.com/og/ship-notes.png" />
<meta property="og:url" content="https://example.com/blog/ship-notes/" />
<meta property="og:type" content="article" />

The image URL is fetched separately. The app then composes a card: artwork on top or to the side, title as the headline, description as supporting text, and often your domain as a footer. If og:image is missing, relative, blocked, or points at a file the crawler cannot download, you get a blank or default thumbnail even when the page looks fine in Chrome.

Optional helpers that improve first-fetch behavior:

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Ship notes cover with product screenshot" />

Width and height hint at a large card. Alt text is a short human description for accessibility—not a keyword list. Build a clean snippet with the Meta Tag Generator.

How share cards use the image

Think of three layers:

1. Page HTML — crawlers read the initial document, not your hydrated SPA.
2. Image file — must be publicly reachable over HTTPS without cookies or a login wall.
3. Platform cache — once scraped, Facebook, LinkedIn, and messengers may keep the old card until you re-scrape or change the image path.

The image is the visual hook. Title and description carry meaning when the picture is cropped or when someone skims text-first surfaces. Design the image so the headline still works if the description is truncated. Keep on-image type short; WhatsApp and mobile embeds shrink everything.

A CMS “featured image” is not automatically an Open Graph image. It only appears on shares if your theme, SEO plugin, or framework copies that file into og:image. Always confirm the live HTML, not only the editor preview.

Recommended dimensions: 1200×630

1200×630 (about 1.91:1) is the practical master canvas for Open Graph artwork. LinkedIn often documents a nearby 1200×627 crop; treating 1200×630 as your source and leaving a safe margin covers both. Pixel tables and network notes live on OG image size and per-network pages such as LinkedIn image sizes.

Safe zone

Keep headlines and logos inside an inset of roughly 10% from each edge. Background can bleed; text should not. Platforms crop differently on feed, messenger, and desktop vs mobile.

File weight

Heavy files fail messengers and slow scrapes. Prefer a lean PNG for UI/graphics or a moderate JPG for photos. Format trade-offs: OG image file formats.

Absolute HTTPS is non-negotiable

Bad:

<meta property="og:image" content="/images/og.png" />

Good:

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

Crawlers resolve relative URLs inconsistently. Signed or expiring CDN URLs break when the signature ages. Host a stable public object. When you change the art, prefer a new filename (og-v2.png) so caches cannot stick to the old binary at the same path.

If you inherited relative or http:// image tags, the OG Tags Repair assistant helps you reason through fixes—then confirm with the Link Preview Checker.

Relationship to title and description

Tag	Role on the card
og:title	Headline; lead with meaning in the first ~60 characters
og:description	Supporting copy; one or two short sentences
og:image	Visual; readable at small sizes
og:url	Canonical share URL when you want a stable cache key
og:type	Usually website or article

Image, title, and description should agree. A festive holiday PNG with a bland title wastes the card. Conflicting duplicate tags from a theme plus an SEO plugin create lottery behavior—keep one pipeline.

For X large images, still set twitter:card to summary_large_image. Details: Open Graph vs Twitter Cards.

Common mistakes

1. Relative og:image paths — crawlers never see what you see after the browser resolves /og.png.
2. Client-only meta tags — tags injected after hydration never reach social bots.
3. Login walls or bot blocks on the page or the image URL.
4. Overwriting og.png in place — platforms keep serving the old cached file.
5. Tiny or square featured images — LinkedIn and others may show a small thumbnail instead of a large card.
6. Busy full-page screenshots — UI chrome becomes unreadable mud at embed size.
7. WebP-only or exotic formats as the sole tagged file—stick to PNG/JPG for the URL you declare.
8. Multiple competing og:image tags — first or last wins depending on the consumer; do not rely on luck.

When the image fails everywhere, work through og:image not showing. When Facebook looks fine but WhatsApp does not, compare constraints in OG image works on Facebook not WhatsApp.

How to create one (practical path)

1. Design the card

Use a dedicated canvas at 1200×630. Short headline, optional subtitle, one logo mark, strong contrast. The OG Image Generator is a browser-based path for that layout. Preview how networks crop with the Social Preview Simulator when you want a quick visual check before publishing tags.

2. Export and host

Export PNG or JPG. Upload to your CDN or static public/ folder. Confirm the file opens in a private window with no login.

3. Wire the tags

Point og:image at the absolute URL. Add width, height, and alt when you can. Align twitter:image if you care about X. Framework notes: Next.js OG images, WordPress.

4. Verify

1. View Source on the live URL — search for og:image.
2. Open the image URL logged out.
3. Run the page through the Link Preview Checker.
4. Use network tools when caches stick: Facebook Sharing Debugger, LinkedIn Post Inspector.

If tags are wrong in HTML, repair the source first. Re-scraping a broken page cannot invent a correct image.

Static PNG vs dynamic image URLs

Many sites ship one hand-designed PNG per marketing page. That is enough for launches and evergreen tools. Blogs and docs often want per-title artwork: a shared template with the post title rendered into the image. That is still an Open Graph image—the file is produced by an API or framework ImageResponse route instead of a designer export. The crawler only cares that og:image returns a valid image over HTTPS.

Dynamic routes need caching discipline: cold starts and rate limits can make the first scrape flaky. Prefer a fast, cacheable response for the tagged URL. Export patterns and SDK helpers live under code export and the developer SDK when you want to move from a static mockup into generated cards.

What an Open Graph image is not

• Not your favicon or app icon
• Not automatically your blog’s featured image
• Not a guarantee every messenger will show a large card (WhatsApp and others add limits)
• Not the same as paid ads creative

If Facebook shows an old picture after you change the file, you are usually fighting cache—not a broken definition of Open Graph. See Facebook link preview not updating.

Checklist

• One absolute https:// og:image in the initial HTML
• 1200×630 (or nearby 1.91:1) with safe margins
• Lean PNG or JPG; public, non-expiring host
• Title and description that match the artwork
• Optional width, height, and honest alt text
• Versioned filename after visual changes
• View Source + Link Preview Checker before a campaign share

What “good” looks like in practice

A solid Open Graph image reads in under a second at thumbnail size: clear brand mark, three to six words of headline, high contrast, no edge-clipped type. The HTML that references it is boring on purpose—one image URL, one title, one description, absolute https, no plugin fight. The file opens logged out. The checker agrees with View Source. Only then do you worry about Facebook or LinkedIn cache refresh.

Treat the share string as part of the contract. example.com/page and example.com/page/ can cache separately. Prefer a stable canonical in og:url and share that same string when you test. Document which system owns head tags (theme, plugin, or layout) so the next person knows which lever to pull.

Open Graph images are not SEO magic by themselves. They are trust and clarity at the moment of sharing. A readable card increases the chance someone understands the link before they tap. That is the whole job: declare a clear picture, host it honestly, and keep the HTML crawlers see aligned with the art you intend to show.

After you understand the definition, prove the live tags with a fixed testing order—View Source, checker, then platform scrapers—so campaigns do not launch on a CMS preview that crawlers never see.