Twitterの表示をリッチにするTwitter Cards

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

たとえば、既にFacebookのLikeボタン用にOGPの記述をしているページなら、以下のようにわずか数行を追記をするだけで対応する事ができます。
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter ID">
※twitter:cardにはTwitter Cardsの種類、この場合ならsummaryを記述します。必須です。
※twitter:siteにはサイトオーナーのTwitterアカウントを記述します。なければ省略可能です。
<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字以内で記述します。必須です。
デフォルトで必要な設定を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字以内で記述します。必須です。
画像を大きく目立たせるフォトサイト向けのものや、4枚の画像を並べて見せるギャラリーサイト向けなど、全部で7つの表示形式があります。
中にはアプリを表示するApp Cardやプレイヤーを埋め込むPlayer Card、ECサイトでアイテムの詳細を表示するのに適したProduct Cardなど、特殊な用途で使用するものもありますが、それらは別途承認が必要であったりするので、今回は通常よく使用すると思われるSummary、 Large Image Summary Card、Photo Card、Gallery Cardという4つのカードについて、簡単に説明します。
Summary Card
基本形となる形式なので、カードの形式を特に指定しなければ、この形になります。
タイトル、概要などごく一般的な内容が表示されます。
必須ではありませんが、サムネイル画像を指定してあげれば、サムネイルを表示する事もできます。
一般的なウェブページやニュース記事ページなどはこれに当たります。
追加する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アカウントを指定できます。なければ省略可能です。
Large Image Summary Card
基本的には 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">
Photo Card
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側でアスペクト比の計算を行います。省略可能です。
Gallery Card
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 IDを登録して該当ページのURLやサイトの概要を登録するだけの簡単なものです。
特に問題なければ申請後数分で利用可能になります。










タイムラインの写真






















