本文へスキップ

ツイッターカード(Twitter Card)とは?

image

定義​

ツイッターカード(Twitter Card)は、Twitter(現在はXに名称変更)でリンクを共有する際に豊富なメディア体験を提供するためのメタデータシステムです。通常、ツイートにURLを含めると単純なリンクのみが表示されますが、ツイッターカードを設定すると、画像、タイトル、説明が含まれた視覚的に魅力的なカード形式で表示されます。

ツイッターカードは、HTML文書の<head>セクションに<meta name="twitter:xxx">形式のタグで実装されます。オープングラフ(Open Graph)と似ていますが、Twitterプラットフォームに特化した機能を提供します。Twitterは4つの主要なカードタイプをサポートしており、それぞれ異なる用途とレイアウトを持っています: Summary Card(要約カード)、Summary Card with Large Image(大きな画像付き要約カード)、App Card(アプリカード)、Player Card(プレーヤーカード)。

ツイッターカードを正しく設定すると、リンクのクリック率が大幅に向上します。研究によると、画像を含むツイートはテキストのみのツイートより最大150%高いリツイート率を示します。特にニュースメディア、ブログ、Eコマースサイトでは、ツイッターカードは必須のマーケティングツールとなっています。ツイッターカードがなければ、あなたのリンクはタイムラインで簡単に見逃される可能性があります。

特徴​

  • 多様なカードタイプ: Summary、Summary with Large Image、App、Playerなど、コンテンツタイプに応じて適切なカードを選択できます。各タイプは異なるレイアウトと機能を提供します。
  • 高いエンゲージメント: ツイッターカードが適用されたリンクは、通常のリンクよりクリック率とリツイート率が2〜3倍高くなります。視覚的要素がユーザーの注目を引くためです。
  • オープングラフと互換: ツイッターカードタグがない場合、Twitterはオープングラフタグを代わりに使用します。ただし、最適な結果を得るためにはツイッターカード専用タグを使用するのが良いです。
  • 検証ツール提供: TwitterはCard Validatorという公式ツールを提供して、カードが正しく表示されるかを事前に確認できます。
  • リッチメディアサポート: Player Cardを使用すると、動画とオーディオをTwitterタイムラインで直接再生できるため、ユーザー体験が大幅に向上します。

活用方法​

ツイッターカードを効果的に実装および活用する方法は以下の通りです。

ステップ1: カードタイプの選択 コンテンツの性質に合ったツイッターカードタイプを選択します。ブログ記事やニュース記事は、ほとんどの場合Summary Card with Large Imageが最も効果的です。商品ページやポートフォリオも大きな画像カードが良いです。動画コンテンツはPlayer Card、モバイルアプリプロモーションはApp Cardを使用してください。

ステップ2: 基本ツイッターカードタグの追加 Webページの<head>セクションにツイッターカードメタタグを追加します。最低限twitter:card、twitter:title、twitter:description、twitter:imageの4つは必ず含める必要があります。

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="ブログSEO完全ガイド">
  <meta name="twitter:description" content="検索順位を上げる実戦SEO戦略">
  <meta name="twitter:image" content="https://example.com/seo-guide.jpg">
</head>

ステップ3: 追加情報タグの含む サイトまたは作成者のTwitterアカウントを追加すると、カードに表示されフォロワーを増やすことができます。twitter:siteはWebサイトのTwitterアカウントで、twitter:creatorはコンテンツ作成者のアカウントです。

<meta name="twitter:site" content="@zerocoke">
<meta name="twitter:creator" content="@tanaka">

ステップ4: 画像の最適化 ツイッターカード画像は非常に重要です。Summary Cardは最小120x120px(1:1比率)、Summary with Large Imageは最小300x157px(2:1比率)が必要です。最適サイズは1200x628pxで、ファイルサイズは5MB以下である必要があります。JPG、PNG、WEBP形式をサポートします。

