twitter-cards

SEO オンページ：Twitter Cards

X/Twitter Card の作成と実装ルールを扱います。ページ全体のライフサイクルとリリース検証は page-metadata が担当します。プラットフォームによっては Open Graph のフォールバックが使われるため、価値がある場合にのみ X 固有のコピーを定義します。

呼び出し時：初回は、役立つ場合、このスキルの対象範囲と重要性を1～2文で説明してから、主な出力を提示します。2回目以降、またはユーザーから省略するよう求められた場合は、主な出力に進みます。

対象範囲（ソーシャル共有）

• Twitter Cards：X 固有のメタタグ。X/Twitter でリンクを共有したときの表示を制御します

カードの種類

種類	用途
summary	サムネイル付きの小さなカード
summary_large_image	大きく目立つ画像（推奨：1200×675px）
app	モバイルアプリのプロモーション
player	動画／音声コンテンツ

推奨タグ（summary_large_image）

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@authorusername">
<meta name="twitter:image:alt" content="Alt text for image">

タグ	ガイドライン
twitter:card	必須。ほとんどのページでは summary_large_image を指定します
twitter:title	簡潔なソーシャルタイトル。SEO／OG のコピーと同じページのアイデンティティを保ちますが、文言が完全に同一である必要はありません
twitter:description	裏付けのない主張を含めず、正確な概要を記載します
twitter:image	絶対 URL。ページごとに固有のものを指定します
twitter:site	ウェブサイトの @username
twitter:creator	コンテンツ作成者の @username
twitter:image:alt	代替テキスト。最大420文字。アクセシビリティ向け

画像要件

項目	ガイドライン
アスペクト比	2:1
最小サイズ	300×157 px
推奨	選択したカードに適した高解像度画像を使用し、現在のプラットフォームの挙動を確認します
配信	画像レスポンスが正常に返る絶対 HTTPS URL
形式とサイズ	実装で正確な上限が関係する場合は、最新の X ドキュメントを確認します

よくある間違い

• Twitter Card タグがない（タグがないと、Twitter で画像が正しく表示されません）
• 絶対 https:// URL ではなく相対画像 URL を使用する
• 画像が小さすぎる、またはアスペクト比が正しくない
• タイトル／説明が長すぎる（途中で切り詰められます）
• 共有時の文脈で別の表現が必要な場合でも、SEO のコピーを機械的に流用する
• SEO、OG、X のメタデータ間で、製品のアイデンティティや約束を変える

実装

Next.js（App Router）

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: '...',
    description: '...',
    images: ['https://example.com/twitter.jpg'],
    site: '@yourusername',
    creator: '@authorusername',
  },
};

HTML（汎用）

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:image:alt" content="Alt text">

テスト

デプロイ済みの初期 HTML を調べ、現在の X 製品で利用できる実際の共有／プレビューのワークフローをテストします。提供終了した公開 Card Validator をリリースの合否判定に使用しないでください。プレビューがキャッシュされる場合があることを考慮します。

関連スキル

• social-share-generator：ユーザーが共有するとき、共有ボタンでは X のプレビューに Twitter Cards を使用します。共有ボタンで適切なプレビューを表示するには Cards を設定する必要があります
• open-graph：OG タグ。Twitter タグがない場合、Twitter は OG にフォールバックします
• title-tag、meta-description：検索用コピー。ページのアイデンティティを保ちながら、文言を変えられます
• page-metadata：ライフサイクル全体、信頼できる唯一の情報源となる実装、本番環境での検証
• twitter-x-posts：X の投稿文とエンゲージメント（リンクプレビューとは異なります）
• twitter-card-image-generator：Twitter Card 画像のプログラムによる生成 — 1200×675px、2:1 の比率、プレーヤーカードのポスター、X ユーザーの約40%に向けたダークモード対応、モバイルでの1:1クロップに対応したタイムライン安全領域のデザイン、og-image-generator の6種類すべてのビジュアルスタイル。このスキルでは twitter:image タグの設定方法を扱い、twitter-card-image-generator では画像の作成方法を扱います。