Twitterカードの設置が必要な案件がありましたので、理解を深めるために調べてみました。

そもそもTwitterカードとはどういったものか？

Twitterカードを使用すると、ツイートにウェブサイトに関連したアイキャッチ画像や動画などの概要を表示することができます。
概要が表示できることで他のツイートよりも視覚的に変化があり、よりウェブサイトへの誘導が促進できるものになります。

簡単に言うとFacebookのタイムラインに表示されるシェア画像のTwitterバージョンです。

以前はTwitterにカード情報を申請する必要があったのですが、現在は設定項目がなくなっているのでサイトにOGPタグを設置してCard validatorでプレビューをするだけで良くなってるみたいですね。

まずはじめに、以下のコードがTwitterカードを表示するためのOGタグになります。

<meta name="twitter:card" content="表示の種類を選択">
<meta name="twitter:site" content="自分のツイッターのユーザー名">
<meta name="twitter:title" content="サイト名">
<meta name="twitter:description" content="ディスクリプション">
<meta name="twitter:creator" content="コンテンツ制作者のツイッターのユーザー名">
<meta name="twitter:image:src" content="画像の設定">
<meta name="twitter:domain" content="設置するドメイン">

1.twitter:cardの設定

Twitterカードにはデフォルトカード以外にも様々な種類の表示方法があります。
詳しい説明は表示名にTwitter Developersへのリンクを設置しています

———————————————————————————————————
Summary Card (summary )
Twitterカードのデフォルトの表示です

Summary Card with Large Image(summary_large_image)
通常のサマリーカードより画像を大きく表示したいときに使用します

Photo Card (photo)
Twitterに写真を投稿した時のような表示をします

Gallery Card (gallery)
写真を複数枚表示したいときに使用します（4枚の写真を並べて表示）

App Card (app)
スマホアプリの情報や直接ダウンロードできるリンクが付きます

Player Card (player) ※申請が必要
動画やオーディオ、スライドショーを視聴できるカードです

Product Card (product) ※申請が必要
製品情報のために最適化したカードです
———————————————————————————————————

2.twitter:titleの設定

ページのタイトルを設定します。
ブログ等では自動的に変わる指定をしたほうがベターですね。
ちなみに70文字以上は省略されます。

3.twitter:descriptionの設定

ページの内容や概要を指定します。
こちらもページに指定しているものと同じものを入れておけば問題なさそうです。
200文字以上は省略されます。

4.twitter:image ※必要であれば

ツイッターカードに表示する画像のURLを指定します。
ページのサムネイルとして使えるものを指定したほうが良さそうです。
最小サイズは120×120で、1MB未満のものを設定しましょう。

5.その他

twitter:site、twitter:creator、twitter:domainの3点は必要に応じて設置で問題なさそうです。

上記を設定しサーバーにアップした後、Card validatorにアクセスをして設置したURLを入力すればOKです。
ちゃんとOGタグが設置されていれば「*設置したURL is whitelisted for summary card」と言った表示が出るので、これで設置が完了したことになります。

TwitterカードのOGPタグの設置は以上です。

facebookとtwitterのOGタグ生成ジェネレーターを作りました。(7/2)
http://blog.zizo.ne.jp/2015/07/02/01/23/24/