『Twitterカード』を設定してサイトへの質の良い流入を増やそう！1万6742文字に渡る開発者向けドキュメントの日本語訳まとめ。

皆さんは、Twitterカードの事はご存知でしょうか？

これは、ある記事がツイートされた時に、ツイートに対してそのページの『画像』『ページタイトル』『ページ説明文』などを添付するための設定です。

これをサイト側で設定すると、ツイートされたリンクは以下の画像のように表示されます。

『Twitterカード』設定前後

色々細かいレギュレーションや設定項目があり、それはTwitterの開発者ドキュメントで解説されています。しかし、その解説は英語のみだったので、二の足を踏んでしまって設定できていなかった方も多いのではないでしょうか？

そんな方々向けに、Twitterカードの開発者ドキュメントを一字一句残さず日本語訳してみました。

一応実際の設定手順も来週にはこのブログでもご紹介しますが、まずは今回のドキュメントをご覧になって皆さんも設定してみて下さい！

※2013年1月31日時点の情報をまとめています。

※以前Web担当者Forumでも設定方法が紹介されていましたので、こちらの記事もご参照下さい。

※[追記] Twitterカードの効用について

Twitterカードの効用は、流入数の増加よりも、「ユーザーに対する利便性の向上」「Twitterカード提供による、Twitter上でのコンテンツプレ体験者の増加」「フォロワーの増加」にありそうです。

一度「このサイトのリンクはTwitter上で概要が見れる」と認識されると、タイムラインに流れて来たそのサイトに関するツイートの概要を、一度開いてみようと思ってくれるユーザーも増えるでしょう。

例えば、こちらのぐるなびさんのツイートはTwitterカードに対応しています。個人的にも安心して、サイトのプレ体験というか、わざわざサイトに飛ぶ程じゃないけどちょっと見てみようかなと思って概要を開いてくれるユーザーが増えるのではないかと思います。実際私はそう思いました。その結果、質の高い来訪数が増える気がします。

また、TwitterカードにはTwitterアカウントを紐付けて「(そのアカウントを)フォロー」というリンクも付けられます。この機能によってフォロワーの増加にもつながるでしょう。そのサイトのどのページでもツイートされるだけで拡散するので、これまで以上にクチコミでのフォロワー増加が多くなりそうです。

Introduction

Twitterカードを利用すると、あなたのコンテンツのURLがツイートされた時に、そのコンテンツを添付する事ができる。HTMLタグを何行かWebページに追加すると、あなたのコンテンツへのリンクをツイートしたユーザーに、「Twitterカード」が追加される。(このTwitterカードは、全てのユーザーが見れる。)

開発者はTwitterカードを使って以下の事が実現できる。

• あなたのコンテンツがTweetでどのように表示されるか管理できる。
• あなたのサイトへの流入数を増やせる。
• コンテンツ分配でフォロワーを増やせる。

Three simple steps

１．どのタイプのカードを利用したいかを(今ご覧頂いている)このドキュメントを見て確認する。

２．メタタグをあなたのページに追加し、プレビューツールでテストする。

３．実施例のリンクと関連情報を提出し、こちらの申請フォームから申請する。

Card Principles

コンテンツの帰属先サイトが表示されているTwitterカードのサマリー表示例

ツイートに添付できるカードのタイプは3つあり、それぞれが過去の経験から、ウェブやモバイルのTwitterクライアント用に完璧に設計されている。

以下のHTMLを、ページのHEADセクションに追加して、コンテンツのカードのタイプを明示しよう。

<meta name=”twitter:card” content=”summary”>

カードのプロパティは、シンプルなkey-value piars(カードの一意識別子[UID=key]と実際のデータの値[value]の組み合わせ)で、それぞれが上のような形で独自のHTMLメタタグでそれぞれ定義されている。

これらのプロパティが複数結合することによって、全体のカードでの表現を定義し、またそれぞれのカードが特別なプロパティの組み合わせをサポートする。

