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

概要

TwitterCardとは、該当のページURLを載せてツイートした際につぶやきに画像や動画などの特別項目を追加する機能です。
簡単にいえば、これのことです。
tc01
これによりタイムライン上で他のつぶやきよりも情報量を多くすることができ、見た目もリッチになり目を引きやすくなります。丁度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を入力するものですが、安易に挿入するべきではありません。
というのも、これは管理者と別のアカウントを持つ人が記事を書いた場合も入力するもので、管理者と同じアカウントで入力すると少々表示が変になってしまいます。
Screenshot-from-2014-10-31-151019-e1416276992393
上の画像の通り、twitter:siteとtwitter:creatorに同じIDを使って入力すると「By BizVektor @BizVektor」という表記になってしまいます。
この程度と言ってしまえばそれまでですが、マークアップ的には正しいとは言えない表記ですので、特別に表記したい場合を除き基本的に入力を控えるべきです。

まとめ

この4項目を入力すれば基本的にはOK
* twitter:card
* twitter:title
* twitter:description
* twitter:image

以下の項目は無くてもいけるけどできればあったほうが良い
* twitter:url
* twitter:domain
* twitter:image:width
* twitter:image:height
* twitter:site

twitter:creator は特別な事情がない限り入力する必要はない

BizVektorはテーマオプションでIDを入力するだけで+アルファの部分を含め全ていい感じに自動で出力してくれます!

この記事を書いた人

shoji
ベクトルのメーンエンジニア。
料理人、電気屋、通信屋を経た後単身渡豪、一年ほどシドニーに引きこもり帰国後ベクトルの技術者となる。
趣味はバイク、車、イラスト、造形、マイコン制御など。

スポンサーリンク