OG Image Checker
Validate your Open Graph image dimensions, format, and accessibility across all platforms
Paste multiple URLs to check Open Graph previews in bulk. We’ll analyze up to 5 pages at a time.
About This OG Image Checker
The Open Graph image is the single most impactful element of your social share preview. While titles and descriptions affect click intent, the image is what stops the scroll. A compelling, correctly-sized OG image can increase click-through rates from social shares by 3-5x compared to a missing or incorrectly sized one — making OG image optimization one of the highest-ROI improvements you can make to your content marketing.
Yet OG image issues are remarkably common. Wrong dimensions, missing alt text, inaccessible image URLs, incorrect file formats, and oversized files all cause social platforms to either not display your image or display it poorly. Each platform has slightly different requirements, and an image that works perfectly on Facebook may render incorrectly on Twitter or fail to load on LinkedIn.
An OG image checker validates your og:image tag against the requirements of every major platform simultaneously — checking dimensions, file size, format, accessibility, and URL validity so you can fix all image issues before they affect your social sharing performance.
OG Image Requirements Across Platforms
Every major social platform reads the same og:image tag but has different requirements and display behaviors. Facebook wants 1200x630px at 1.91:1 ratio. Twitter's summary_large_image card needs 1200x628px. LinkedIn requires 1200x627px. WhatsApp displays square-cropped previews from the same image. Getting one image that works well across all platforms requires understanding these overlapping but distinct requirements.
The good news is that a 1200x630px image satisfies all major platforms acceptably — the 2-3 pixel difference between LinkedIn's 627px and Facebook's 630px is imperceptible in practice. The real differentiation comes in file size, format, and alt text, where each platform has its own preferences and limitations.
Image hosting also matters. Your og:image must be served over HTTPS (HTTP images are rejected by Twitter), must be publicly accessible without authentication, must not be blocked by robots.txt, and must be accessible to the crawler bots of each platform. A correctly sized image served from behind authentication is as bad as no image at all.
Key Considerations for OG Image
Universal Image Dimensions
1200x630px is the closest thing to a universal OG image size. It satisfies Facebook (1200x630px), Twitter (1200x628px), and LinkedIn (1200x627px) within acceptable tolerances. For WhatsApp, the center 1:1 portion of this image will be used for square previews, so keep key content centered.
Format and File Size
JPG is the most compatible format across all platforms. PNG is acceptable but produces larger file sizes. WebP is supported by Twitter and LinkedIn but not consistently by all platforms. Keep file size under 1MB for fastest loading — Facebook allows up to 8MB but large images slow preview generation. Aim for 200-400KB as your target range.
HTTPS and Accessibility
All major platforms require og:image URLs to use HTTPS. HTTP image URLs are rejected by Twitter and may fail on other platforms. The image must be publicly accessible without login, not blocked by robots.txt, and served with appropriate CORS headers if needed. Test by opening your og:image URL in an incognito browser window.
Alt Text for Accessibility
Include og:image:alt with a descriptive text alternative for your OG image. Twitter specifically supports twitter:image:alt for accessibility. Screen readers and assistive technologies use this text when the image can't be displayed. It also signals to platforms that your content is accessibility-conscious.
Common OG Image Issues
Dimension Problems
- •Image too small — under 600px wide causes small thumbnail display on Facebook
- •Wrong aspect ratio causing platform-specific cropping of important content
- •Image too large (over 5MB) causing slow or failed preview generation
- •Square images (1:1) that don't fit platform landscape card formats
Technical Issues
- •HTTP image URL rejected by Twitter (must be HTTPS)
- •Image behind authentication preventing crawler access
- •Relative URL in og:image tag instead of absolute URL
- •Image blocked by robots.txt for social media crawler bots
- •Missing og:image:width and og:image:height causing platforms to download full image before rendering
Content and Design
- •Important text or logos too close to edges — gets cropped on some platforms
- •Text too small to read in preview card dimensions
- •Cluttered design that loses impact at thumbnail sizes
- •Missing brand elements making shares look generic and untrustworthy
How to Fix OG Image Issues
Complete OG Image Tag Implementation
Include all image-related OG tags for optimal cross-platform display:
<head>
<!-- Primary OG image -->
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:image:secure_url" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the social preview image" />
<!-- Twitter-specific image (can be same URL) -->
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg" />
<meta name="twitter:image:alt" content="Descriptive alt text for accessibility" />
</head>Generate Dynamic OG Images in Next.js 15
Use Next.js built-in OG image generation to create programmatic images for every page:
// app/og/route.tsx — Dynamic OG image generation
import { ImageResponse } from "next/og";
export const runtime = "edge";
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get("title") ?? "Default Title";
return new ImageResponse(
(
<div
style={{
width: "1200px",
height: "630px",
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "linear-gradient(135deg, #667eea, #764ba2)",
padding: "60px",
}}
>
<h1 style={{ color: "white", fontSize: "64px", textAlign: "center" }}>
{title}
</h1>
</div>
),
{ width: 1200, height: 630 }
);
}
// Usage in page metadata:
// og:image: https://yourdomain.com/og?title=Your+Page+TitleSafe Zone Design Guidelines
Design your OG images with platform cropping in mind to keep important content visible:
/*
OG Image Safe Zone Guidelines (1200x630px canvas):
┌─────────────────────────────────────────┐
│ Avoid this area (60px) │ ← Top margin
│ ┌───────────────────────────────────┐ │
│ │ │ │
│ │ SAFE ZONE FOR ALL │ │
│ │ IMPORTANT CONTENT │ │
│ │ │ │
│ │ 1080x510px centered │ │
│ │ (90% of width, 81% of height) │ │
│ │ │ │
│ └───────────────────────────────────┘ │
│ Avoid this area (60px) │ ← Bottom margin
└─────────────────────────────────────────┘
←60px→ ←60px→
WhatsApp crops to center square: 630x630px
Keep logos/faces in center 630x630px region
*/Common Use Cases
- Validating OG images before a content marketing campaign
- Auditing a site migration to ensure all OG images transferred correctly
- Checking dynamically generated OG images for programmatic SEO pages
- Verifying image accessibility with alt text validation
- Testing OG images across multiple platforms simultaneously
Pro Tip
Generate OG images programmatically using Next.js's built-in ImageResponse API or a service like Vercel OG. This ensures every page — including dynamically created content — has a unique, correctly-sized OG image without manually creating images for each page.