各ページでは一つのカードしかサポートされない。全てのカードは以下のいくつかの基本のプロパティをサポートしている。

それぞれのカードが微妙に異なる形で上記のプロパティを利用している。以下各セクションに分かれてそれぞれのカードについて説明していく。

Card and Content Attribution(≒カードとコンテンツの帰属)

それぞれのカードではコンテンツの帰属を示す事ができ、あなたが明示したコンテンツ向けに適切なTwitterアカウントを表している。

ユーザー(恐らくTwitterアカウントのユーザー名のこと)を見ることによって、フォローをしたり、帰属しているアカウントのプロフィールをカードから直接見ることができる。

属性には二つの種類が存在する。

あなたのカード帰属を、以下のプロパティを利用して構成しよう。Summary CardSummaryカードは、ブログの投稿やニュースから製品やレストランまで、多くのウェブコンテンツ用に使える。以下のスクリーンショットは、New York Timesの記事のツイートが拡大されたものである。このカードは読者がウェブサイトをクリックする前に、コンテンツのプレビューを見せるためのものである。このカードは、前回のセクションで説明されたすべてのプロパティ(URL・title・description・image)から成り立っている。上記の必須項目が一つでも欠けている場合は、ツイートに表示されない。上の画像では、カードがウェブサイトとコンテンツクリエイターに帰属している事が、はっきりと表示されていることに注目してほしい。以下が、上記でサンプルとして出したニューヨーク・タイムズのWebサイトで、実際に設定したHTMLの全容である。

<meta name=”twitter:card” content=”summary”>

<meta name=”twitter:site” content=”@nytimes”>

<meta name=”twitter:creator” content=”@SarahMaslinNir”>

<meta name=”twitter:url” content=”http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html”>

<meta name=”twitter:title” content=”Parade of Fans for Houston’s Funeral”>

<meta name=”twitter:description” content=”NEWARK – The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.”>

<meta name=”twitter:image” content=”http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg”>

Photo Cardフォトカードは、画像をツイートの全面また中心に設置する。フォトカードを定義するには、タイプを”photo”にして、twitter:imageのメタカードにする。Twitterはオリジナルの画像の比率を保ったまま、画像のサイズを変更する。Twitterは、画像の大きさが縦150ピクセル横280ピクセル以下の場合は、フォトカードを作成しない。イメージは例外的なアスペクト(比率)でない限り、切り取られることはない。全てのイメージは高品質なサービスとユーザーのSSLセキュリティのために、Twitterによりデータを取得されたのちプロキシサーバーに送られる。”twitter:image:width”と”twitter:image:height”を使ってより詳細に縦と横のピクセルを定義することによって、画像のサイズが変えられた場合に、よりオリジナルのアスペクトを保ちやすくなる助けになる。フォトカードは、タイトルが空白でも作成できる唯一のカードである。タイトルのないフォトカードを作る場合は、「空白」をタイトルとして設定する。（空白の設定例：.）アニメgifは、現時点ではTwitterカードでは利用できない。フォトカードは下記のプロパティによって定義づけられる。以下が、フォトカードのHTMLの例である。

<meta name=”twitter:card” content=”photo”>

<meta name=”twitter:site” content=”@examplephotosite”>

<meta name=”twitter:creator” content=”@sippey”>

<meta name=”twitter:url” content=”http://example.com/photo/a/”>

<meta name=”twitter:title” content=”Good Morning, San Francisco”>

<meta name=”twitter:description” content=”Great view this morning”>

<meta name=”twitter:image” content=”http://example.com/photo/a/image.jpg”>

<meta name=”twitter:image:width” content=”610″>

<meta name=”twitter:image:height” content=”610″>

Player Cardプレイヤーカードは、ビデオや音楽プレイヤー、イベントのLIVEストリーミングなどのメディア機能であり、iframe内のコンテンツをツイート内で公開することができる。フォトカードやSummaryカードとは違い、全てのコンテンツの表現を管理し、以下全てのTwitterクライアントで利用できるよう、詳細な設定をする必要がある。

