Twitter/X card image guide: format, crop, and safe area

Choose the card type

The `summary_large_image` card requests a prominent image preview. Confirm the current X developer guidance for supported card types and metadata because platform behavior and requirements can change.

Use a crop-tolerant composition

Build a landscape image with the headline and brand mark inside a central safe area. Keep important copy large enough to read in a feed and avoid placing details at the edges.

Set metadata on the page

Include the relevant Twitter card tags alongside your Open Graph metadata, with a title, description, and absolute image URL that describe the specific page.

Check image access and preview

Ensure the image can be fetched publicly and uses an accepted format and file size. Share or preview the URL with the current platform tools and inspect the result after updating metadata.

Avoid overpromising

Keep the card headline consistent with the linked page. A dramatic claim may attract attention but can lead to a mismatch when someone opens the article.

Use a metadata fallback and inspect the URL

Add Open Graph metadata as a broadly used fallback alongside X card tags, with a specific title, description, and image for the page. Confirm the deployed HTML includes the expected values rather than relying only on a framework configuration file.

Inspect a public production URL after deployment. Localhost pages, authenticated previews, or images blocked from crawlers do not represent what the card fetcher can retrieve.

Diagnose a stale or missing card

Check the response status for the page and image, image dimensions, content type, and crawler access. If the metadata is correct but the old card remains, use the platform’s current cache refresh procedure and allow for a recrawl.

Keep a fallback image in the page metadata so the link still has a useful visual if a campaign-specific asset is removed.

Check the rendered head tags

Inspect the production HTML for `twitter:card`, title, description, and image tags, then confirm the image URL returns an image to an unauthenticated request. Framework metadata can be correct in source while a route override or cache changes the output.

Keep Open Graph values present as well, since other services may use them. Make sure both sets describe the same page and do not point to different campaigns.

Create a reliable update workflow

When replacing an image, deploy the new file and metadata before requesting a cache refresh. If the image URL stays the same, a platform may continue to use its cached copy; use a versioned path when you need a predictable asset update.

Add card validation to the release checklist for pages that receive campaign traffic, and recheck after a title or template change.

Fallbacks for pages without a custom image

Set a site-wide default card image for pages that lack their own asset, then override it on important articles and campaign pages. The fallback should identify the site without falsely suggesting a specific article topic.

Check each route after deployment, especially when metadata is generated from a dynamic template. One shared layout can accidentally reuse the homepage image for every page.

Keep one source of truth for card metadata

Store the title, description, card type, and image URL with the page metadata instead of maintaining separate, conflicting values in several templates. A small route-level check can catch an accidental homepage title on an article page.

After deploying a change, inspect the final HTML and request a fresh card preview. Recheck the public URL rather than assuming a successful build updated the version already cached by the platform.