サイトのトップへ戻る

Twitter 開発者 ドキュメント日本語訳

サイト内検索

入門ガイド

  1. カードを使ってみよう
  2. カードとコンテンツ属性
  3. URL のクロールとキャッシュ
  4. カードの表示
  5. ツイート内の複数 URL
  6. Twitter カードとオープングラフ


カードを使ってみよう

カードのマークアップを実装するには、以下のHTMLをページのヘッダセクションに追加してカードタイプを指定してください。:

<meta name="twitter:card" content="summary" />

カードプロパティは単純なキーと値の組み合わせで、上記のようにそれぞれTwitter独自のメタタグで定義されています。 このプロパティの組み合わせによって、Twitterにおけるカードの振る舞いが全て決まります。 各カードにはサポートしている特定のプロパティを設定する必要があります。 1ページにつき1つのカードタイプのみサポートされます。 全てのカードは共通して一つの基本プロパティを持っており、それがカードタイプの値となります:

カードプロパティ 説明
twitter:card カードタイプ。“summary”, “summary_large_image”, “photo”, “gallery”, “product”, “app”, “player”のうちどれか一つを設定します。


カードとコンテンツ属性

各カードはコンテンツ属性を持っており、これを設定することでコンテンツに適切なTwitter アカウントを紐付けられます。 カードを閲覧したユーザーは、属性に設定されたアカウントのプロフィールをカードから直接フォローしたり、見たりできます。 属性には以下の二つがあります:

ウェブサイト属性: そのコンテンツが公開されているウェブサイトやプラットフォームを管理するユーザーのTwitter アカウントを表します。 ウェブサービスではサイトの異なるページ/セクションごとにTwitter アカウントを分けることができるので、ユーザーに分かりやすいようにコンテンツごとに最も適切なTwitter アカウントを使用するよう注意してください。 例えば nytimes.comではトップページ記事のウェブサイト属性には “@nytimes”を設定し、 アートやエンターテインメント項目の記事には“@NYTArts”を設定しています。

作成者属性: カード内のコンテンツを作成した人物を表します。この属性は、 画像付きサマリーカード・フォトカード・プロダクトカード・ギャラリーカードを使用する場合に適用されます:

以下のプロパティを使ってカードの属性を設定します:

カードプロパティ 必須プロパティか否か

twitter:site

ウェブサイトの管理者を表す@username 。カードのフッタに使用される。
Yes

twitter:creator

コンテンツの作成者/著者を表す@username 。
No


URL のクロールとキャッシュ

Twitterのクローラーは、URLをスキャンする際にrobots.txtに設定された内容を尊重しています。 カードのマークアップを使用しているページがrobots.txtでブロックされていた場合、カードは表示されません。画像URLがブロックされていた場合、サムネイルや写真は表示されません。

Twitterは User-Agentの値に (Twitterbot/1.0のようなバージョン情報の付いた)Twitterbotを使用しており、この情報を基にしてrobots.txtファイルで例外を作成することができます。

例えば、Twitterのクローラーロボット以外の全てのクローラーを拒否する robots.txtの設定は以下のようになります。:

User-agent: Twitterbot
Disallow: 

User-agent: *
Disallow: /

以下は別のやり方での例です。Twitterbot によってクロールできるディレクトリを指定しています。 (この場合では、imagesデイレクトリと archives ディレクトリを除く全てのディレクトリを拒否しています):

User-agent: Twitterbot
Disallow: *

Allow: /images
Allow: /archives

あなたのサーバの robots.txt ファイルはASCII 文字エンコードの平文で保存 しなければなりません。 ASCII 文字エンコードの平文になっているかを確認するには、以下のコマンドを実行します:

$ file -I robots.txt
robots.txt: text/plain; charset=us-ascii

カードマークアップを使用されたページへのリンクがツイート上で公開されると、あなたのコンテンツはTwitter によって7日間キャッシュされます。

ツイートが正しく表示されない問題が発生した場合は、 カードのトラブルシューティングガイドを参照してください。



カードの表示

Twitter カードは開発者が付けたメタタグから生成され、ウェブやモバイル端末上でツイートがタイムライン上で展開されたり、ツイートの個別パーマネントリンクページが閲覧された場合にのみ表示されます(タイムライン上、ウェブ上、モバイル端末上でツイートの日付の部分をクリックすると表示されます)。

Twitterに投稿された画像、広告形式、Twitterの動作実験、といった特定の条件では、タイムライン上にカードが表示されることがあります。

メディア(写真や動画やカード)をタイムライン上に表示したい場合は、以下オプションのうちどれか一つの使用を検討してください:

  • アカウントではタイムラインのトップにツイートを固定し、ツイートを自動的に展開してカードを表示することができます。(これはウェブ上でのみ可能です。).
  • 写真のアニメGIFについては、ツイートに直接メディアをアップロードするか、Twitter API upload mediaの使用をご検討ください。
  • 動画広告については、我々の動画コンテンツの管理ソリューションがどのようなものか Twitter Amplify で確認してください。
  • ユーザーが作成した動画については、 動画を作成してタイムライン上に投稿できるVineの使用を検討してください。
  • コールトゥアクション形式の広告については、Twitter AdsでLead Generationカード と Website カードについて確認してください。


ツイート内の複数 URL

場合によっては、複数のURLをツイートしたいユーザーもたくさんいることでしょう。以下が、カードを処理する場合にTwitterが複数のURLをどのように処理するかの処理順序です。:

  1. pic.twitter.com と vine.com のカードは他のドメインより優先的に処理されます
  2. URL は、古いものから新しいものの順でツイート内に表示されるよう処理されます。

もう少し詳しく背景を説明すると、this order was requested from early partners who requested to use pic.twitter.com to show rich images and also allow linking to richer, on-brand content. 我々は今後もこの機能を維持して行きますが、場合によっては将来変更されることもありえます。



Twitter カードとオープングラフ

Twitter カードタグはオープングラフタグに似ていると気づいたかもしれません。これは Twitter カードタグがオープングラフプロトコルと同じ規約を基にしているためです。 既にページのデータ記述にオープングラフプロトコルを使用している場合は、タグとデータを再度記述しなくても簡単にTwitter カードを生成できます。 Twitter カードの処理機構があなたのページでタグを精査する際に、まず最初にTwitter プロパティを確認し、それが見つからなかった場合は,サポートしているオープングラフプロパティを使用します。これによりTwitter カードタグのページとオープングラフタグのページを別々に定義でき、マークアップの重複を最小限にすることができます。

オープングラフでは<html prefix="og: http://ogp.me/ns#">を使って “og” RDFa Core 1.1 CURIE prefix mappingを指定することを推奨していますが、 Twitter カードではそのようなマークアップは使用せずにHTML メタ要素のname 属性で頭に“twitter:” を付けるので注意してください。 またオープングラフプロトコルではマークアップに property属性とcontent属性を使って設定を行いますが (<meta property="og:image" content="http://example.com/ogp.jpg"/>)、Twitter カードでは name属性と content属性を使用します。 Twitterのマークアップ解析機構では、namecontentが見つからなかった場合はpropertycontentの使用に切り替えるので、 既にページ上でオープングラフプロトコルを記述している場合には、既存のオープングラフプロトコルのマークアップを変更する必要はありません。

以下の例ではTwitterタグとオープングラフタグを組み合わせて使用してサマリーカードを定義しています:

<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" />



エンジェル戦記