• twitter.comとmobile.twitter.com
• iPhone用Twitter公式アプリ
• Android用Twitter公式アプリ

各プラットフォームの性能により、プレイヤーカードは各クライアントで異なる働きを見せるので、カードを設定する前に詳細を知っておく必要がある。以下が、それぞれのプラットフォームでどのように動くかの違いである。Twitter.com上の場合、ツイートをプロフィールページ(タイムライン)上でクリックしたり、「概要を表示」をクリックしたり、ツイートのパーマリンクページを開いた時に、iframeページは表示される。もしiframeが435ピクセル以上の場合は、iframeプレイヤーは435ピクセル以内に収まるように、オリジナルのアスペクト比を保ちながらサイズが変更される。Twitterのネイティブアプリ(iPhone用またはAndroid用Twitter)用の場合、イメージプレビューがビデオの場所に表示され、以下の優先順位で、いずれかにリンクされる。mobile.twitter.com(Twitter社のモバイルクライアント)上では、イメージプレビューがビデオの場所に表示され、以下の優先順位で、下記のリンクへと飛ばされる。他のクライアントでは、ユーザーのツイートのURLへ飛ばされ、クライアントのデフォルトブラウザでサイトが開かれる。全てのプレイヤーカードは、Twitterから、特別なホワイトリスティング(信頼できるURLであるという確認)を受けたのち、承認される必要がある。
Player Cards require more testingプレイヤーカードは、少なくとも5つのコンテキストでテストする必要がある。我々は下のツイートにそれらの要項をまとめた。

現在のPCブラウザでtwitter.comを使った時に動くか？ネイティブのiOS/Android用Twitterアプリで動くか？mobile.twitter.comをiOS/Androidのデフォルトブラウザで開いたときに動くか？

A few simple rules for Cardsやるべき事：

• 全てのTwitterクライアントに対応し、同じように機能するカードを作る

上に明記されている全てのTwitterクライアント(補足：twitter.com・iPhone/Android用アプリ・mobile.twitter.com)で動かないものは承認されない

• 審査に提出する前に、Twitterクライアントのネイティブブラウザでテストする
• 可能な時はRAWのストリームビデオとオーディオを提供する
• httpsをiframe、stream、カード全てのアセットに使用する
• Wmodeを使う：twitter.com用にFlashを使っている場合は不明瞭なので、プレイヤーが正しいx-indexで開くようにする
• Flashが利用できない場合は、モバイルフレンドリーなコンテンツにfall backするよう、HTMLページにリンクさせる。

やってはいけない事:

• ブラウザの警告が出るようなコンテンツを入れること。全てのTwitterクライアントはhttpsを使うので、ブラウザのロックを破壊してはいけない。
• コンテンツの自動再生
• あなたのページにサインインしないといけないコンテンツ
• プレイヤー内に、他のネットワークのシェア機能を混合させること
• “Twitter:player”を.swfの動画ファイルに指定すること

プレイヤーカードは以下のプロパティで定義づけることができる。以下が、プレイヤーカードのhtml例である。

<meta name=”twitter:card” content=”player”>

<meta name=”twitter:site” content=”@examplevideosite”>

<meta name=”twitter:url” content=”http://example.com/watch/a”>

<meta name=”twitter:title” content=”Example Video”>

<meta name=”twitter:description” content=”This is a sample video from example.com”>

<meta name=”twitter:image” content=”http://example.com/keyframe/a.jpg”>

<meta name=”twitter:player” content=”https://example.com/embed/a”>

<meta name=”twitter:player:width” content=”435″>

<meta name=”twitter:player:height” content=”251″>

以下が、twitterモバイルアプリでRAW URLが再生されるfootbar.comのプレイヤーカードの一例である。

<meta name=”twitter:card” content=”player”>

<meta name=”twitter:site” content=”@foobar”>

