AI Card Thumbnail Image Spec: Aspect Ratio, Dimensions, and Citation-Safe Patterns

TL;DR

• Use 1200x630 pixels (1.91:1) as the default thumbnail size; this matches the Open Graph Protocol recommendation and works for Google AI Overviews, ChatGPT cards, and Perplexity.
• Declare the image in three places: an og:image meta tag, a twitter:image meta tag, and an ImageObject inside the page's primary JSON-LD entity.
• Image alt text and a caption that includes the page's primary entity are mandatory; cards without alt text are routinely dropped from AI rich results.
• File format should be JPEG or WebP; PNG is acceptable for diagrams. Keep the file size below 8 MB and ideally under 1 MB for crawl performance.
• Avoid heavy text overlays; AI engines crop or downscale thumbnails and text-heavy images become illegible at card size.

Definition

An AI card thumbnail is the image an AI search engine attaches to a citation when rendering a rich answer card. It is the visual analog of a featured-snippet thumbnail: a single representative image per page, surfaced alongside the cited title and snippet in the answer UI.

The spec covers four declarative surfaces — Open Graph (og:image), Twitter Card (twitter:image), Schema.org ImageObject, and the page's primary entity primaryImageOfPage — plus the image asset itself (dimensions, aspect ratio, format, alt text). All four declaration surfaces should point at the same canonical image URL.

The distinction from a generic hero image is intent. A hero image is for human readers loading the page; an AI card thumbnail is for AI engines attaching imagery to a snippet they may surface without a click. Many pages reuse the hero image as the thumbnail; the spec is what makes that reuse safe.

Why this matters

AI answer cards with thumbnails earn more attention than text-only cards. Across the AI search surfaces (ChatGPT Search, Perplexity, Google AI Overviews, Gemini), cards with imagery are visually dominant and tend to be tapped or expanded preferentially. A page cited without a thumbnail typically gets a generic favicon-sized icon — functionally invisible.

The second motivation is brand recognition. When a thumbnail carries a recognizable element from the page (cover art, logo, diagram), readers identify the source even before reading the publication name. For brand pages, podcasts, courses, and editorial titles, the thumbnail is itself a citation surface.

A third motivation is fallback safety. Engines that can't extract a usable image fall back to OG-derived thumbnails from third-party referrers (e.g., a tweet that linked the page). The fallback image is rarely the publisher's preferred representation. Declaring og:image plus ImageObject removes the fallback path.

How it works

The AI engine extracts thumbnail candidates in priority order: (1) Schema.org ImageObject inside the page's primary entity (Article.image, NewsArticle.image, Product.image, etc.); (2) og:image meta tag; (3) twitter:image meta tag; (4) link rel="image_src"; and as a last resort (5) heuristic image scan of the page body. Engines stop at the first usable candidate.

Usable means: the URL is fetchable, the image meets the engine's minimum size threshold, and the aspect ratio is within an acceptable band. Per Open Graph Protocol's image guidance, 1200x630 is the safe default; ratios outside the 1:1 to 1.91:1 range are typically letterboxed or dropped.

Size thresholds vary by engine. The defensible defaults are: minimum 1200 pixels on the longest edge, minimum 600 pixels on the shortest edge, file size under 8 MB. Below these, engines downsample aggressively or drop the image. Above 8 MB, fetch timeouts become a real risk.

Alt text and caption matter for accessibility and for engine extraction. The alt text should state what is in the image in plain language; the caption (if present) should connect the image to the page's primary entity. Engines use both signals when matching the image to the citation context.

Finally, the image URL itself should be stable and absolute. Relative URLs in og:image are interpreted differently across engines; absolute URLs over HTTPS are universally accepted. Avoid query parameters that change per request — cache-busting parameters break engine-side image deduplication.

Practical application

A five-step authoring checklist for a page-level thumbnail:

1. Produce the asset at 1200x630 pixels in JPEG or WebP. Keep the canonical version under 1 MB after compression; if WebP is used, include a JPEG fallback at the same URL pattern (e.g., card.webp + card.jpg).

1. Declare the image in og:image with absolute HTTPS URL: plus og:image:width, og:image:height, og:image:alt.

1. Mirror the declaration in twitter:image (Twitter and Bing Copilot draw from this surface) and in ImageObject inside the page's primary JSON-LD entity (Article.image, Product.image, etc.).

1. Write alt text that names the primary entity. "Cover art for The Bear, season 3" is extractable; "image" is not. Caption optional but recommended for editorial content.

1. Verify with a card preview tool. The Twitter Card Validator, Facebook Sharing Debugger, and LinkedIn Post Inspector each render the card image as an external scraper would; mismatches between these tools usually indicate an OG / twitter card conflict.

Common mistakes

Placing text on the thumbnail. AI engines crop or scale the thumbnail aggressively; a text overlay that reads at full size is unreadable at card size. If text is required, keep it to a single short line at the largest legible size (typically 60+ pixels of text height at 1200x630).

Using transparent PNGs as the canonical card image. AI engines render thumbnails on a variety of background colors; transparent images become unreadable on dark themes. Use opaque JPEGs or WebPs with the intended background.

Declaring different og:image and ImageObject URLs. When the engine extracts both, the inconsistency triggers a fallback heuristic; the page may end up with no thumbnail at all. Keep the URLs identical.

Forgetting to update the cache-bust query parameter. If the canonical image URL is card.jpg?v=3, future engine refetches use the same URL and may serve a stale cached image to readers. Move version-busting to the path (/v3/card.jpg) or the filename, not the query string.

Serving the thumbnail from a CDN that requires a User-Agent allowlist. AI engines crawl with rotating user agents; allowlist-only CDNs return 403, and the image is dropped from the card.

FAQ

Q: Is 1200x630 still the right default in 2026?

Yes. Open Graph Protocol continues to recommend 1200x630 (1.91:1), and this is the safe default across Facebook, LinkedIn, Twitter, Bing Copilot, ChatGPT cards, and Perplexity. Google AI Overviews accept a wider range of ratios but renders 1.91:1 reliably; engines that prefer square (Discord, some Slack unfurls) crop to a center square, which 1200x630 supports.

Q: Should I provide multiple image sizes?

Yes when bandwidth or rendering performance matters. Declare a primary 1200x630 og:image and add ImageObject entries with explicit width / height for additional sizes (e.g., 600x315 for low-bandwidth surfaces). Keep filenames distinct and URLs absolute.

Q: What about square thumbnails?

Use 1080x1080 or 1200x1200 only when the surface explicitly prefers square (some podcast cards, some social embeds). For the general AI search card surface, prefer 1.91:1; engines crop the square if needed but rarely letterbox.

Q: How does the spec apply to e-commerce product cards?

Product pages should declare the image inside Product schema as Product.image (an ImageObject or array). The og:image should mirror the same canonical product photo. AI shopping cards (Google Shopping in AI Overviews, Perplexity Shopping) extract from Product.image preferentially.

Q: Can I use animated images or short video as the card?

No for the thumbnail surface. The card thumbnail must be a still image. For video content, separately declare a VideoObject with thumbnailUrl pointing at the still; the engine surfaces the still as the card image and links the video as the watch action.

Q: What alt text format works best for AI extraction?

Descriptive, entity-named, single sentence under 125 characters. "Cover art for The Bear, season 3, FX original series" is good; "a chef in a kitchen" is generic. Engines use alt text as a tie-breaker when the image is reused across pages.