Twitterカードとは？種類や作り方、表示されないときの対処法を解説

Twitterカードは、ツイートにアイキャッチ付きのURLを添付できる機能です。Webサイトやブログ記事、動画などを効果的にアピールできるメリットがあります。

実際に活用するにあたって、「Twitterカードの種類や作り方が知りたい」「うまく表示されないときは？」と、疑問を持つ方もいるでしょう。

この記事では、Twitterカードを活用するメリットや種類、設定方法などを解説します。適切に表示されないときの対処法も紹介するので、ぜひ参考にしてください。

以下の資料では、企業公式アカウントの運用における始め方と注意点から、Twitterの運用効果の具体的な測定方法などを解説しています。

• 興味を持ってもらえるプロフィールを作りたい
• 投稿が見てほしいターゲット層に届かない
• 企業公式アカウントの運用における始め方と注意点が分からない

上記でお悩みの方は是非ご参考ください。

Twitterカードとは

Twitterカードとは、URLと一緒にツイートするとアイキャッチ画像やタイトル、説明文などを表示できる機能です。

Twitterカードは、Twitter上でのOGP設定の一つです。OGP設定とは、TwitterやFacebookなどのSNSでURLが投稿された際に、自動的にアイキャッチやタイトルなどのページ情報が表示される機能のことを指します。

このようにTwitterカードを設定すると、記事タイトルや画像を目立たせることができます。タイムライン上でユーザーの印象に残りやすく、Webサイトへの流入数増加などの効果が見込めるでしょう。

また通常はTwitterのテキスト投稿をする場合、140文字までの文字制限が設けられています。そこでTwitterカードを活用することで、画像上に書かれている文字やディスクリプションも情報として届けられるのが魅力です。

Twitterカードを活用するメリット

Twitterカードを活用するメリットは、おもに下記の通りです。

• タイムラインで目に留まり、印象に残りやすい
• Webサイトの流入数を増やせる
• 140文字と少ない文字数でもアピールできる

Twitterカードを活用することで、画像や動画を目立たせたり、アプリのインストール画面を表示させたりすることができます。

一般的なテキスト投稿に比べてツイートを魅力的に見せられるため、ユーザーの目に留まりやすいのが大きなメリットのひとつです。

ユーザーがメディアをクリックしたり、アプリのインストールをしたりとアクションを促す効果が見込めるので、購買行動やCV率を高めることにつながるでしょう。

自社サイトやオウンドメディアを運営している場合は、Twitterカードを積極的に活用するのがおすすめです。

Twitterカードの種類

Twitterカードの種類は、おもに以下の4つがあります。

• Summary Card
• Summary Card with Large Image
• Player Card
• App Card

Webページやブログ記事をシェアしたい場合は、Summary CardもしくはSummary Card With large Imageを用いるのが一般的です。

それぞれ順に解説します。

Summary Card（サマリーカード）

Summary Cardは、小型・正方形のアイキャッチ画像とページタイトル、説明文が表示されるTwitterカードです。

大きなカードではないものの、記事タイトルと説明文が表示されるようになっているので、リンク先のページがどのような内容かすっきりとまとまり、情報をコンパクトに伝えることができます。

Summarry Cardで使用できる画像は下記条件のとおりです。

Summary Card With large Image

Summary Card With large Imageは、大型・横長のアイキャッチ画像とページタイトル、説明文が表示されるTwitterカードです。

大きな画像が2:1で表示されるTwitterカードなので、Summary Cardに比べてよりインパクトのあるカードが設置できます。

Summary Card With large Imageで使用できる画像は下記条件のとおりです。

App Card

App Cardはモバイルアプリ用のTwitterカードで、アプリのインストールのリンクを表示するTwitterカードが表示されます。

インストール画面をクリックすると、Google PlayやApp Storeに遷移する仕組みです。ツイートで興味関心を惹いたまま、インストールまでのアクションを促せるのが特徴です。

App Cardに表示されるタイトルや画像は、アプリストアのページから取得されます。そのためアプリがストアで適切に公開されていることが必須条件です。

Player Card

