利用開始ガイド
カードの利用開始
カードのマークアップの実装を始めるには、ページのHEADセクションに次のHTMLマークアップを追加して、コンテンツのカードの種類を指定します。
<meta name="twitter:card" content="summary"></meta>
カードのプロパティは単純なキーと値のペアで、それぞれ上のようなHTMLメタタグで定義されます。プロパティを組み合わせたコレクションによって、Twitterでの全体的なカードエクスペリエンスが定義されます。カードタイプごとに、対応し必要な特定のプロパティセットが決まっています。
すべてのカードに共通の基本プロパティが1つあります。次のカードタイプ値です。
| カードのプロパティ | 説明 |
twitter:card |
カードタイプは、“summary”、“summary_large_image”、“app”、“player”のいずれかになります。 |
ページごとにカードタイプを1つだけ設定できます。ページに複数のtwitter:card値が存在する場合は、「最後に」来る値が優先されます。
カードとコンテンツアトリビューション
各カードには、組み込みのコンテンツアトリビューションがあり、指定に従って、コンテンツに適切なTwitterアカウントが表示されます。ユーザーは、カードから直接、アトリビューション対象のアカウントのプロフィールをフォローして表示できます。アトリビューションには次の2種類があります。
ウェブサイトアトリビューション: コンテンツが公開されたウェブサイトまたはプラットフォームのTwitterアカウントを示します。サービスによっては、ウェブサイトのページやセクションごとに別々のTwitterアカウントを設定する場合があります。ユーザーに最適なコンテキストを提供するには、最も適切なTwitterアカウントを使用する必要があります。たとえば、nytimes.comであれば、ウェブページのフロントページ記事のアトリビューションを「@nytimes」に、アート&エンターテインメントセクションの記事の場合は「@NYTArts」に設定できます。
作成者アトリビューション: カード内のコンテンツを作成した個々のユーザーを示します。これは、大型画像を含む概要カードに適用されます。
次のプロパティを使用してカードアトリビューションを設定します。
| カードのプロパティ | 説明 | 必須 |
twitter:site |
カードフッターで使用されるウェブサイトの@ユーザー名。 | いいえ |
twitter:creator |
コンテンツ作成者/著者の@ユーザー名。 | いいえ |
URLクロールとキャッシュ
Twitterのクローラは、Googleのrobots.txt仕様に準拠して、URLをスキャンします。カードマークアップのあるページがブロックされると、カードは表示されません。画像のURLがブロックされると、サムネイルや写真は表示されません。
TwitterはTwitterbotのUser-Agentを使用します（Twitterbot/1.0のようにバージョンを付けて）。これを使用すると、robots.txtファイルに例外を作成できます。
たとえば、次のrobots.txtは、Twitterのフェッチャーを除くすべてのロボットのクロールを禁止します。
User-agent: Twitterbot Disallow: User-agent: * Disallow: /
次の例では、Twitterbotによるクロールを許可するディレクトリを指定します（ここでは、imagesディレクトリとarchiveディレクトリを除くすべてのディレクトリを許可しない設定になっています）。
User-agent: Twitterbot Disallow: * Allow: /images Allow: /archives
サーバーのrobots.txtファイルは、ASCII文字エンコードのプレーンテキストとして保存する必要があります。これを確認するには、次のコマンドを実行します。
$ file -I robots.txt robots.txt: text/plain; charset=us-ascii
コンテンツは、カードマークアップのあるページへのリンクがツイートで公開された後、Twitterによって7日間キャッシュされます。
ツイートのカードが正しく表示されない問題が発生した場合は、「カードのトラブルシューティングガイド」を参照してください。
カード表示
メタタグから生成されるTwitterカードは、ツイートがタイムラインで展開される（ウェブ上）か、ツイートの個々の固定リンクページで表示される（ウェブかモバイルでタイムラインの日付をクリック）場合にのみ表示されます。
また、Twitterに投稿された画像、広告形式、Twitterで実行するテストなどの限られた状況で、カードがタイムラインに表示されることがあります。
メディア（写真、動画、カード）をタイムラインに取り入れる場合は、次のいずれかの方法を検討してください。
- アカウントでは、ツイートをタイムラインの最上部に固定することができます。この場合、ツイートは自動的に展開され、カードが表示されます（これはウェブでのみ可能です）。
- 写真やアニメーションGIFの場合は、ツイートでメディアを直接アップロードするか、Twitter APIを使用してメディアをアップロードできます。
- アクション誘導付きの広告形式については、ウェブサイトカードのTwitter広告を参照してください。
ツイート内の複数URL
状況によっては、複数のURLのツイートが必要になる場合があります。ツイートに表示されるカードは1枚のみです。複数URLの処理における優先順位は次のとおりです。
- ツイートに添付された画像やメディアは、URLに添付されているすべてのカードよりも優先されます。
- カードを含むURLは、ツイート内での出現順に処理されます。
TwitterカードとOpen Graph
TwitterのカードタグはOpen Graphのタグと似ており、Open Graphのプロトコルと同じ規則に基づいています。Open Graphプロトコルを使用してページのデータを記述すると、タグやデータを複製することなくTwitterカードを簡単に生成できます。Twitterカードプロセッサがページのタグを探す場合、最初にTwitter固有のプロパティがチェックされ、存在しない場合は、サポートされているOpen Graphのプロパティにフォールバックします。そのため、両方を独立してページで定義することができるとともに、コンテンツやエクスペリエンスを記述するために必要なマークアップの重複を最小限に抑えることができます。
Open Graphは<html prefix="og: http://ogp.me/ns#">を介して“og” RDFa Core 1.1 CURIEプレフィックスマッピングを指定することを推奨していますが、Twitterカードや、HTMLメタ要素のname属性のtwitter:プレフィックスでの使用には、そのようなマークアップは必要ありません。また、Open Graphプロトコルでは、マークアップ（<meta property="og:image" content="http://example.com/ogp.jpg"/>）にpropertyとcontentの属性の使用を指定しますが、Twitterカードではnameとcontentが使用されます。Twitterのパーサーはpropertyとcontentの使用にフォールバックするため、既存のOpen Graphプロトコルのマークアップが存在する場合は、そのマークアップを変更する必要はありません。
次の例では、TwitterとOpen Graphのタグを組み合わせて、概要カードを定義します。
<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" />