x-image-cards

X 图片卡片

创建看起来像图片而非营销横幅的 X 卡片。让视觉内容本身成为内容——X 已经会在卡片界面中显示标题和描述。

X 特定要求

规格	值	原因
尺寸	2400×1200 物理像素（1200×600 逻辑像素）	2 倍视网膜屏分辨率，2:1 宽高比
安全边距	50-56px 内边距（按 1 倍计）	X 会在移动设备上裁切边缘
URL 格式	/og/page.png，而非 /og/page?format=png	X 更偏好显式扩展名
颜色	#FFFFFF 为主色，避免使用不明显的灰色	缩略图尺寸很小

零宽空格技巧

X 会将 og:title 以白色文字叠加在图片上。使用零宽空格将其隐藏：

<meta property="og:title" content="&#8203;" />

在 JSX 中：content={"\u200B"}

页面的 <title> 仍应具有描述性，以利于 SEO——只有 og:title 使用此技巧。

Meta 标签

<meta property="og:image" content="https://example.com/og/page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:title" content="&#8203;" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/page.png" />

动态生成

使用 @vercel/og，设置 2 倍缩放和安全边距：

import { ImageResponse } from '@vercel/og';

const OG_SCALE = 2;

export async function GET(request: Request) {
  return new ImageResponse(
    (
      <div style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        backgroundColor: '#0a0f1c',
        padding: 100, // 50px * 2 for safe margins
      }}>
        {/* Your visual content here */}
      </div>
    ),
    { width: 1200 * OG_SCALE, height: 600 * OG_SCALE }
  );
}

Express

app.get('/og/:slug.png', async (req, res) => {
  const image = new ImageResponse(/* ... */);
  const buffer = await image.arrayBuffer();

  res.setHeader('Content-Type', 'image/png');
  res.setHeader('Cache-Control', 'public, max-age=86400');
  res.send(Buffer.from(buffer));
});

动态路由（可选）

对于每个页面各自的 OG 图片，有两种方法：

按需生成

在爬虫请求图片时生成：

/og/[slug].png  →  generates image on request

风险： X 爬虫会在约 5 秒后超时。冷启动可能超过此时间，导致预览空白。

预先生成（推荐）

在创建内容时生成并存储图片：

// On content creation
const imageBuffer = await generateOgImage(data);
await db.insert({ ogImageData: imageBuffer }); // Store as BYTEA

// On request - instant response
app.get('/og/:id.png', (req, res) => {
  const { ogImageData } = await db.get(req.params.id);
  res.setHeader('Content-Type', 'image/png');
  res.send(ogImageData);
});

预先生成可确保爬虫获得即时响应。

检查清单

• 2400×1200（2 倍视网膜屏分辨率）
• 2:1 宽高比
• 50-56px 安全边距
• 高对比度颜色
• URL 中包含 .png 扩展名
• og:title 中使用零宽空格
• 测试：https://cards-dev.twitter.com/validator

---

为 BondTerminal 打造。查看实际效果：X 帖子示例。