Twitter Cardの仕様について

さて、最近ビズベクトルにも追加されたTwitter Cardですが、仕様をおさらいしてみましょう

概要

TwitterCardとは、該当のページURLを載せてツイートした際につぶやきに画像や動画などの特別項目を追加する機能です。
簡単にいえば、これのことです。

これによりタイムライン上で他のつぶやきよりも情報量を多くすることができ、見た目もリッチになり目を引きやすくなります。丁度FacebookのOGPと似た機能ですね。

実装

さて、実際にこれを導入してみましょう。設定方法は以前Bizvektorで取り上げていますのでそちらを参照。

さて、今回は入力内容について調べてみましょう。
TwitterCardを表示させるにはHTML内にメタタグを入力します。
このサイトのソースを見てみるとこんな感じ。

これはまだ執筆段階のものなので皆さんが見ているものとは少し違いますが、ビズベクトルテーマが自動で表示しているTwitterCardの内容です。一番重要なのはこの部分です。

このtwitter:cardとあるメタがTwitterCardを使用するという宣言です。
この中のsummary_large_imageというのが表示タイプです。

この表示タイプには以下の種類があります。

Summary : デフォルトタイプ。一番よくあるやつ
Summary_large_image : デフォルトタイプのイメージ画像を大きくしたもの。
Player : 動画などを直接再生できるもの。Youtubeで使ってるやつ
Photo : 写真オンリーのもの。Flickerなどでよくあるやつ
Galley : 写真を4枚並べたもの。
App : モバイルアプリ用。GooglePlayであるやつ。
Product : 製品情報の為にフィールドを増やしたタイプ

一般的によく使われるのは上4つでしょうか。
ここではSummary_lage_imageを例にとって説明していきます。

ひとつひとつ説明していきます

twitter:cardTwitterCardの表示タイプ
twitter:title 記事タイトル
twitter:description 記事の概要
twitter:image タイムラインに表示させる画像URL

ここまでが最低限必要な項目です。
ここからが+αの部分です。

twitter:url　　　　　　　　ページ自体のURL
twitter:domain　　　　　　サイトドメイン
twitter:image:width　　　　表示画像の横ピクセル数
twitter:image:height　　　　表示画像の縦ピクセル数
twitter:site　　　　　　　　サイト管理に使っているツイッターID (例:@bizvektor)
twitter:creator　　　　　　投稿者のIDがある場合入力する(例:@kurudrive)

｢twitter:image:width｣｢twitter:image:height｣は無くても特に問題なく表示されますが、なるべく表記しておいたほうがいいです。

少しややこしいのが｢twitter:creator｣の存在です。
このパラメーターはその記事を書いた人のツイッターIDを入力するものですが、安易に挿入するべきではありません。
というのも、これは管理者と別のアカウントを持つ人が記事を書いた場合も入力するもので、管理者と同じアカウントで入力すると少々表示が変になってしまいます。

上の画像の通り、twitter:siteとtwitter:creatorに同じIDを使って入力すると｢By BizVektor @BizVektor｣という表記になってしまいます。
この程度と言ってしまえばそれまでですが、マークアップ的には正しいとは言えない表記ですので、特別に表記したい場合を除き基本的に入力を控えるべきです。