Twitterカードの種類を調べてみる

Twitterカードで設定できる種類について調べてみました。

Twitterカードの種類

Twitterカードは以前は7種類ありましたが、現在は4種類に変更になっているようです。

Summary Card

Summary Cardは正方形の画像と概要のテキストを表示できて、汎用的に利用できます。
以下が設定のサンプルになります。

HTML

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:title" content="桜の写真" />
<meta name="twitter:description" content="桜の咲いた街並みの写真です。" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/determine-the-type-of-twitter-card/img1.jpg" />

Summary Cardのデモページ
実際にtweetしてみると、以下のように表示できました。

ほかの設定項目については公式のリファレンスでご確認ください。
　

Summary Card with Large Image

Summary Card with Large Imageは内容的にはSummary Cardと同じですが、画像をより大きく見せることができます。

HTML

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:title" content="海の写真" />
<meta name="twitter:description" content="海がきれいな写真です。" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/determine-the-type-of-twitter-card/img2.jpg" />

Summary Card with Large Imageのデモページ
実際にtweetしてみると、以下のように表示できました。

ほかの設定項目については公式のリファレンスでご確認ください。
　

App Card

App Cardは主にスマートフォンのTwitterアプリ向けで、アプリの情報やインストールを促すボタンなどを表示することができます。

HTML

<meta name="twitter:card" content="app" />
<meta name="twitter:site" content="@pripri_game" />
<meta name="twitter:app:country" content="JP" />
<meta name="twitter:app:name:iphone" content="プリンセス・プリンシパル GAME OF MISSION" />
<meta name="twitter:app:id:iphone" content="1207817746" />
<meta name="twitter:app:name:ipad" content="プリンセス・プリンシパル GAME OF MISSION" />
<meta name="twitter:app:id:ipad" content="1207817746" />
<meta name="twitter:app:name:googleplay" content="プリンセス・プリンシパル GAME OF MISSION" />
<meta name="twitter:app:id:googleplay" content="jp.co.showgate.pp" />

App Cardのデモページ
実際にtweetしてみると、PCでは以下のように表示できました。

Summary Cardと似ていますが、下部に評価が表示されています。

スマートフォン(iOS)では以下のように、概要の下にインストールボタンが表示されます。

ほかの設定項目については公式のリファレンスでご確認ください。
　

Player Card

Player Cardはカード内に動画や音声などを読み込ませることができます。
このカードのみ他とは違い、事前にTwitterの審査が必要になりますので注意してください。

設定方法については公式でスターターキットが用意されているので、そちらがわかりやすいです。
tweetするページではhead内で以下のように設定します。

HTML

<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:title" content="Sample Player Card" />
<meta name="twitter:image" content="https://cly7796.github.io/tw-player/img.jpg" />
<meta name="twitter:player" content="https://cly7796.github.io/tw-player/" />
<meta name="twitter:player:width" content="640" />
<meta name="twitter:player:height" content="360" />

次にカード内に埋め込むHTMLを用意します。
https環境に設置する必要があるようなので、今回はgithubにページを用意して設置しました。
スターターキットに含まれているcontainer.htmlのほぼ流用で、このページのURLを上記のtwitter:playerに指定しています。

これでページの準備は完了なので、次にTwitterに申請を行います。
公式の検証ツールでOGPを設定したページを検証すると、「Not whitelisted」と表示されます。
これはまだ承認されていないということなので、左の「Request Approval」をクリックします。

フォームが表示されるので、申請内容を英語で入力します。

申請が完了すると、以下のような表示になります。
数時間～数日ほどで、メールで申請結果が届きます。

申請が通ると、検証ツールでもプレビューがきちんと表示されるようになります。
ドメインがホワイトリストに登録されたとあるので、初回審査をすれば次回以降は審査がいらないのかもしれません。

Player Cardのデモページ
実際にtweetしてみると、以下のように表示できました。

ブログのサンプル用として申請しても通ったので、埋め込みで何か不具合があるとかでなければ審査自体は難しくなさそうです。

ほかの設定項目については公式のリファレンスでご確認ください。
　

【参考サイト】

• Summary Card — Twitter Developers
• Summary Card with Large Image — Twitter Developers
• App Card — Twitter Developers
• Player Card — Twitter Developers