Missing og:image — The Most Important Tag for Social Engagement

What is og:image?

The og:image meta tag specifies the image that appears when your page is shared on social media. It's arguably the most impactful Open Graph tag — a compelling image can dramatically increase clicks and engagement.

Why is it critical?

Research and data consistently show:

Links with images receive 2-3x more engagement than links without
On Twitter/X, tweets with images get 150% more retweets
On Facebook, posts with images see 2.3x more engagement
On LinkedIn, image posts have 98% higher comment rates

Without og:image, platforms will either:

Show a gray placeholder box
Try to scrape a random image from your page (usually the wrong one)
Display a text-only preview that gets scrolled past

How to fix it

Add the following to your <head>:

<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />

Important: Always use an absolute URL (starting with https://).

Best practices for OG images

Dimensions

Recommended size: 1200 x 630 pixels (1.91:1 aspect ratio)
Minimum size: 600 x 315 pixels
File size: Keep under 5MB (under 1MB is ideal)
Format: JPG or PNG (JPG for photos, PNG for graphics/text)

Design tips

Make text large and readable — Assume the image will be displayed at ~500px wide
Include your logo/brand — Subtle branding reinforces recognition
Use contrasting colors — The image must stand out in a busy feed
Design for the crop — Different platforms crop differently; keep key content centered
Avoid too much text — Facebook may reduce reach for images with >20% text

Content ideas

Blog posts: Feature image with the article title overlaid
Product pages: High-quality product photo
Homepage: Branded graphic with tagline
Tools/apps: Screenshot or illustration of the tool in action

Framework-specific implementation

Next.js (App Router):

export const metadata = {
  openGraph: {
    images: ['https://yoursite.com/og-image.jpg'],
  },
}

Astro:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />

Tools for creating OG images

Figma/Canva — Design custom images with templates
Vercel OG — Generate dynamic OG images with code (@vercel/og)
Satori — Convert HTML/CSS to SVG for programmatic OG images