Twitter Card Preview and Open Graph on X

Twitter Card preview settings are often discussed as "Twitter OGP" or "X OGP" in day-to-day web work, but the precise system is not Open Graph itself. X link previews are based on Twitter Cards, now X Cards, with support for falling back to Open Graph tags. That distinction matters because the metadata and the final interface are controlled by different layers.

Open Graph became the shared base

Open Graph is a metadata protocol for describing a web page as a rich object. The basic properties are og:title, og:type, og:image, and og:url, with fields such as og:description and og:site_name commonly added. It began around Facebook, but it is now the practical baseline for link previews across social platforms, chat apps, and internal tools.

Twitter Cards arrived before X

Twitter announced Twitter Cards on June 14, 2012 as part of the expanded Tweet experience. The feature let publisher websites add simple HTML tags so links could show summaries, images, videos, and richer context inside Twitter.

The main Twitter Card types used in production are Summary, Summary with Large Image, App, and Player. Older types such as Photo Card, Gallery Card, and Product Card have been deprecated or mapped toward Summary Card with Large Image. In practice, the system has become less about many visual formats and more about a small set of durable preview shapes.

How twitter:* and og:* work together

X Cards look first for Twitter-specific tags such as twitter:title, twitter:description, and twitter:image. If those are not present, the card processor can fall back to supported Open Graph properties such as og:title, og:description, and og:image. This is why pages with only Open Graph tags can still generate a preview on X.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page title for X" />
<meta name="twitter:description" content="Short description for X." />
<meta name="twitter:image" content="https://example.com/ogp.png" />

<meta property="og:title" content="Page title" />
<meta property="og:description" content="Short description." />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:url" content="https://example.com/page" />

Image ratios do not fully line up

A common Open Graph image target is 1200×630px, which is about 1.91:1. X Summary Card with Large Image documentation points to a 2:1 image ratio. Actual presentation can still differ across web, iOS, Android, and experiments, so one image cannot be perfectly faithful everywhere. The safer production rule is to keep critical information centered and make sure the image still works after light cropping.

Since 2023, UI changes matter more

In October 2023, X changed article link previews so headlines were no longer shown in the usual way, according to AP reporting. In January 2024, Axios reported that headlines appeared to return temporarily or differently depending on the platform. The important lesson is that valid metadata does not guarantee a fixed visual result. Platform UI, experiments, and cache behavior can change the final card.

Twitter Card preview checklist

• Set og:title, og:description, og:image, and og:url first
• Use twitter:card with summary_large_image when you want the large X preview format
• Add twitter:title, twitter:description, or twitter:image only when X needs different values
• Design the image so it survives both 1.91:1 and 2:1 crops
• Make sure Twitterbot and social crawlers can fetch the page and image
• Treat any preview UI as an approximation, not a contract

Use the TOOLPOOL OGP Checker as a production check for Twitter Card and Open Graph metadata. It helps verify titles, descriptions, image URLs, and likely preview candidates, while the final X or Facebook interface can still change independently from your HTML.