---
title: "Twitter Cardとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "X（旧Twitter）でURLを共有した際にカード表示を生成するTwitter Cardの基本と、AIで作った静的HTMLへの設定方法を解説。OGPとの違いや確認手順も説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-twitter-card-html-share"
markdown: "https://giga-site.com/articles/what-is-twitter-card-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Twitter Cardとは？HTML共有・AI生成サイトでの意味をやさしく解説
X（旧Twitter）でURLを投稿したとき、画像やタイトルが展開されるカード表示を実現するのがTwitter Cardです。Open Graphと似た仕組みですが、X専用のmetaタグをに追加する必要があります。AI生成サイトをXで拡散させたい場合や、担当者がX上でURLを共有するケースでは設定しておく価値があります。
> Source HTML: https://giga-site.com/articles/what-is-twitter-card-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
Twitter Cardは、X（旧Twitter）のタイムライン上でURLをカード形式で表示するための仕様です。、、、の4タグが基本セットです。twitter:cardの値にsummary_large_imageを指定すると横長の大きな画像が表示され、summaryにすると小さいアイコン付きカードになります。
XはOGPタグも読み取るため、og:titleやog:imageが既に設定されていれば、twitter:titleやtwitter:imageを省略してもカードが表示される場合があります。ただし、twitter:card（表示スタイルの指定）だけはOGPに相当するタグが存在しないため、このタグだけは必ず独立して記述する必要があります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
AIで生成したサービスLPや実績紹介ページをXでシェアするキャンペーンを予定している場合、Twitter Cardの設定は必須級の対応です。summary_large_imageを設定したURLはタイムライン上で目立つため、クリックスルー率がテキストのみのツイートと比べて大きく上がることがあります。
社内限定のプレビューURLをチームのX DM（ダイレクトメッセージ）で共有するケースでも、カードが表示されることでリンクの内容が即座に伝わります。ただし、DMのカードプレビューはXのサーバーがURLにアクセスして取得するため、パスワード保護されたプレビューURLではカードが生成されないことに注意してください。
## よくある誤解
「Twitter Cardを設定したのに大きな画像が表示されない」という問題の多くは、twitter:cardの値をsummaryのままにしていることが原因です。大きな画像を表示するにはtwitter:cardをsummary_large_imageに変更する必要があります。OGPのog:imageだけ設定してtwitter:cardを省略すると、Xがデフォルトのsummary（小さいカード）で表示します。
「X Developer Portalでの登録が必要」と思っている人がいますが、2023年以降は登録不要になっています。以前はCard Validatorでの承認が必要でしたが、現在はmetaタグを正しく記述すれば自動的にカードが有効になります。
## 安全に使うための注意点
twitter:imageに指定する画像ファイルには著作権の確認が必要です。AI画像生成ツールで作成した画像は生成ツールの利用規約によって商用利用やSNS投稿が制限される場合があります。公開用のTwitter Cardに使う画像は、利用規約を確認した上で使用してください。
twitter:imageの画像サイズが小さすぎる（600px未満）とXがカード表示を拒否することがあります。最低600×314px、推奨は1200×628pxです。AIで生成した低解像度のサムネイルをそのまま指定するとカードが表示されないため、画像の縦横サイズを事前に確認してください。Card Validatorの廃止後は、Xに実際に投稿してプレビュー確認するか、外部のOGPチェックツールで代替確認をします。
## よくある質問
### OGPとTwitter Cardを両方設定するとどちらが優先されますか？
X上ではTwitter Cardのタグが優先されます。twitter:titleが設定されていればog:titleは無視されます。他のSNSやSlackではOGPが読まれるため、両方設定して用途別に最適化するのが理想的です。
### Twitter Cardの画像はどの形式（JPG/PNG/WebP）が使えますか？
JPG・PNG・WebP・GIFが対応形式です。ファイルサイズは5MB以下が推奨されています。WebPは対応しているものの一部環境で表示されないことがあるため、JPGかPNGを使うのが最も安全です。
### Xのカード表示を確認するためのツールはありますか？
公式のCard Validatorが廃止されたため、現在はopengraph.xyzやmetatags.ioなどの外部OGPチェックツールで代替確認できます。または実際にXで下書き投稿のプレビューを確認する方法が最も確実です。
## 関連記事
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Twitter Cardとは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "X（旧Twitter）でURLを共有した際にカード表示を生成するTwitter Cardの基本と、AIで作った静的HTMLへの設定方法を解説。OGPとの違いや確認手順も説明します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-twitter-card-html-share",
"url": "https://giga-site.com/articles/what-is-twitter-card-html-share",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "用語解説",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "OGPとTwitter Cardを両方設定するとどちらが優先されますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "X上ではTwitter Cardのタグが優先されます。twitter:titleが設定されていればog:titleは無視されます。他のSNSやSlackではOGPが読まれるため、両方設定して用途別に最適化するのが理想的です。"
}
},
{
"@type": "Question",
"name": "Twitter Cardの画像はどの形式（JPG/PNG/WebP）が使えますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "JPG・PNG・WebP・GIFが対応形式です。ファイルサイズは5MB以下が推奨されています。WebPは対応しているものの一部環境で表示されないことがあるため、JPGかPNGを使うのが最も安全です。"
}
},
{
"@type": "Question",
"name": "Xのカード表示を確認するためのツールはありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "公式のCard Validatorが廃止されたため、現在はopengraph.xyzやmetatags.ioなどの外部OGPチェックツールで代替確認できます。または実際にXで下書き投稿のプレビューを確認する方法が最も確実です。"
}
}
]
}
```