Twitter Card and X Image Fallbacks for Missing Social Images

Background

How Twitter Card image resolution actually works

X reads twitter:image first. If that tag is absent or the URL fails, it falls back to og:image. If neither resolves to a valid image, the card renders as a plain text link — no thumbnail, no preview.

The crawler fetches the image at share time, not at page-load time. A 404 from a deleted CDN asset, a missing S3 object, or an incorrect absolute URL will silently break the preview hours or days after the page went live.

The most common failure mode is a relative URL in the meta tag. The Twitter/X crawler does not resolve relative paths. Use absolute https:// URLs or the card will never render correctly.

Dimensions

Twitter card image size requirements and limits

summary_large_image cards require a minimum of 300×157 pixels and support up to 4096×4096. The recommended production size is 1200×628 or 1200×630 — the same as OG images — because most CMS templates share one image field for both.

Images must be under 5MB and in JPG, PNG, GIF, or WebP format. SVG is not supported by the X crawler. If your placeholder service returns SVG by default, request a raster format explicitly by appending a file extension to the URL.

The aspect ratio for summary_large_image should be close to 2:1. Cards outside that ratio get letterboxed or cropped, which makes text-heavy images unreadable.

<!-- Twitter/X Card meta tags with fallback.pics -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://fallback.pics/api/v1/1200x630.jpg?text=Post+Title" />
<meta name="twitter:image:alt" content="Blog post preview for: Post Title" />

<!-- Shared og:image covers LinkedIn, Slack, Discord -->
<meta property="og:image" content="https://fallback.pics/api/v1/1200x630.jpg?text=Post+Title" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Fallback chain

Set a fallback URL when the post image is missing

The safest pattern is to always have a twitter:image value — the real image when one exists, or a deterministic generated URL when it does not. Relying on og:image as an implicit fallback works, but gives you one fewer level of control.

For CMS templates, check whether the featured image field is populated and substitute a generated URL when it is empty. Keep the generated URL deterministic so social preview tools and crawlers cache the same image on repeat visits.

// Next.js / React metadata example
const twitterImage = post.featuredImage
  ? post.featuredImage
  : `https://fallback.pics/api/v1/1200x630.jpg?text=${encodeURIComponent(post.title)}`;

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    images: [twitterImage],
  },
  openGraph: {
    images: [{ url: twitterImage, width: 1200, height: 630 }],
  },
};

Template

Complete meta tag template for Twitter and X

Put twitter:card first. Some parsers short-circuit after reading that declaration, and a missing or misspelled card type causes the rest of the tags to be ignored.

Always set both twitter:image and og:image. Slack, Discord, and LinkedIn use og:image; X uses twitter:image. Sharing the same resolved URL for both reduces the number of distinct cache entries and CDN origin hits.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Post Title" />
<meta name="twitter:description" content="Under 200 characters." />
<meta name="twitter:image" content="https://fallback.pics/api/v1/1200x630.jpg?text=Your+Post+Title" />
<meta name="twitter:image:alt" content="Decorative blog preview: Your Post Title" />

<meta property="og:title" content="Your Post Title" />
<meta property="og:description" content="Your post description." />
<meta property="og:image" content="https://fallback.pics/api/v1/1200x630.jpg?text=Your+Post+Title" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Testing

Validate cards before publishing

Use the X Card Validator at cards-dev.twitter.com to preview how a URL renders before it is shared. The validator re-fetches meta tags on demand, so it bypasses cached versions — useful for checking freshly deployed changes.

If your URL is behind authentication or only accessible on localhost, the validator will fail. Use a staging URL or a tunnel tool. The crawler cannot reach private network addresses.

Check that your image URL returns a 200 status and the correct Content-Type header. A URL that redirects to an error page with a 200 status still breaks the card because the crawler receives HTML instead of image data.

CMS integration

Add fallbacks in WordPress, Ghost, and headless CMS

In WordPress with Yoast or Rank Math, the OG image field maps directly to the featured image. When the featured image is absent, the plugin renders an empty tag. Override this by adding a filter that substitutes a fallback URL when the field is empty.

In Ghost, the {{og_image}} helper returns an empty string for posts with no feature image. Wrap the tag output in a conditional and supply a generated URL as the else branch.

In headless CMS platforms like Contentful or Sanity, image fields are nullable. Query them with a null-check and compute the fallback URL server-side before the page response is serialized.

{{! Ghost theme — Handlebars }}
<meta name="twitter:image" content="{{#if feature_image}}{{feature_image}}{{else}}https://fallback.pics/api/v1/1200x630.jpg?text={{url_encode title}}{{/if}}" />

Further reading

Social image and OG patterns

The og:image spec and twitter:image fallback behavior share most of the same constraints. The fallback.pics thumbnail route is purpose-built for social-image use cases and produces readable previews with post titles embedded.

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/generate-blog-thumbnails-from-text/