過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>ツイート（X 投稿）に URL を貼ると<strong>画像付きカード</strong>で表示されるのは、<strong>Twitter カード（X カード）</strong>の仕組み</li><li>リンク先ページの <code><head></code> に <strong>twitter:card</strong> / <strong>og:image</strong> 等のメタタグを設置するだけで自動で展開される</li><li>カードの種類は <code>summary</code>（小サイズ）と <code>summary_large_image</code>（大サイズ）の<strong>2 種</strong>が主流</li><li>X 側は <strong>Open Graph タグ</strong>（<code>og:title</code> / <code>og:description</code> / <code>og:image</code>）を fallback として読むため <strong>og:* 系も必須</strong></li><li>実装後は <strong>X Card Validator</strong>（旧 Card Validator）でプレビュー検証＋キャッシュ更新が可能</li></ul></td></tr></table>
<h2>Twitter カード（X カード）とは</h2>

<p>ツイートに URL を貼ったときに、URL の下に<strong>画像 + タイトル + 説明</strong>が表示される<strong>カード形式のリッチプレビュー</strong>を <strong>Twitter カード</strong>（現 <strong>X カード</strong>）と呼びます。クリック率を大きく押し上げる重要な仕組みで、Web ページ側で<strong>メタタグを仕込むだけ</strong>で自動的に展開されます。</p>

<h2>カードの種類</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>card 値</th><th>サイズ</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code>summary</code></td><td>小（正方形サムネ）</td><td>記事 / 商品ページ。コンパクトに表示</td></tr>
<tr><td><code>summary_large_image</code></td><td>大（横長 16:9）</td><td>画像が主役のコンテンツ。<strong>クリック率が高い</strong>主流形式</td></tr>
<tr><td><code>player</code></td><td>動画埋込</td><td>音声 / 動画プレイヤー（要審査）</td></tr>
<tr><td><code>app</code></td><td>アプリ訴求</td><td>iOS / Android アプリへの誘導</td></tr>
</tbody>
</table>

<h2>最小実装（summary_large_image）</h2>

<p>リンク先ページの <code><head></code> に以下のメタタグを書きます。<strong>twitter:* と og:* を両方</strong>用意するのが安全です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- カード種別 -->
<meta name="twitter:card" content="summary_large_image">

<!-- 自サイトの X アカウント (任意だが推奨) -->
<meta name="twitter:site" content="@your_account">

<!-- 記事執筆者の X アカウント (任意) -->
<meta name="twitter:creator" content="@author_account">

<!-- Open Graph 系 (X は og:* を fallback として読む) -->
<meta property="og:url"         content="https://example.com/article/123">
<meta property="og:title"       content="記事のタイトル">
<meta property="og:description" content="記事の説明（120字程度）">
<meta property="og:image"       content="https://example.com/img/og.jpg">
<meta property="og:type"        content="article"></code></pre>
<h2>各メタタグの意味</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>タグ</th><th>意味</th><th>備考</th></tr></thead>
<tbody>
<tr><td><code>twitter:card</code></td><td>カード種別</td><td>必須。<code>summary</code> / <code>summary_large_image</code> など</td></tr>
<tr><td><code>twitter:site</code></td><td>掲載サイトの X アカウント</td><td><code>@</code> 始まり</td></tr>
<tr><td><code>twitter:creator</code></td><td>記事著者の X アカウント</td><td><code>@</code> 始まり</td></tr>
<tr><td><code>og:url</code></td><td>正規 URL</td><td>必須相当</td></tr>
<tr><td><code>og:title</code></td><td>タイトル</td><td>必須相当</td></tr>
<tr><td><code>og:description</code></td><td>説明</td><td>120 字前後推奨</td></tr>
<tr><td><code>og:image</code></td><td>カード画像 URL</td><td><strong>https の絶対 URL</strong> / 1200x630 推奨</td></tr>
<tr><td><code>og:type</code></td><td>コンテンツ種別</td><td><code>article</code> / <code>website</code> / <code>product</code></td></tr>
</tbody>
</table>

<h2>og:image の推奨仕様</h2>

