x-image-cards

X カード

マーケティングバナーではなく、画像のように見える X カードを作成します。ビジュアルそのものをコンテンツにしましょう。X のカード UI には、タイトルと説明がすでに表示されます。

X 固有の要件

仕様	値	理由
寸法	2400×1200（物理サイズ、1200×600 論理サイズ）	Retina ディスプレイ向けに 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 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" />

動的生成

2 倍のスケールとセーフマージンを指定して、@vercel/og を使用します。

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 画像を用意する方法は 2 つあります。

オンデマンド生成

クローラーが画像をリクエストしたときに生成します。

/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（Retina 向けに 2 倍）
• アスペクト比 2:1
• 50-56px のセーフマージン
• コントラストの高い色
• URL に .png 拡張子を使用
• og:title にゼロ幅スペースを使用
• テスト：https://cards-dev.twitter.com/validator

---

BondTerminal 向けに構築されています。実際の動作はこちらをご覧ください：X の投稿例。