X Image Cards 是一套面向 X/Twitter 社交卡片的创建规范与实现指南，核心目标是让卡片看起来像图片本身，而不是营销横幅。它的设计理念是让视觉成为内容主体，因为 X 卡片界面本身已经会展示页面的标题和描述，因此图片不需要再重复这些信息。
【用途】 该技能用于在网页中配置 X/Twitter 分享卡片（OG 图片），适用于被要求“create OG images”“set up X cards”“make social cards”等场景。
【X 平台专属要求】 资料给出了明确的规格表：
- 尺寸：2400×1200 物理像素（1200×600 逻辑像素），采用 2x 以适配视网膜屏，宽高比为 2:1。
- 安全边距：在 1x 下留 50-56px 内边距，因为 X 在移动端会裁切边缘。
- URL 格式：使用 /og/page.png 而非 /og/page?format=png，X 更偏好显式扩展名。
- 颜色：以 #FFFFFF 为主色，避免使用过于细微的灰色，因为缩略图很小。
【零宽空格技巧】 X 会把 og:title 作为白色文字叠加在图片上。可以用零宽空格将其隐藏： <meta property="og:title" content="" /> 在 JSX 中写作：content={"\u200B"} 页面的 <title> 仍保持描述性以利于 SEO，只有 og:title 使用该技巧。
【Meta 标签】 资料提供了完整的 meta 标签示例，包括 og:image、og:image:width、og:image:height、og:title（零宽空格）、twitter:card 设为 summary_large_image，以及 twitter:image。
【动态生成】 使用 @vercel/og 并配合 2x 缩放与安全边距。示例代码定义了 OG_SCALE = 2，通过 ImageResponse 返回图片，容器设置 backgroundColor 为 #0a0f1c，padding 为 100（即 50px × 2 的安全边距），输出尺寸为 1200×2 与 600×2。
【Express 集成】 资料给出 Express 路由示例：app.get('/og/:slug.png', ...)，生成 ImageResponse 后转为 arrayBuffer，设置 Content-Type 为 image/png，Cache-Control 为 public, max-age=86400，再以 Buffer 形式发送。
【动态路由（可选）】 针对逐页 OG 图片，资料给出两种方案：
- 按需生成：在爬虫请求图片时生成（/og/[slug].png）。风险是 X 爬虫约 5 秒后超时，冷启动可能超过该时间，导致预览空白。
- 预生成（推荐）：在内容创建时生成并存储图片（如以 BYTEA 存入数据库），请求时即时响应。资料认为预生成能确保爬虫获得即时响应。
【检查清单】 资料附有上线前检查清单：2400×1200（2x 视网膜）、2:1 宽高比、50-56px 安全边距、高对比度颜色、URL 带 .png 扩展名、og:title 含零宽空格，并使用 https://cards-dev.twitter.com/validator 进行测试。
【适用场景与限制】 适用于需要为网页配置 X/Twitter 分享卡片的开发者，尤其是使用 Next.js 或 Express 的项目。资料未提供关于收费、价格、平台支持范围或具体效果保证的信息。