Open Graph Image Size Guide (1200×630) and Fallback URLs
Understand og image size requirements across social platforms and generate fallback URLs from page titles so shared links always display a preview card image.
Open Graph og:image metadata drives the preview card when a URL is shared on Facebook, Twitter, LinkedIn, Discord, and Slack. Getting the og image size right and providing a fallback URL for pages without uploaded images are two of the highest-ROI SEO and sharing improvements you can make.
This guide covers the 1200×630 standard, platform-specific requirements, generating og:image fallback URLs from page titles, and wiring them into HTML meta tags, CMS templates, and framework head components.
The standard
Why 1200×630 is the og image size to target
The Open Graph spec does not mandate a specific image size, but social platforms have converged on 1200×630 pixels as the safe target. Facebook's sharing debugger documentation recommends at least 1200×628. Twitter's card spec specifies 1200×628 minimum for summary_large_image cards. LinkedIn renders best at 1200×627. The 1200×630 target covers all three without cropping.
Images below 600×315 may be displayed at a reduced size or only in a small thumbnail format rather than the full-width card preview. Platforms use the og:image:width and og:image:height meta tags to determine layout before fetching the image, so always include those alongside og:image.
For dynamic pages where the title changes but the layout is static, generating the og:image URL from the title keeps the card visually relevant without manual image uploads for every page.
Platform requirements
Platform-specific og image size differences
Facebook crops og:image to 1200×628 for link shares and shows the full image for large cards. Twitter crops to 600×314 for standard summary cards and 1200×628 for summary_large_image. LinkedIn typically shows 1200×627 for link posts. Discord and Slack both pull the og:image meta tag and render it at their own sizes.
Because different platforms crop differently, keep critical content—title text, brand mark—within a 1080×567 safe zone centered within the 1200×630 frame. The fallback.pics thumbnail route is designed with this in mind: the text zone stays within the safe zone regardless of which style or theme you choose.
Facebook / Meta
1200×628 recommended. Use og:image:width and og:image:height tags. SVG is not accepted; use JPG or WebP.
Twitter / X
summary_large_image: 1200×628 minimum. Add twitter:card, twitter:image meta tags alongside og:image.
1200×627 renders at full width. Square images (1200×1200) also work for direct post images.
Fallback generation
Generating og:image fallback URLs from page titles
The thumbnail route at fallback.pics generates a 1200×630 image from a text parameter. Pass the page title as the text parameter and append .jpg to get a raster output that social crawlers accept. The style and theme parameters control visual decoration.
Use URL encoding for the title parameter. Most frameworks provide a utility for this—encodeURIComponent in JavaScript, urlencode in PHP, urllib.parse.quote in Python. Spaces should be represented as + or %20 in the query string.
<!-- Static HTML og:image fallback -->
<meta property="og:image"
content="https://fallback.pics/api/v1/thumbnail/1200x630.jpg?text=Your+Page+Title&style=soft&theme=purple&label=fallback.pics" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<!-- Twitter card alongside og -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image"
content="https://fallback.pics/api/v1/thumbnail/1200x630.jpg?text=Your+Page+Title&style=soft&theme=purple" />Framework integration
Adding og:image fallback in React, Next.js, and Astro
In Next.js, use the metadata API to define og:image per page or as a default. In the openGraph object, set images to an array containing the fallback URL when the real image is absent. The fallback URL can be computed from the page title using encodeURIComponent.
In Astro, add the meta tags directly to the Layout component's head slot using a conditional expression. If the passed ogImage prop is empty, compute the fallback URL from the title prop. In React with React Helmet or similar, the same conditional logic applies in the component JSX.
// Next.js app router – generateMetadata
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
const ogImage = post.featuredImage
?? `https://fallback.pics/api/v1/thumbnail/1200x630.jpg?text=${encodeURIComponent(post.title)}&style=soft&theme=purple`;
return {
openGraph: {
images: [{ url: ogImage, width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
images: [ogImage],
},
};
}Caching
Cache-friendly og:image URLs for CDN performance
Generated og:image URLs are deterministic for the same title and parameters, so social platforms that cache preview cards will get a cache hit on repeated shares of the same URL. The URL should be stable—avoid including timestamps, random seeds, or session identifiers in the og:image URL.
Social platforms crawl og:image on first share and cache the result. If you update a page's title and want the social card to reflect the change, you need to manually invalidate the cache using the platform's sharing debugger tool. Facebook has a Sharing Debugger at developers.facebook.com/tools/debug; Twitter has a Card Validator.
Validation
Testing og:image fallback URLs before publishing
Before going live, paste the page URL into each platform's debugging tool. Facebook's Sharing Debugger shows exactly what the card will look like and flags missing dimensions, wrong content types, or broken image URLs. Twitter's Card Validator works similarly.
Check that the og:image URL returns a 200 response, has the correct Content-Type header (image/jpeg or image/png), and matches the declared width and height. Fallback.pics URLs include proper Content-Type headers and serve the exact declared dimensions.
Key takeaways
What to standardize before shipping
- Target 1200×630 for og:image to satisfy Facebook, Twitter, LinkedIn, and Discord without cropping.
- Always include og:image:width and og:image:height tags so platforms know the dimensions before fetching.
- Append .jpg to the thumbnail route dimensions segment to get a raster image accepted by all social crawlers.
- Keep dynamic og:image URLs deterministic—avoid timestamps or random values that break CDN caching.
- Validate generated og:image URLs with the Facebook Sharing Debugger and Twitter Card Validator before launch.
Production fallback layer
Use fallback.pics anywhere an image URL is accepted.
Start with one deterministic URL and standardize fallback behavior across your design system.
Continue reading
Related articles
OG Image Placeholders for Blogs, Docs, and Social Sharing
Use generated OG image placeholders for blog posts, documentation pages, changelogs, and social previews while final artwork is unavailable.
Generate Blog Thumbnails from Text When Featured Images Are Missing
Use fallback.pics thumbnail URLs to generate blog featured images from post titles, category labels, themes, and safe-zone background styles.
How Broken Images Hurt SEO (and Fix Them with Fallback URLs)
Understand how broken images seo impact affects crawling, Core Web Vitals CLS, and structured data. Fix broken images with onerror fallback URLs before they cost you rankings.