Player Cardは、YouTubeなどの動画配信サイト向けのTwitterカードです。ツイートに表示されたカード上で動画のダイジェスト等を再生できます。

画像をクリックすると動画が再生されるので、ユーザーはTwitterから離脱せずに動画を楽しめるのがメリットです。

エンゲージメント向上や遷移先ページのアクセス数増加などに役立つので、音楽や映像コンテンツを配信している方は活用するのがおすすめです。

OWNLYでは、YouTubeのショート動画やInstagramのリール投稿、TikTok動画などの制作をサポートしています。

縦型ショート動画を活用したい方や、SNS集客の効果を最大化したい方は、まずはお気軽に下記ページをご覧ください。

Twitterカードの設定方法

Twitterカードを設定するには、WebページのHTMLで、必要なmetaタグをヘッダー部分に記述する必要があります。

下記のmetaタグを追加することで、URLや動画を正しく表示できるようになります。

はじめに、前述したカードの種類を入力します。Summary Card Large Imageを表示させたい場合は、1のcontents属性に「Summary_large_image」と入力しましょう。

なおSummaryカードの場合は「summary」、Playerカードなら「player」、App Cardなら「app」と記載してください。

2ではTwitterのユーザー名を「@～」で入力します。

3のmetaタグでは、WebサイトURLの「https://」と「/」の間の部分であるドメインを入力します。4、5ではそれぞれタイトル、ディスクリプションを入力してください。

6のmetaタグには、Twitter上でのアイキャッチ画像を表示させるためのURLを入力します。contents属性には、画像のURL（絶対パス）を入力しましょう。

これでTwitterカード用のmetaタグが設定できたので、次は実際に投稿していきます。

なお、CMSを利用している場合はプラグインを導入することで、上記のようなHTML情報を簡単に追加できます。

WordPressをはじめとするCMSで運用している場合はチェックしてみましょう。

Twitterカードを投稿する手順

はじめにHTMLタグを入力します。具体的な入力方法は前述したmetaタグの設定方法を参考にしてください。

続いてTwitterカードが正しく反映されるかを「Card Validator」で確認しましょう。Card Valodatorは、Twitterの公式ツールで設定や投稿時にどのように表示されるかをチェックできます。

まずはCard Validatorにログインします。Twitterカードを表示させるWebページのURLを入力して、Preview Cardを押すと正しく表示されているか確認可能です。

アイキャッチ画像が正しく設定されていない場合はエラーとなり、Twitterで投稿をしても表示されません。

Card Validator上で、ツイートで表示させたい記事のアイキャッチ画像が表示されたら成功です。最後に、記事のURLと投稿文を一緒にツイートしましょう。

Twitterカードが表示されないときの対処法

Twitterカードが正しく表示されない場合は、いくつかの原因が考えられます。

まずはHTMLタグが間違っていないか確認しましょう。タグのスペルやユーザーネームの前に@を入れ忘れていないか、画像のURLは合っているかなど、ミスがないかをチェックしてみてください。

プラグインを導入している場合は、プラグイン上で設定が誤っていないか確認しましょう。

またTwitterでのキャッシュが原因で、正しく表示されないケースもあります。その場合は、Card ValodatorでPreview Cardを押すことで、キャッシュをクリアにでき、Twitterカードを正常に表示させられるようになります。

Twittterカードを活用してWebサイトの流入を増やそう

Twitterカードを活用するとアイキャッチ画像やタイトル、説明文などを表示できるので、タイムライン上で目立たせることができます。

Webサイトの流入数増加やエンゲージメント向上にもつながるので、ぜひ積極的に活用してみましょう。

HTMLタグを設定する際は、記述にミスがあると正しく表示されないため注意しましょう。CMSを利用している場合は、難しい設定が必要ないケースもあるのでプラグインが導入できるかどうか確認してみてください。

以下の資料では、Twitter上でキャンペーン施策を行う際の設計手順・注意事項を中心に、キャンペーンから自社サービスへの遷移率を高める方法を解説しています。

SNS運用担当者様や広告代理店様は、ぜひ資料をご参考ください。