When you share a link on Facebook, Twitter/X, LinkedIn, Slack, or Discord, the image that appears in the preview card is called an Open Graph image (or OG image). It is the single biggest factor in whether someone clicks your link or scrolls past it.

This guide covers everything you need to know about Open Graph images in 2026: what they are, why they matter, the correct dimensions for every platform, how to add them to your site, and how to generate unique OG images with AI instead of reusing the same templates as everyone else.

What Are Open Graph Images?

Open Graph is a protocol created by Facebook in 2010 that lets web pages control how they appear when shared on social media. The og:image meta tag specifies the preview image that platforms display alongside your link.

When someone pastes your URL into a social media post, messaging app, or collaboration tool, the platform fetches your page's HTML, reads the Open Graph meta tags, and renders a rich preview card. Without an og:image, most platforms show either a blank card, a generic placeholder, or a random image scraped from your page.

Here is a minimal example of Open Graph meta tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of your page." />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

Why OG Images Matter

Open Graph images directly impact click-through rates. Research consistently shows that social media posts with compelling images receive significantly more engagement than text-only posts or posts with generic previews.

Higher click-through rates. A well-designed OG image makes your link stand out in crowded feeds. Posts with custom images see 2–3x more clicks than those with default previews.
Brand recognition. Consistent OG images with your logo, colors, and typography reinforce your brand every time someone shares your content.
Professional credibility. A missing or broken OG image signals neglect. A polished one signals quality before visitors even reach your site.
Indirect SEO benefits. Higher engagement and click-through rates from social sharing send positive signals that can influence search visibility over time.

OG Image Dimensions for Every Platform

The universal standard for OG images is 1200 × 630 pixels. This aspect ratio (roughly 1.91:1) works across virtually every platform that supports Open Graph. For the full breakdown by platform, see our OG Image Size Guide.

Platform	Recommended Size	Status with 1200×630
Facebook / Meta	1200 × 630	Exact match
Twitter / X	1200 × 628	Covered (2px negligible)
LinkedIn	1200 × 627	Covered
Discord	1200 × 630	Exact match
Slack	1200 × 630	Exact match
iMessage	1200 × 630	Exact match
WhatsApp	1200 × 630	Exact match
Google Search	1200 × 630+	Covered

Key Rules for OG Image Dimensions

Use 1200 × 630 pixels. This single size works everywhere. Do not create platform-specific images unless you have a very specific reason.
Keep important content in the safe zone. Leave 40–60px padding from all edges. Platforms crop images differently, especially on mobile.
Use PNG for graphics, JPG for photos. PNG gives you crisp text and logos. JPG works better for photographic images. Keep file size under 1 MB.
Always use absolute URLs. The og:image content must be a full URL starting with https://. Relative paths will not work.

How to Add OG Images to Your Website

Adding Open Graph images requires placing meta tags in your page's <head> section. The exact method depends on your tech stack. For detailed, framework-specific instructions, see our guide on how to add Open Graph images to your website.

Basic HTML

<head>
  <meta property="og:image" content="https://yoursite.com/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Description of the image" />
</head>

Next.js (App Router)

// app/page.tsx
export const metadata = {
  openGraph: {
    images: [{
      url: 'https://yoursite.com/og-image.png',
      width: 1200,
      height: 630,
      alt: 'Description of the image',
    }],
  },
}

WordPress

Most SEO plugins (Yoast, Rank Math, All in One SEO) handle Open Graph images automatically. Set the “Social Image” or “Featured Image” in the post editor, and the plugin generates the meta tags.

Common OG Image Problems

If your OG image is not showing up when you share a link, there are several common causes. We cover all of them in detail in our OG image troubleshooting guide, but here are the most frequent issues:

Cached old image. Facebook, Twitter, and LinkedIn cache OG images aggressively. Use their respective debug tools to force a refresh.
Relative URL instead of absolute. The og:image value must be a full URL (https://yoursite.com/image.png), not a relative path.
Image too large or too small. Most platforms require images to be at least 200 × 200px and under 8 MB. Aim for 1200 × 630 under 1 MB.
HTTP instead of HTTPS. Some platforms will not fetch images served over plain HTTP.
Server blocks crawlers. If your server returns a 403 or requires authentication, social media crawlers cannot fetch the image.

AI-Generated vs. Template OG Images

Most OG image tools on the market use a template-based approach: you pick a layout, fill in text fields, and get an image that looks like every other image made with that same template. The result is functional, but generic.

AI-generated OG images are different. Instead of selecting from a fixed set of templates, you describe what you want and an AI model generates a unique image. The advantages:

Every image is unique. No two AI-generated OG images look the same, even for similar prompts. Your links stand out instead of blending in.
No design skills required. Describe your content in plain language and the AI handles composition, color, and typography.
Faster iteration. Generate multiple options in seconds and pick the best one. No manual drag-and-drop editing.
On-brand by default. Provide your brand colors or URL and the AI incorporates them into the generated image.

How to Test Your OG Images

After adding OG images to your site, test them with these platform-specific tools before sharing:

Facebook Sharing Debugger — Paste your URL to see exactly how Facebook will render your link preview. Also lets you clear the cache.
Twitter/X Card Validator — Preview how your link appears in tweets. Note: as of 2025, the standalone validator was removed, but you can test by composing a tweet with the URL.
LinkedIn Post Inspector — Shows the LinkedIn preview and lets you refresh cached data.
opengraph.xyz — Third-party tool that shows previews across multiple platforms at once.

Best Practices Summary

Use 1200 × 630 pixels for all OG images.
Keep text large and readable — it will be viewed as a small thumbnail on mobile.
Keep important content within the safe zone (40–60px from edges).
Use PNG for text-heavy images, JPG for photos. Stay under 1 MB.
Always use absolute HTTPS URLs in your meta tags.
Include og:image:width and og:image:height for faster rendering.
Add og:image:alt for accessibility.
Test with platform debug tools before publishing.
Create unique images for each page — do not reuse the same image site-wide.
Consider AI-generated OG images to stand out from template-based competitors.

Generate Your OG Images with AI

Ready to create OG images that actually stand out? Pixola's free AI OG Image Generator creates unique, platform-optimized Open Graph images using AI. Just describe your content or paste your URL, and get a 1200 × 630 PNG ready to use. No templates, no design skills needed.