SEO On-Page: Twitter Cards

X (Twitter) のリンクプレビューのための Twitter Card メタタグの実装をガイドします。Twitter はTwitter固有のタグが不足している場合は Open Graph にフォールバックします。最良の結果を得るため、両方を追加してください。

呼び出し時: 初回使用時、必要に応じてこのスキルの内容と重要性について 1～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	最大 70 文字；簡潔なタイトル
twitter:description	最大 200 文字；概要
twitter:image	絶対 URL；ページごとにユニーク
twitter:site	ウェブサイトの @ユーザー名
twitter:creator	コンテンツ作成者の @ユーザー名
twitter:image:alt	代替テキスト；最大 420 文字；アクセシビリティ

画像の要件

項目	ガイドライン
アスペクト比	2:1
最小	300×157 px
推奨	1200×675 px
最大	4096×4096 px
ファイルサイズ	5MB 未満
形式	JPG、PNG、WebP、GIF（最初のフレームのみ）；SVG は非対応

よくある間違い

• Twitter Card タグがない（タグなしでは Twitter が画像を正常に表示しません）
• 相対 URL ではなく絶対 https:// 画像 URL を使用していない
• 画像が小さすぎる、またはアスペクト比が間違っている
• タイトル・説明が長すぎる（切り詰められます）

実装

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">

テスト

• X (Twitter): Card Validator

関連スキル

• social-share-generator: シェアボタンは、ユーザーが共有するときに Twitter Cards を使用して X プレビューを表示します。シェアボタンが適切なプレビューを表示するにはカードが設定されている必要があります
• open-graph: OG タグ；Twitter はTwitter タグが不足している場合 OG にフォールバックします
• title-tag: タイトルタグは多くの場合 twitter:title と同じです
• meta-description: メタ説明は多くの場合 twitter:description と同じです
• page-metadata: Hreflang、その他のメタタグ
• twitter-x-posts: X ポストのコピーと エンゲージメント（リンクプレビューとは異なります）