Facebook and Meta OG Image Fallback Setup Checklist

Requirements

Facebook og image size and format requirements

Facebook's large link preview card requires og:image at 1200×630 pixels or larger at the same 1.91:1 ratio. Images smaller than 600×315 display as a small thumbnail on the left of the link card instead of the large banner format. Images smaller than 200×200 are ignored entirely.

Facebook supports JPEG, PNG, GIF, and WebP. SVG is not supported. Generated SVG placeholder images must be converted to raster format for Facebook. The fallback.pics API returns PNG or JPEG by specifying the format in the URL or via the Accept header. Use .png or .jpg extension to force a specific format.

Facebook's scraper follows up to one redirect. If your og:image URL redirects to a different URL, the scraper follows it. If it redirects again, the scraper gives up. Avoid redirect chains in your og:image URLs.

Meta tags

The complete OG image meta tag set for Facebook compliance

Facebook reads og:image, og:image:url, og:image:width, og:image:height, og:image:alt, og:image:type, and og:image:secure_url. Only og:image is strictly required, but providing width and height lets Facebook display the large card format immediately without fetching the image to determine dimensions.

og:image:secure_url must be an HTTPS URL. If you provide an HTTP URL in og:image, Facebook will accept it but the secure_url fallback is used for HTTPS pages. Always use HTTPS for og:image URLs in 2026.

<!-- Complete OG meta tag set for Facebook, WhatsApp, Instagram -->
<meta property="og:type" content="article" />
<meta property="og:title" content="How to Optimize Lighthouse CI in Monorepos" />
<meta property="og:description" content="A practical guide to running Lighthouse CI..." />
<meta property="og:url" content="https://example.com/blog/lighthouse-ci-monorepos" />

<!-- Primary OG image: use real image URL or fallback -->
<meta property="og:image"
  content="https://fallback.pics/api/v1/thumbnail/1200x630.png
    ?text=How+to+Optimize+Lighthouse+CI+in+Monorepos
    &theme=purple&style=soft&label=example.com" />
<meta property="og:image:secure_url"
  content="https://fallback.pics/api/v1/thumbnail/1200x630.png
    ?text=How+to+Optimize+Lighthouse+CI+in+Monorepos
    &theme=purple&style=soft&label=example.com" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Article: How to Optimize Lighthouse CI in Monorepos" />
<meta property="og:image:type" content="image/png" />

Debugger

Testing with Facebook Sharing Debugger and clearing the cache

Facebook's Sharing Debugger at developers.facebook.com/tools/debug/ fetches your page and shows exactly what the scraper found, including the resolved og:image URL, its dimensions, and any errors. Paste the page URL and click Debug. If the image is missing or the wrong size, the debugger explains why.

Facebook caches og:image for a period after the first scrape. When you update the image URL, use the 'Scrape Again' button in the Sharing Debugger to force a fresh fetch. The cache clears for subsequent organic shares after the re-scrape, but users who shared the link before the re-scrape will see the old cached image.

The debugger also validates og:image for Instagram and WhatsApp sharing, since all three use the same Open Graph protocol. Clearing the Facebook cache clears the preview for all Meta platforms.

WhatsApp

WhatsApp link preview image requirements

WhatsApp reads og:image from the page's meta tags using its own scraper. The scraper runs when a user sends a link in a chat. The preview shows a thumbnail, title, and description. WhatsApp's scraper does not have public documentation on minimum sizes, but in practice the Facebook og:image spec (1200×630 or at minimum 600×315) works for WhatsApp previews.

WhatsApp caches link previews per user device. If a recipient has seen the link before, they see the cached preview. There is no WhatsApp-equivalent of the Facebook Sharing Debugger for cache clearing. The practical approach is to use a URL with a cache-busting parameter if you need the preview to update, though this requires generating a new link.

Site-wide implementation

Generating fallback OG images for every page automatically

Add the og:image generation logic to your site's layout template or metadata component. Pages that have a manually uploaded image use that URL. Pages without one generate a fallback.pics URL from the page title and category. This requires zero per-page work from content contributors.

For static sites generated at build time, compute the fallback URL during the build and embed it as a static meta tag. This avoids any runtime URL generation and means the OG image is present in the initial HTML for all crawlers.

// Astro layout — auto-generate og:image if not provided
---
const { title, ogImage, category = 'Article' } = Astro.props;
const resolvedOgImage = ogImage ??
  `https://fallback.pics/api/v1/thumbnail/1200x630.png` +
  `?text=${encodeURIComponent(title)}` +
  `&label=${encodeURIComponent(category)}` +
  `&theme=purple&style=soft`;
---
<meta property="og:image" content={resolvedOgImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Resources

Facebook documentation and related OG image posts

The full OG image placeholders guide covers article, product, and profile use cases. The Pinterest post covers similar requirements for a different platform.

https://fallback.pics/docs/
https://fallback.pics/placeholder-image-api/
https://fallback.pics/blog/og-image-placeholders-blogs-docs-social-sharing/
https://fallback.pics/blog/pinterest-rich-pin-image-fallbacks/