<meta name=”twitter:url” content=”http://example.com/watch/a”>

<meta name=”twitter:title” content=”Example Video”>

<meta name=”twitter:description” content=”This is a sample video from example.com”>

<meta name=”twitter:image” content=”http://example.com/keyframe/a.jpg”>

<meta name=”twitter:player” content=”https://example.com/embed/a”>

<meta name=”twitter:player:width” content=”435″>

<meta name=”twitter:player:height” content=”251″>

<meta name=”twitter:player:stream” content=”https://example.com/raw-stream/a.mp4″>

<meta name=”twitter:player:stream:content_type” content=”video/mp4; codecs=”avc1.42E01E1, mp4a.40.2″”>

A few things to check before submitting a Player Card for approval.(プレイヤーカードが承認されるためにチェックしておくこと)以下が、プレイヤーカードの提出をチェックしている際に最もよく見つかる問題である。（これらがあると問題が直るまで承認が遅れてしまう）：URL crawlingTwitterのクローラはURLをスキャンしている際、robots.txt重要視する。もしカードマークアップ付きのページがブロックされている場合、カードは表示されない。もしイメージURLがブロックされている場合も、サムネイル又はフォトは表示されない。Twitterは、あなたのrobots.txt ファイルに例外を作成する事ができるTwitterbotのユーザーエージェントを利用する。以下が、Twitterのfetcher以外へのクローリングを拒否しているrobots.txtの例である。

User-agent: Twitterbot

Disallow:

User-agent: *

Disallow: /

以下が、どのディレクトリがTwitterbotからクロールされてもいいかを明示している例である。(このケースでは、イメージとアーカイブのディレクトリ以外は拒否している):

User-agent: Twitterbot

Disallow: *

Allow: /images

Allow: /archives

Twitter cards and Open Graphあなたはきっと、Twitterカードのタグは、オープングラフのタグに似ていることに気が付くだろう。これはオープングラフプロトコルと同じ規定を使用しているからだ。もしすでにページ上で、オープングラフを利用してデータを説明している場合は、タグやデータを複製せずに簡単にTwitterカードで作る事ができる。Twitterカードプロセッサーがあなたのページのタグを探す時、まず最初にTwitterプロパティをチェックし、もしない場合はサポートされているオープングラフのプロパティを探すようになっている。これにより、それぞれがページ上で独立して定義づけられ、あなたのコンテンツや体験を説明するマークアップの複製を最小に抑える事ができる。オープングラフは”og”の接頭辞をという形で明示する必要があるが、Twitterカードのマークアップにはそういったものや”twitter”接頭辞は必要ない。またオープングラフは、マークアップのプロパティやコンテンツの帰属を()と明示する必要もあるが、Twitterカードは名前と種類を明示するだけである。Twitterの構文解析プログラムは、プロパティやコンテンツを利用するためにfall backするので、すでにページ上にオープングラフが存在する場合は、既存のオープングラフのマークアップを変更する必要はない。Twitterとオープングラフのタグを合わせてSummaryカードで使う例が以下である。

<meta name=”twitter:card” content=”summary”>

<meta name=”twitter:site” content=”@nytimesbits”>

<meta name=”twitter:creator” content=”@nickbilton”>

<meta property=”og:url” content=”http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/”>

<meta property=”og:title” content=”A Twitter for My Sister”>

<meta property=”og:description” content=”In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling.”>

<meta property=”og:image” content=”http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg”>

次のセクションのテーブルが、それぞれのTwitterタグに対するオープングラフのfall backの動きである。Overview of all Twitter Card Tags(Twitterカードタグのまとめ)以上、『Twitterカードの公式開発者向けドキュメントの日本語訳』でした。ぜひ皆さんのサイトでも実装して見て下さい。もう少し具体的なやり方(特にWordPress向けの実装)の流れについては、このブログで改めてご紹介します。今週にはアップしたいと思いますので少しお待ち下さい。