ステップ5: Card Validatorでテスト Twitter Card Validator(https://cards-dev.twitter.com/validator)にURLを入力して、カードが正しく表示されるかを確認します。エラーがあればすぐに修正して再テストします。プレビューを通じて実際のTwitterでどのように見えるかを確認できます。

ステップ6: オープングラフと併用 Twitterはツイッターカードタグを優先しますが、ない場合はオープングラフタグを使用します。他のソーシャルプラットフォーム最適化のために、オープングラフも一緒に実装するのが良いです。両方を使用しても問題なく、これはベストプラクティスとして推奨されます。

例​

例1: Summary Card with Large Image(最も一般的)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>バックリンク構築戦略ガイド</title>

  <!-- ツイッターカード基本タグ -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@zerocoke">
  <meta name="twitter:creator" content="@tanaka">
  <meta name="twitter:title" content="バックリンク構築戦略: 検索順位1ページ目進入">
  <meta name="twitter:description" content="効果的なバックリンク構築方法と避けるべき失敗を実戦事例とともにお伝えします。">
  <meta name="twitter:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta name="twitter:image:alt" content="バックリンク構築戦略インフォグラフィック">

  <!-- オープングラフも一緒に(他のプラットフォーム対応) -->
  <meta property="og:title" content="バックリンク構築戦略: 検索順位1ページ目進入">
  <meta property="og:description" content="効果的なバックリンク構築方法と避けるべき失敗を実戦事例とともにお伝えします。">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta property="og:url" content="https://zero-coke.com/blog/backlink-strategy">
  <meta property="og:type" content="article">
</head>
<body>
  <!-- ページコンテンツ -->
</body>
</html>

例2: Summary Card(小さい画像)

<head>
  <!-- 小さいサムネイルに適したコンテンツ -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@mynewssite">
  <meta name="twitter:title" content="今日のSEOニュース要約">
  <meta name="twitter:description" content="Googleアルゴリズムアップデート、検索トレンド、業界ニュースを一目で">
  <meta name="twitter:image" content="https://example.com/logo-square.jpg">
  <meta name="twitter:image:alt" content="ニュースサイトロゴ">
</head>

例3: Player Card(動画コンテンツ)

<head>
  <!-- 動画が直接再生されるカード -->
  <meta name="twitter:card" content="player">
  <meta name="twitter:site" content="@videosite">
  <meta name="twitter:title" content="ブログ収益化完全ガイド(15分)">
  <meta name="twitter:description" content="ブログで月10万円稼ぐ。AdSenseからアフィリエイトマーケティングまで">
  <meta name="twitter:image" content="https://example.com/video-thumbnail.jpg">
  <meta name="twitter:player" content="https://example.com/embed/player?video=123">
  <meta name="twitter:player:width" content="1280">
  <meta name="twitter:player:height" content="720">
  <meta name="twitter:player:stream" content="https://example.com/video-123.mp4">
  <meta name="twitter:player:stream:content_type" content="video/mp4">
</head>

例4: App Card(モバイルアプリプロモーション)

<head>
  <!-- モバイルアプリダウンロード誘導 -->
  <meta name="twitter:card" content="app">
  <meta name="twitter:site" content="@myappcompany">
  <meta name="twitter:title" content="ブログマネージャー - ブログ統計を一目で">
  <meta name="twitter:description" content="モバイルでブログパフォーマンスをリアルタイムで確認">
  <meta name="twitter:image" content="https://example.com/app-icon.png">

  <!-- iOSアプリ情報 -->
  <meta name="twitter:app:name:iphone" content="ブログマネージャー">
  <meta name="twitter:app:id:iphone" content="123456789">
  <meta name="twitter:app:url:iphone" content="blogmanager://open">

  <!-- Androidアプリ情報 -->
  <meta name="twitter:app:name:googleplay" content="ブログマネージャー">
  <meta name="twitter:app:id:googleplay" content="com.example.blogmanager">
  <meta name="twitter:app:url:googleplay" content="blogmanager://open">
</head>

例5: Eコマース商品ページ

<head>
  <!-- 商品ページ最適化 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@myshop">
  <meta name="twitter:title" content="プレミアムワイヤレスイヤホンXYZ-2000 - 50%特別割引">
  <meta name="twitter:description" content="ノイズキャンセリング、30時間再生。今日だけ12,900円 → 6,450円">
  <meta name="twitter:image" content="https://shop.example.com/products/xyz-2000-promo.jpg">
  <meta name="twitter:image:alt" content="XYZ-2000ワイヤレスイヤホン商品写真">

  <!-- 商品ラベル(オプション) -->
  <meta name="twitter:label1" content="価格">
  <meta name="twitter:data1" content="6,450円">
  <meta name="twitter:label2" content="在庫">
  <meta name="twitter:data2" content="限定数量">
</head>

例6: ニュース記事

<head>
  <!-- ニュース記事に最適化されたカード -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@newsmedia">
  <meta name="twitter:creator" content="@journalist_kim">
  <meta name="twitter:title" content="2024年SEOトレンド: AI検索がゲームを変える">
  <meta name="twitter:description" content="GoogleのSGEとBingのAIチャットが検索環境を根本的に変えています。SEO戦略も変化する必要があります。">
  <meta name="twitter:image" content="https://news.example.com/2024/ai-seo-trends.jpg">
  <meta name="twitter:image:alt" content="AI検索エンジンインターフェース">

  <!-- オープングラフ記事タグも一緒に -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:author" content="キム記者">
  <meta property="article:section" content="技術">
</head>

例7: イベント/ウェビナープロモーション

<head>
  <!-- イベントプロモーションページ -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@eventorganizer">
  <meta name="twitter:title" content="2024 SEOカンファレンス | 9月15日COEX">
  <meta name="twitter:description" content="国内外SEO専門家20名の実戦ノウハウ。アーリーバード50%割引中!">
  <meta name="twitter:image" content="https://event.example.com/seo-conference-2024.jpg">
  <meta name="twitter:image:alt" content="SEOカンファレンス2024メインビジュアル">

  <!-- ラベルで主要情報を強調 -->
  <meta name="twitter:label1" content="日時">
  <meta name="twitter:data1" content="2024年9月15日">
  <meta name="twitter:label2" content="場所">
  <meta name="twitter:data2" content="COEXコンベンションセンター">
</head>

メリットとデメリット​

メリット​

  • クリック率の大幅増加: ツイッターカードが適用されたリンクは、通常のリンクより2〜3倍高いクリック率を示します。視覚的に魅力的なカードがタイムラインでユーザーの注目を引くためです。

  • ブランド認知度向上: 一貫した画像とメッセージでブランドを専門的に表現できます。Twitterアカウント情報がカードに表示され、フォロワー増加にも役立ちます。

  • リッチメディア体験: Player Cardを使用すると、動画をTwitterで直接再生できるため、ユーザーがサイトを訪問しなくてもコンテンツを消費できます。これはエンゲージメントを大幅に高めます。

デメリット​

  • 追加作業が必要: オープングラフ以外にツイッターカードタグを別途追加する必要があるため、作業量が増えます。特に複数のソーシャルプラットフォームをすべて最適化しようとすると、メタタグが多くなります。

  • プラットフォーム依存性: ツイッターカードはTwitter(X)でのみ動作します。他のプラットフォームではオープングラフまたは各プラットフォームの固有タグを使用する必要があります。

  • 画像制作の負担: 効果的なツイッターカードには高品質の画像が必須です。各コンテンツごとに適切な画像を制作または選択することは、時間とリソースが必要な作業です。

FAQ​

Q: ツイッターカードとオープングラフのどちらを使用すべきですか? A: 両方使用するのが最も良いです。Twitterはツイッターカードタグを優先使用し、ない場合はオープングラフタグを代わりに使用します。ただし、オープングラフはFacebook、LinkedIn、KakaoTalkなど他のプラットフォームでも使用されるため、一緒に実装してください。ツイッターカードタグはTwitter最適化のためのもので、オープングラフは汎用的なソーシャルメディア最適化です。

Q: ツイッターカードが表示されません。なぜですか? A: いくつかの原因が考えられます。1) メタタグ構文エラー - Card Validatorで確認してください。2) 画像サイズの問題 - 最小サイズ要件を満たしているか確認してください。3) 画像アクセス不可 - robots.txtが画像をブロックしていないか確認してください。4) HTTPS問題 - 可能な限りHTTPS URLを使用してください。5) キャッシュ問題 - Card ValidatorでURLを再クロールすると解決できます。

Q: Summary CardとSummary Large Image Cardの違いは? A: Summary Cardは小さな正方形のサムネイル(120x120px以上)がテキストの横に表示されるコンパクトな形式です。主にロゴやアイコンに適しています。Summary Large Image Cardは大きな長方形の画像(1200x628px推奨)がカードの上部に大きく表示されます。ブログ記事、ニュース記事、商品ページなど、ほとんどの場合Summary Large Imageがより効果的です。視覚的なインパクトが大きく、クリック率もはるかに高くなります。

Q: ツイッターカードを変更しましたが、変更が反映されません。 A: Twitterはカード情報をキャッシュするため、変更がすぐに反映されない場合があります。Card Validator(https://cards-dev.twitter.com/validator)でURLを入力し、「Preview card」ボタンをクリックすると最新情報で再クロールされます。すでにツイートされたリンクのカードは更新されないため、重要な変更であれば新しいツイートを作成するのが良いです。Twitterのキャッシュは通常約7日間維持されます。