Twitterの表示をリッチにするTwitter Cards | ネットPR.JP

Twitterにリンクを投稿すると、タイムライン上の表示にリンク先の詳細情報を表示してくれるTwitter Cards。
URLだけでなく、タイトルや概要、画像なんかもサムネイル表示してくれるので、ユーザーにもわかりやすくてよいですよね。
ずいぶん前から話題になっているので、すでにご存じの方や、導入されているというところも多いと思います。
このサイトでも導入しているので、例えばこのサイトのページのURLをTwitterに投稿すると、Twitterのタイムラインではこんな感じで表示されます。

Twitter Cardsをタイムライン上に表示させるには、metaタグで表示させたい情報や表示形式を指定してあげる必要がありますが、Facebookなどでも採用しているOGP（Open Graph Protocol）に対応してるので、OGPを利用しているFacebookなどと設定を共有する事ができます。
たとえば、既にFacebookのLikeボタン用にOGPの記述をしているページなら、以下のようにわずか数行を追記をするだけで対応する事ができます。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter ID">

※twitter:cardにはTwitter Cardsの種類、この場合ならsummaryを記述します。必須です。
※twitter:siteにはサイトオーナーのTwitterアカウントを記述します。なければ省略可能です。

OGPを利用せず、Twitter Cardsの設定のみ行う場合は、以下のようになります。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter ID">
<meta name="twitter:title" content="page title">
<meta name="twitter:description" content="page description">

※twitter:titleにはページのタイトルを記述します。必須です。
※twitter:descriptionにはページの概要を200字以内で記述します。必須です。

ただし、全てTwitter Cards用の記述にしてしまうと、他のOGPを採用したサービス（FacebookのLikeボタンなど）と設定を共用する事ができません。ですので、これから追加していく場合でも、できるだけOGPで指定していった方がよいでしょう。
デフォルトで必要な設定をOGPで記述する場合は、以下のような記述になります。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter ID">
<meta property="og:title" content="page title">
<meta property="og:description" content="page description">

※og:titleにはページのタイトルを記述します。必須です。
※og:descriptionにはページの概要を200字以内で記述します。必須です。

OGPでの記述の場合、プロパティがcontent=”～”で指定されているのに注意してください。

上に例としてあげた記述は、summaryというデフォルト形式のもので最も一般的な形式ですが、このTwitter Cards、実はsummary以外にも表示形式がいろいろあります。
画像を大きく目立たせるフォトサイト向けのものや、4枚の画像を並べて見せるギャラリーサイト向けなど、全部で7つの表示形式があります。

それによって指定するパラメータも当然違いますので、コンテンツの内容に合わせてきちんと指定をしてあげると、コンテンツにより最適な付加情報がつける事ができます。
中にはアプリを表示するApp Cardやプレイヤーを埋め込むPlayer Card、ECサイトでアイテムの詳細を表示するのに適したProduct Cardなど、特殊な用途で使用するものもありますが、それらは別途承認が必要であったりするので、今回は通常よく使用すると思われるSummary、 Large Image Summary Card、Photo Card、Gallery Cardという4つのカードについて、簡単に説明します。

タイトル、概要、サムネイル、Twitterアカウント情報が入ります。
基本形となる形式なので、カードの形式を特に指定しなければ、この形になります。
タイトル、概要などごく一般的な内容が表示されます。
必須ではありませんが、サムネイル画像を指定してあげれば、サムネイルを表示する事もできます。
一般的なウェブページやニュース記事ページなどはこれに当たります。

追加するmetaタグ

<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Twitter ID"> <meta name="twitter:creator" content="@Twitter ID"> <meta property="og:title" content="content title" /> <meta property="og:description" content="content description"> <meta property="og:image" content="画像URL">

※og:imageにはサムネイル画像を指定します。省略可能です。
※サムネイル画像は120px x 120pxを超える場合、自動的にトリミングされます。60px x 60pxより小さい場合は無視されます。
※サイトオーナーと別に執筆者が要る場合、twitter:creatorでTwitterアカウントを指定できます。なければ省略可能です。

タイトル、概要、サムネイル、Twitterアカウント情報が入ります。
基本的には Summary Card と同じなのですが、画像をサムネイルではなく、大きく表示します。
写真を大きく見せたい記事やページはこちらを指定するとよいでしょう。
ただし、指定する画像は縦280px横150pxを超えるサイズが必要で、それより小さい画像の場合は表示されません（サムネイルとしても表示されません）ので注意が必要です。

追加するmetaタグ

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitter ID">
<meta name="twitter:creator" content="@Twitter ID">
<meta property="og:title" content="content title" />
<meta property="og:description" content="content description">
<meta property="og:image" content="画像URL">

タイトル、概要、アスペクト比を維持した縮小画像、Twitterアカウント情報が入ります。
Large Image Summary Cardと違って、こちらは縦長の画像の場合でもアスペクト比を維持して掲載します。
Large Image Summary Cardと同様、指定する画像は縦280px横150pxを超えるサイズが必要です。

追加するmetaタグ

<meta name="twitter:card" content="photo"> <meta name="twitter:site" content="@Twitter ID"> <meta name="twitter:creator" content="@Twitter ID"> <meta name="twitter:image:width" content="画像横幅px"> <meta name="twitter:image:height" content="画像縦幅px"> <meta property="og:title" content="content title"> <meta property="og:description" content="content description"> <meta property="og:image" content="画像URL">

※twitter:image:widthには画像の横幅pxを指定できます。指定がある場合、それを元にTwitter側でアスペクト比の計算を行います。省略可能です。
※twitter:image:heightには画像の縦幅pxを指定できます。指定がある場合、それを元にTwitter側でアスペクト比の計算を行います。省略可能です。

1枚の画像ではなく、複数の画像を同時に表示します。
4つの画像 同時に並べて、ギャラリーのように表示することができますが、画像を4つ指定する事が必須となります。
画像はsummaryの時と同様サムネイル化されます。

追加するmetaタグ

<meta name="twitter:card" content="gallery"> <meta name="twitter:site" content="@Twitter ID"> <meta name="twitter:creator" content="@Twitter ID"> <meta property="og:title" content="content title"> <meta property="og:description" content="content description"> <meta name="twitter:image0" content="画像URL01"> <meta name="twitter:image1" content="画像URL02"> <meta name="twitter:image2" content="画像URL03"> <meta name="twitter:image3" content="画像URL04">

※twitter:image0～3にはサムネイル画像を指定します。必須です。

設定が完了したら、Twitterのバリデータツールへアクセスして、利用申請をしましょう。

Card Validator　https://dev.twitter.com/docs/cards/validation/validator

Twitter Cardsでは、Facebookなどと違ってmetaタグを設定してページの用意が出来たら利用申請をしなければなりません。
利用申請と言ってもTwitter IDを登録して該当ページのURLやサイトの概要を登録するだけの簡単なものです。
特に問題なければ申請後数分で利用可能になります。