Twitterカードとは？使い方・設定方法まとめ

しまこ

twitterは、Web上の記事やwebサイトを宣伝するツールとしても役立ちます。
そんなWeb上コンテンツの宣伝ツイートの中で、画像付きの記事へのリンク情報を見たことはないでしょうか？
画像付きのリンクが表示される機能を「Twitteカード（ツイッターカード）」と呼びます。
リンク画像を表示させるためには、Webサイト側でTwitterカードの設定が必要です。
今回はtwitterカードをツイートに設定する方法をご紹介します。

Twitterカードとは？

Twitterカードとは、ツイートに貼り付けられた記事へのリンクを魅力的に見せる機能の事です。
Twitterカードには、ブログ・Webメディアの記事・ホームページへのリンク情報（URL）・アイキャッチ画像やタイトル、説明文を表示できます。
このため、Twitterカード付きでツイートするとユーザーの目に留まりやすくなります。

TwitterCardを利用するためには

おおまかな手順は以下の3つです。
・カードタイプを選択
・メタタグをページに追加
・Card Validatorを使ってTwitterカードの設定を確認する

Twitterカードの種類を選択する

Twitterカードには合計で4種類の形があります。

Summary Card

「サマリーカード」は、小型・正方形のアイキャッチ画像とページタイトル、説明文を表示できるTwitterカードです。

Summary Card with Large Image

「大型画像付きサマリーカード」は、大型・横長のアイキャッチ画像とページタイトル、説明文を表示できるTwitter カードです。
形式的にはFacebookのOGPに近いタイプのカードです。

「App Card」はモバイルアプリ用のカードです。
アプリのダウンロードページへのリンクを表示するTwitterカードが表示されます。
また、「Player Card」は動画配信をしているサイト向けのTwitterカードになります。
ツイートに表示されたカード上で動画のダイジェスト等を再生することが可能です。
それぞれモバイルアプリ用と動画配信用のため、通常のwebサイトであれば「Summary Card」か「Summary Card with Large Image」のどちらかを選ぶことになります。

Twitterカードの使い方

<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta property="og:url" content="記事のURL" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の要約" />
<meta property="og:image" content="画像のURL" />

カード種類

カードの種類は summary (カードの種類が「Summary Card」) または summary_large_image (カードの種類が「Summary Card with Large Image」)を指定します。

@ユーザー名

Twitterカードを設定するページが含まれるウェブサイトで使用しているTwitterのユーザー名を指定します。

記事のURL

Twitterカードを設定するページのURLを指定します。

記事のタイトル

Twitterカードを設定するページの記事の概要を指定します。定められた文字数以上の値は省略されます。

画像のURL

Twitterカードに表示される画像が設置されているURLを指定します。

Card Validatorを使ってTwitterカードの設定を確認する

Card Validatorという公式ページからTwitterカードがきちんと表示できているかをチェックすることができます。
Card Validator | Twitter Developers

コラム