『Twitterカード』を設定してサイトへの質の良い流入を増やそう!Twitterカードの開発者向けドキュメントの日本語訳まとめ。私たちについてガイアックスソーシャルメディアラボの記事SNSマーケティングに関する最新情報をご紹介しますホーム>全ての記事一覧>Twitter>『Twitterカード』を設定してサイトへの質の良い流入を増やそう!1万6742文字に渡る開発者向けドキュメントの日本語訳まとめ。2013.02.04『Twitterカード』を設定してサイトへの質の良い流入を増やそう!1万6742文字に渡る開発者向けドキュメントの日本語訳まとめ。TweetTweet皆さんは、Twitterカードの事はご存知でしょうか?これは、ある記事がツイートされた時に、ツイートに対してそのページの『画像』『ページタイトル』『ページ説明文』などを添付するための設定です。これをサイト側で設定すると、ツイートされたリンクは以下の画像のように表示されます。細かいレギュレーションや設定項目があり、それはTwitterの開発者ドキュメントで解説されています。その解説は英語のみだったので、二の足を踏んでしまって設定できていなかった方も多いのではないでしょうか?そんな方々向けに、Twitterカードの開発者ドキュメントを一字一句残さず日本語訳してみました。一応実際の設定手順も来週にはこのブログでもご紹介しますが、まずは今回のドキュメントをご覧になって皆さんも設定してみて下さい!※2013年1月31日時点の情報をまとめています。※以前Web担当者Forumでも設定方法が紹介されていましたので、こちらの記事もご参照下さい。Twitterカードの効用についてTwitterカードの効用は、流入数の増加よりも、「ユーザーに対する利便性の向上」「Twitterカード提供による、Twitter上でのコンテンツプレ体験者の増加」「フォロワーの増加」にありそうです。一度「このサイトのリンクはTwitter上で概要が見れる」と認識されると、タイムラインに流れて来たそのサイトに関するツイートの概要を、一度開いてみようと思ってくれるユーザーも増えるでしょう。こちらのぐるなびさんのツイートはTwitterカードに対応しています。個人的にも安心して、サイトのプレ体験というか、わざわざサイトに飛ぶ程じゃないけどちょっと見てみようかなと思って概要を開いてくれるユーザーが増えるのではないかと思います。実際私はそう思いました。その結果、質の高い来訪数が増える気がします。TwitterカードにはTwitterアカウントを紐付けて「(そのアカウントを)フォロー」というリンクも付けられます。この機能によってフォロワーの増加にもつながるでしょう。そのサイトのどのページでもツイートされるだけで拡散するので、これまで以上にクチコミでのフォロワー増加が多くなりそうです。↓ここからTwitterカードの開発者向けドキュメント日本語訳IntroductionTwitterカードを利用すると、あなたのコンテンツのURLがツイートされた時に、そのコンテンツを添付する事ができる。HTMLタグを何行かWebページに追加すると、あなたのコンテンツへのリンクをツイートしたユーザーに、「Twitterカード」が追加される。(このTwitterカードは、全てのユーザーが見れる。)開発者はTwitterカードを使って以下の事が実現できる。あなたのコンテンツがTweetでどのように表示されるか管理できる。あなたのサイトへの流入数を増やせる。コンテンツ分配でフォロワーを増やせる。steps1.どのタイプのカードを利用したいかを(今ご覧頂いている)このドキュメントを見て確認する。2.メタタグをあなたのページに追加し、プレビューツールでテストする。3.実施例のリンクと関連情報を提出し、こちらの申請フォームから申請する。Principlesコンテンツの帰属先サイトが表示されているTwitterカードのサマリー表示例ツイートに添付できるカードのタイプは3つあり、それぞれが過去の経験から、ウェブやモバイルのTwitterクライアント用に完璧に設計されている。summaryデフォルトのカードであり、タイトル・解説・サムネイル画像・ツイッターアカウントの帰属が含まれているもの。photoツイートのサイズのフォトカードplayerツイートのサイズの動画/音声/メディアプレイヤーカード以下のHTMLを、ページのHEADセクションに追加して、コンテンツのカードのタイプを明示しよう。piars(カードの一意識別子[UID=key]と実際のデータの値[value]の組み合わせ)で、それぞれが上のような形で独自のHTMLメタタグでそれぞれ定義されている。これらのプロパティが複数結合することによって、全体のカードでの表現を定義し、またそれぞれのカードが特別なプロパティの組み合わせをサポートする。各ページでは一つのカードしかサポートされない。全てのカードは以下のいくつかの基本のプロパティをサポートしている。カードに表示されるコンテンツのイメージ画像それぞれのカードが微妙に異なる形で上記のプロパティを利用している。以下各セクションに分かれてそれぞれのカードについて説明していく。Attribution(≒カードとコンテンツの帰属)それぞれのカードではコンテンツの帰属を示す事ができ、あなたが明示したコンテンツ向けに適切なTwitterアカウントを表している。ユーザー(恐らくTwitterアカウントのユーザー名のこと)を見ることによって、フォローをしたり、帰属しているアカウントのプロフィールをカードから直接見ることができる。属性には二つの種類が存在する。あなたのカード帰属を、以下のプロパティを利用して構成しよう。CardSummaryカードは、ブログの投稿やニュースから製品やレストランまで、多くのウェブコンテンツ用に使える。Timesの記事のツイートが拡大されたものである。このカードは読者がウェブサイトをクリックする前に、コンテンツのプレビューを見せるためのものである。このカードは、前回のセクションで説明されたすべてのプロパティ(URL・title・description・image)から成り立っている。上記の必須項目が一つでも欠けている場合は、ツイートに表示されない。上の画像では、カードがウェブサイトとコンテンツクリエイターに帰属している事が、はっきりと表示されていることに注目してほしい。以下が、上記でサンプルとして出したニューヨーク・タイムズのWebサイトで、実際に設定したHTMLの全容である。Cardフォトカードは、画像をツイートの全面また中心に設置する。フォトカードを定義するには、タイプを”photo”にして、twitter:imageのメタカードにする。Twitterはオリジナルの画像の比率を保ったまま、画像のサイズを変更する。Twitterは、画像の大きさが縦150ピクセル横280ピクセル以下の場合は、フォトカードを作成しない。イメージは例外的なアスペクト(比率)でない限り、切り取られることはない。全てのイメージは高品質なサービスとユーザーのSSLセキュリティのために、Twitterによりデータを取得されたのちプロキシサーバーに送られる。”twitter:image:width”と”twitter:image:height”を使ってより詳細に縦と横のピクセルを定義することによって、画像のサイズが変えられた場合に、よりオリジナルのアスペクトを保ちやすくなる助けになる。フォトカードは、タイトルが空白でも作成できる唯一のカードである。タイトルのないフォトカードを作る場合は、「空白」をタイトルとして設定する。(空白の設定例:.)アニメgifは、現時点ではTwitterカードでは利用できない。フォトカードは下記のプロパティによって定義づけられる。以下が、フォトカードのHTMLの例である。Cardプレイヤーカードは、ビデオや音楽プレイヤー、イベントのLIVEストリーミングなどのメディア機能であり、iframe内のコンテンツをツイート内で公開することができる。フォトカードやSummaryカードとは違い、全てのコンテンツの表現を管理し、以下全てのTwitterクライアントで利用できるよう、詳細な設定をする必要がある。twitter.comとmobile.twitter.comiPhone用Twitter公式アプリAndroid用Twitter公式アプリ各プラットフォームの性能により、プレイヤーカードは各クライアントで異なる働きを見せるので、カードを設定する前に詳細を知っておく必要がある。以下が、それぞれのプラットフォームでどのように動くかの違いである。Twitter.com上の場合、ツイートをプロフィールページ(タイムライン)上でクリックしたり、「概要を表示」をクリックしたり、ツイートのパーマリンクページを開いた時に、iframeページは表示される。iframeが435ピクセル以上の場合は、iframeプレイヤーは435ピクセル以内に収まるように、オリジナルのアスペクト比を保ちながらサイズが変更される。Twitterのネイティブアプリ(iPhone用またはAndroid用Twitter)用の場合、イメージプレビューがビデオの場所に表示され、以下の優先順位で、いずれかにリンクされる。mobile.twitter.com(Twitter社のモバイルクライアント)上では、イメージプレビューがビデオの場所に表示され、以下の優先順位で、下記のリンクへと飛ばされる。他のクライアントでは、ユーザーのツイートのURLへ飛ばされ、クライアントのデフォルトブラウザでサイトが開かれる。全てのプレイヤーカードは、Twitterから、特別なホワイトリスティング(信頼できるURLであるという確認)を受けたのち、承認される必要がある。testingプレイヤーカードは、少なくとも5つのコンテキストでテストする必要がある。我々は下のツイートにそれらの要項をまとめた。backするよう、HTMLページにリンクさせる。やってはいけない事:ブラウザの警告が出るようなコンテンツを入れること。全てのTwitterクライアントはhttpsを使うので、ブラウザのロックを破壊してはいけない。コンテンツの自動再生あなたのページにサインインしないといけないコンテンツプレイヤー内に、他のネットワークのシェア機能を混合させること“Twitter:player”を.swfの動画ファイルに指定することプレイヤーカードは以下のプロパティで定義づけることができる。以下が、プレイヤーカードのhtml例である。URLが再生されるfootbar.comのプレイヤーカードの一例である。approval.(プレイヤーカードが承認されるためにチェックしておくこと)以下が、プレイヤーカードの提出をチェックしている際に最もよく見つかる問題である。crawlingTwitterのクローラはURLをスキャンしている際、robots.txt重要視する。カードマークアップ付きのページがブロックされている場合、カードは表示されない。イメージURLがブロックされている場合も、サムネイル又はフォトは表示されない。ファイルに例外を作成する事ができるTwitterbotのユーザーエージェントを利用する。以下が、Twitterのfetcher以外へのクローリングを拒否しているrobots.txtの例である。/以下が、どのディレクトリがTwitterbotからクロールされてもいいかを明示している例である。Graphあなたはきっと、Twitterカードのタグは、オープングラフのタグに似ていることに気が付くだろう。これはオープングラフプロトコルと同じ規定を使用しているからだ。ページ上で、オープングラフを利用してデータを説明している場合は、タグやデータを複製せずに簡単にTwitterカードで作る事ができる。Twitterカードプロセッサーがあなたのページのタグを探す時、まず最初にTwitterプロパティをチェックし、もしない場合はサポートされているオープングラフのプロパティを探すようになっている。これにより、それぞれがページ上で独立して定義づけられ、あなたのコンテンツや体験を説明するマークアップの複製を最小に抑える事ができる。オープングラフは”og”の接頭辞をという形で明示する必要があるが、Twitterカードのマークアップにはそういったものや”twitter”接頭辞は必要ない。オープングラフは、マークアップのプロパティやコンテンツの帰属を()と明示する必要もあるが、Twitterカードは名前と種類を明示するだけである。backするので、すでにページ上にオープングラフが存在する場合は、既存のオープングラフのマークアップを変更する必要はない。Twitterとオープングラフのタグを合わせてSummaryカードで使う例が以下である。backの動きである。Tags(Twitterカードタグのまとめ)以上、『Twitterカードの公式開発者向けドキュメントの日本語訳』でした。皆さんのサイトでも実装して見て下さい。具体的なやり方(特にWordPress向けの実装)の流れについては、このブログで改めてご紹介します。今週にはアップしたいと思いますので少しお待ち下さい。Attribution(ウェブサイト帰属):ウェブサイトやコンテンツが公開されたプラットフォームに帰属するTwitterアカウントを指す。ウェブサイト内の異なるセクションやページ向けに、別々のツイッターアカウントがある場合もあり、最も適切なツイッターアカウントがユーザーに提供されなければいけない。Entertainmentセクションの記事は“@NYTArts”の帰属にしている。Attribution(クリエイター帰属):カードに表示されているコンテンツがクリエイターに帰属している場合を指す。twitter:siteと同じだが、代わりにウェブサイトのツイッターのユーザーIDを使用する。@usernameは変える事はできるが、ユーザーIDは変わらない。twitter:creatorと同じだが、TwitterのユーザーIDを示す。1つのTweet内のディスクリプションとして、ページのコンテンツが簡潔かつ適切に説明されているもの。タイトルの文章を再利用ではいけない。サイトの一般的なサービスについても語らない方がいい。この説明は200文字以内でなければならない。ページのコンテンツを象徴するユニークな画像のURLをここに設定する。ウェブサイトのロゴや著者の写真、またはページ内に沢山存在する汎用的な画像は使うべきではない。120×120ピクセル以上の画像は、長さを元に正方形に削られる。60×60ピクセル以下の画像は表示されない。値は”photo”と設定されていなければならない。カードに表示されるコンテントのタイトル。タイトルを付けたくない場合は空白にしておける。厳密な横幅をピクセルで入力することにより、サイズ変更の際により正確にオリジナルの比率を保つことができる。厳密な高さをピクセルで入力することにより、サイズ変更の際により正確にオリジナルの比率を保つことができる。必須ではない1.”twitter:player:stream”で設定されているURL。ユーザーがイメージプレビューをタップした時に、URLのメディアストリームを読み込み、アプリ内で再生する。設定する場合は、MPEG-4コンテナフォーマット(MP4形式)で提供されなければならない。以下のコードで音声と動画を合わせる事ができる。Webブラウザに警告を与えるようなコンテンツと一緒にしてはいけない。iframe又はインラインのプレイヤーをサポートしていないプラットフォームで、プレイヤーの場所で表示されるイメージ。イメージはプレイヤーと同じ大きさにしなければならない。68,000ピクセル以下(262×262正方形イメージ、又は350×196、16:9の画像)の画像を利用した場合、プレイヤーは実行されない。Twitterのモバイルアプリ上で直接再生されるRAWストリームのURL。コンテナフォーマットでなければいけない。コンテナは以下の音声と動画のコーデックを混ぜる事ができる。“twitter:player:stream”内に含まれているコンテンツを、MIMEで表示するタイプ。6381で指定されているフォームを取る。(MP4用MIMEタイプ登録)である。“twitter:player:stream”が定義付けられている場合は必須1.httpsロックが壊れている場合。ビデオは例外なくhttpsを通して提供されている事を確認する。2.コンテンツは必ず停止または一時停止のコントロールが出来ないといけない。backしないといけない。embed、など)4.コンテンツは自動再生されてはいけない。5.コンテンツは第三者のネットワークにシェアできる機能を付けてはいけない(現時点ではこの機能はサポート外)6.コンテンツはサインインを要してはいけない。7.コンテンツは全体的に広告であってはいけない。8.プレイヤーのURLは直接.swfに指定してはいけない9.プレイヤーのz-indexが、コンテンツがページのヘッダーに重なる原因にならないように設定する。10.もしブラウザが不安定なアセットを表示したいかを聞いてきた場合は、httpsに問題がある。11.イメージは最少で68600ピクセル(262×262正方形イメージ、又は350×196、16:9の画像)以上にする。12.プレイヤーURLはhttpsではない。「IGTV」ボタン消滅。「IGTV」ボタン消滅。11のソーシャルメディア最新動向データまとめ<遂に公開>SEOの2倍のアクセスを稼ぐFacebook「OGP」と「いいね!」ボタンの活用術。Twitterのアカウント凍結の原因と解除方法は?Facebook・Twitter・Instagramの違いと使いわけ方まとめ!特徴からユーザー動向・運用方法まで徹底解説Instagram投稿に最適な画像サイズとは?ストーリーも画像も、長方形をそのまま投稿できる!【2018年最新版】企業がFacebookページを作成する時に押さえておきたい10の手順ホーム>全ての記事一覧>Twitter>『Twitterカード』を設定してサイトへの質の良い流入を増やそう!1万6742文字に渡る開発者向けドキュメントの日本語訳まとめ。