Twitterカードプレビュー
ページのTwitterカードメタタグをプレビュー・生成します
カード設定
0/70文字
0/200文字
70/200のカウンターは編集の目安です。一部の記号は複数文字として数えられます。実際の表示はクライアントによって異なります。
1200 × 628 pxなどの横長画像をお試しください。参考プレビューの画像領域は16:9です。
画像URLはブラウザーから直接読み込まれます。画像のホストはそのリクエストを受信します。
ここに表示するドメインにのみ使用します。@ハンドルはアカウントの帰属を示します。
カードプレビュー
example.com
カードのタイトルをここに表示
カードの説明がここに表示されます。読者の関心を引く魅力的な文章を書いてください。
画像URLを追加するとプレビューできます。
このプレビューは参考例です。実際のX/Twitterのレイアウト、切り抜き、キャッシュされた内容、取得画像は異なる場合があります。
メタタグ
<meta name="twitter:card" content="summary_large_image" />
タグを更新しました。ページのheadに追加し、公開したページを確認してください。
カードの種類ガイド
公開前の確認
- ページの内容を表すタイトルと説明を使用してください。
- 切り抜かれても重要な内容が残る画像を選んでください。
- ページを取得するプラットフォームが画像URLにアクセスできるようにしてください。
- @ハンドルは帰属を示すもので、ウェブサイトのアドレスではありません。
- 公開したページと実際の共有プレビューを確認してください。このエディターはXのカードデータを取得しません。
無料のTwitter/Xカードプレビューツールについて
Twitterカード(現在のXカード)を使うと、ウェブサイトへのリンクを含むツイートにリッチメディアを添付できます。サイトのURLが共有されると、指定したタイトル、説明、画像を使ったプレビューがカードとして自動的に表示されます。このTwitterカードプレビューツールでは、タグを公開する前に、イメージとしてのカードを確認できます。プラットフォーム側での取得、キャッシュ、最終的な表示は検証しません。
このツールは、小さなサムネイル画像をテキストの横に配置するサマリーカードと、タイトルと説明の上に大きなビジュアルを配置する大きな画像付きサマリーカードの2種類の主要なカードに対応しています。内容を入力するとリアルタイムでプレビューされ、そのまま使えるHTMLのメタタグをワンクリックでコピーできます。
リンクプレビューを最適化するソーシャルメディア担当者、Open GraphとTwitterのメタタグを実装する開発者、共有リンクのクリック率を高めたいコンテンツマーケターなど、どなたの作業もこの無料ツールで効率化できます。文字数カウンターと色分けバーは、このエディター独自の70/200という目安を示すものです。現在のプラットフォームでの表示上限を保証するものではありません。
主な機能
- サマリーカードと大きな画像付きサマリーカードの両方のライブプレビュー
- エディターのタイトル(70)と説明(200)の目安に基づく、リアルタイムの文字数カウンターと色分けバー
- カードの種類ごとの推奨サイズのヒント付き画像URL入力
- Twitterでの正しい帰属表示のためのサイトの@ハンドル欄
- ページの<head>セクションにそのまま貼り付けられる、自動生成のHTMLメタタグ
- 生成したメタタグをすべてワンクリックでクリップボードにコピー
- 各形式をどんなときに使うかを示すカードタイプ比較ガイド
- Twitter/Xのカードレイアウトを模したプレビュー(近似表示であり、ピクセル単位で同一ではありません)
- ダークモードとレスポンシブレイアウトに完全対応
- 登録不要で完全無料、利用制限なし
Twitterカードプレビューの使い方
- カードタイプを選択:コンテンツやビジュアルの目的に応じて、サマリー(小さな画像)と大きな画像付きサマリーから選びます。
- タイトルを入力:Twitterのフィードで目を引く、70文字以内の魅力的なタイトルを書きます。
- 説明を追加:クリックしたくなるような、200文字以内の簡潔な説明を作成します。
- 画像URLを指定:カード画像の完全なURLを貼り付けます(大きな画像付きカードには1200x628、サマリーには144x144を推奨)。
- ライブプレビューを確認:カードのプレビューパネルで、Twitter/Xでどのように表示されるかの近似表示を確認します。
- メタタグをコピー:「Copy All Tags」をクリックして生成されたHTMLメタタグをコピーし、ページの<head>セクションに貼り付けます。
活用例
- ソーシャルメディア担当者:コンテンツを共有する前にリンクカードをプレビューして最適化し、エンゲージメントとクリック率を高めます。
- ウェブ開発者:サイト開発中に正しいTwitterカードのメタタグを生成し、公開前に表示を確認します。
- コンテンツマーケター:タイトル、説明、画像のさまざまな組み合わせを試して、共有リンクに最も効果的な組み合わせを見つけます。
- SEOの専門家:技術的なSEO監査の一環として、ソーシャルメタタグが正しく実装されていることを確認します。
- ECチーム:商品ページがTwitter/Xで共有されたときの表示をプレビューし、コンバージョンに向けて最適化します。
- ブログの執筆者:公開前に、記事のプレビューにアイキャッチ画像、タイトル、抜粋が正しく表示されることを確認します。
- 広報・コミュニケーション担当者:報道機関に配布する前に、プレスリリースや告知のリンクプレビューを確認します。
よくある質問
このツールは無料ですか？
はい、Twitterカードプレビューツールは完全に無料で、登録や利用制限はありません。
データは安全ですか?
プレビューの表示とタグの生成は、お使いのブラウザー上で行われます。タイトルや説明が当社のサーバーに送信されることはありません。画像URLを読み込むと、ブラウザーからその画像のホストへリクエストが送られます。
推奨される画像サイズはどれくらいですか?
小さなカードには正方形の画像、大きなカードには横長の画像を使います。エディターが例として示すサイズは144×144ピクセルと1200×628ピクセルです。これらは現在のプラットフォームのファイル形式、サイズ、取得に関する要件を検証するものではありません。公開後の共有プレビューで画像を確認してください。
Twitterカードとオープングラフ(OG)タグの両方が必要ですか?
Open GraphとTwitter固有のメタデータは、どちらもソーシャルプレビューを記述するものです。対象とするプラットフォームが必要とするタグを実装し、公開後の結果を確認してください。このエディターは、フォールバック時の動作の確認や、表示を完全に制御できることの保証はしません。
メタタグを変更してもカードが更新されないのはなぜですか?
プラットフォーム側が、以前に取得したメタデータや画像を保持している場合があります。公開中のページと画像のURLに変更が反映されていることを確認したうえで、実際の共有プレビューを確認してください。このエディターはXのキャッシュを調べたり消去したりすることはできず、更新までの間隔やクエリ文字列を使った回避策を保証することもできません。
このプレビューは実際のTwitterの表示と完全に一致しますか?
これはイメージとしてのプレビューです。クライアントのレイアウト、切り抜き、キャッシュされたデータ、画像の取得状況によって、結果が大きく異なる場合があります。公開したページの実際の共有プレビューを確認してください。
ヒントとベストプラクティス
- タイトルは70文字以内にする:それより長いタイトルはカードのプレビューで切り詰められ、伝えたい要点が失われます。
- 行動を促す説明を書く:クリックしたくなる表現を使い、200文字以内に収めます。
- 高品質な画像を使う:ぼやけた画像や低解像度の画像は、信頼感とエンゲージメントを下げます。必ず推奨サイズを使ってください。
- サイトの@ハンドルを含める:正しい帰属表示になり、リンクが共有されたときにアカウントの認知度が高まる可能性があります。
- 公開前にテストする:このツールでカードをプレビューしたら、URLをXの投稿作成画面に貼り付けて、投稿前に実際のカードを確認します。
- OGタグとTwitterタグの両方を実装する:Open Graphタグを基本とし、プラットフォーム固有のカスタマイズにはTwitterカードのタグを使います。