<ul>
<li><strong>1200 x 630 px</strong>（<code>summary_large_image</code> 用）</li>
<li><strong>5 MB 以下</strong>の JPG / PNG / WebP</li>
<li>HTTPS の<strong>絶対 URL</strong>（相対パス不可）</li>
<li><code>summary</code> なら <strong>144 x 144 〜 4096 x 4096</strong>、1:1 推奨</li>
</ul>

<h2>検証手順</h2>

<ol>
<li>X Card Validator（<code>cards-dev.twitter.com/validator</code>）に URL を貼る</li>
<li>カードプレビューが表示されれば OK</li>
<li>画像差し替え後は<strong>キャッシュが残る</strong>ため、Card Validator で再フェッチして反映</li>
<li>X 公式アプリ / Web で実際にツイートして最終確認</li>
</ol>

<h2>つまずきやすいポイント</h2>

<ul>
<li><code>og:image</code> が<strong>相対パス</strong>になっている → 必ず <code>https://...</code> の絶対 URL</li>
<li>画像が<strong>5 MB 超</strong> / <strong>HTTPS 以外</strong> → カードが表示されない</li>
<li>ページが <strong>noindex / 認証必須 / robots.txt で拒否</strong> → クローラーが読めず表示されない</li>
<li>キャッシュが残って<strong>古い画像</strong>が出る → Card Validator で更新</li>
<li>SPA で<strong>クライアントレンダリング</strong>のみ → クローラーは JS を実行しないため、SSR / プリレンダリングが必要</li>
</ul>

<h2>表示確認できるツール</h2>

<p>本番にデプロイする前に、メタタグが意図どおりに認識されているかをツールで確認します。X Card Validator はキャッシュをクリアできる唯一の手段なので、画像を差し替えたあとは必ず最後に通します。</p>

<ul>
<li><strong>X Card Validator</strong> — X 公式。カード種別とプレビューを確認、キャッシュ更新も可能</li>
<li><strong>Facebook Sharing Debugger</strong> — OGP の検証。Facebook / Instagram 経由のリンクに必須</li>
<li><strong>LinkedIn Post Inspector</strong> — LinkedIn 用の OGP プレビュー</li>
<li><strong>OGP テスター</strong> — 各国の有志ツール。複数 SNS のプレビューを一括確認</li>
</ul>

<h2>カードのテキスト長</h2>

<p>X 側で表示されるテキストには長さの上限があり、超過分は省略表示になります。設計時は以下を目安にメタタグを整えると、PC・モバイル両方で意図どおりに見せられます。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>項目</th><th>推奨長さ</th><th>備考</th></tr></thead>
<tbody>
<tr><td><code>og:title</code></td><td>全角 30 字程度</td><td>カードのタイトル行。50 字超は省略される</td></tr>
<tr><td><code>og:description</code></td><td>全角 60〜80 字</td><td>2 行表示が標準。詰め込み過ぎない</td></tr>
<tr><td><code>twitter:site</code></td><td><code>@</code> 始まり 15 字以内</td><td>X のユーザ名規約に従う</td></tr>
<tr><td><code>og:image</code> ファイル名</td><td>英数字推奨</td><td>日本語ファイル名はサーバ・キャッシュで化けることがある</td></tr>
</tbody>
</table>

<h2>OGP との関係</h2>

<p>Twitter カードは X 専用の仕様ですが、<strong>Open Graph Protocol</strong>（<code>og:*</code>）は <strong>Facebook / LinkedIn / Slack / Discord</strong> など他の SNS でも共通で使われます。<strong>og:* を必ず設置 + twitter:card と twitter:site のみ追記</strong>すれば、ほぼすべての SNS でリッチプレビューが出ます。</p>

<h2>まとめ</h2>

<ol>
<li>リンク先 <code><head></code> に <code>twitter:card</code> と <code>og:*</code> を仕込む</li>
<li>画像は <strong>1200 x 630 / HTTPS 絶対 URL / 5 MB 以下</strong></li>
<li>Card Validator で検証 + キャッシュ更新</li>
<li>あとは普段どおり URL を貼ってツイートするだけ</li>
</ol>

<h2>関連</h2>

<ul>
<li>OGP（Open Graph Protocol）— SNS 共通のメタタグ仕様</li>
<li>meta要素 — HTML のメタ情報</li>
<li>SEO — 検索エンジン最適化</li>
<li>SNS シェアボタン — 投稿フォームへのリンク</li>
</ul>