OG Images (Open Graph)

What Is an OG Image?

When you paste a URL into X (Twitter), LinkedIn, Facebook, Slack, Discord, or iMessage, the platform fetches metadata from your page and renders a preview card — title, description, and a large thumbnail image. That thumbnail comes from the og:image Open Graph meta tag.

Same idea applies to Twitter Cards (twitter:image) and messaging apps that read Open Graph. One image, many surfaces.

If you don't set it, platforms either show a random image scraped from your page (often a logo, footer graphic, or nothing useful) or a blank gray box. Both kill click-through rate and make you look amateur.

Why It Matters for Marketing & Trust

This is why we're standardizing OG images across our properties. Too many of our sites still ship without a proper default — and every share is a missed conversion.

Dimensions & Technical Specs

Required Meta Tags

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="One compelling sentence." />
<meta property="og:image" content="https://yoursite.com/og/your-page.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/page/" />
<meta property="og:type" content="website" />

<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="One compelling sentence." />
<meta name="twitter:image" content="https://yoursite.com/og/your-page.jpg" />

Critical: og:image must be an absolute URL (full https:// path). Relative paths break on most platforms.

Design Tactics That Convert

• One clear headline — readable at thumbnail size. Max 6–8 words. No tiny body copy.
• High contrast — dark text on light background or white text on bold color. Feeds compress images; subtle gradients disappear.
• Brand anchor — logo or wordmark in a consistent corner. Same position on every OG image builds recognition.
• Human face (when relevant) — eyes draw clicks for personal brands, podcasts, and thought leadership.
• Product hero shot — for e-commerce and launches, show the product large and centered (like mockup-driven campaigns).
• Category color coding — AI content = one palette, e-commerce = another. Scannable in a busy Slack channel.
• No critical info at edges — platforms crop differently; keep logo and headline in the safe zone.
• Template system — one Figma/Canva template with swappable headline, image, and accent color. Ship OG images in minutes, not hours.

What to Avoid

• Tiny text that becomes illegible in the feed
• Busy screenshots with no focal point
• Defaulting to a generic profile photo for every page (we're guilty of this on MikesBlogDesign — one image for everything)
• Stock photos with no connection to the content
• Forgetting to update OG when you update the page title

Default vs. Per-Page OG Images

Our stack on MikesBlogDesign uses /images/mb-og-opengraph.jpg as the site-wide default in BaseLayout.astro, with per-category and per-page overrides where it matters. Next step: custom OG images for every page we actively promote.

Implementation Checklist (Every Site)

1. Create a 1200×630 branded default OG image — logo, site name, tagline
2. Add og:image, og:title, og:description, og:url to your base layout
3. Add twitter:card = summary_large_image and twitter:image
4. Use absolute URLs for all image paths
5. Allow per-page override via layout props (title, description, image)
6. Test every important URL with:
   • opengraph.xyz
   • Twitter Card Validator
   • Facebook Sharing Debugger
7. Re-scrape after deploy — platforms cache OG metadata aggressively
8. Build a template so new pages get custom OG images without a design bottleneck

Astro Pattern (Per-Page Override)

Extend your layout props so any page can pass a custom OG image:

// BaseLayout.astro — add ogImage prop
export interface Props {
  title: string;
  description?: string;
  ogImage?: string;  // optional per-page override
}
const ogImage = ogImage || 'https://mikesblogdesign.com/images/mb-og-opengraph.jpg';

<meta property="og:image" content={ogImage} />
<meta name="twitter:image" content={ogImage} />

// Any page.astro
<BaseLayout
  title="My Article"
  description="Why OG images matter."
  ogImage="https://mikesblogdesign.com/og/my-article.jpg"
>

For scale, consider Astro's dynamic OG image generation or a build script that generates images from page titles.

Portfolio Audit: Sites That Need OG Defaults

Every property we share publicly should pass the "paste in Slack" test. Before promoting a link, check:

• Does a preview image appear?
• Is the title accurate (not duplicated site name twice)?
• Does it look on-brand?
• Would you click it?

This applies to ExcaliburBrothers.com, marketplace listings, new launches like EB Men's Care, and every blog article we post on X.

Key Takeaways

• OG image = your link's packaging in every social feed and chat app
• Standard size: 1200 × 630 px, under 300 KB, absolute HTTPS URL
• Every site needs a default; high-value pages need custom images
• Design for thumbnail size: big headline, high contrast, brand anchor, safe zones
• Test with OG debuggers after every deploy — caches lie
• Template + props pattern scales across a portfolio without a designer per page

Related Guides

Browse more in E-commerce & Internet Marketing and Tech.