サイト制作に関するメモ書き

HOME > その他 > Twitterカードの種類を調べてみる

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="http://cly7796.net/wp/sample/determine-the-type-of-twitter-card/img1.jpg" />

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

twitter:card Twitterカードの種類を指定。
必須項目で、Summary Cardを使用する場合はsummaryにする。
twitter:site カード内容の所有者のTwitter ID。
twitter:title コンテンツタイトルを指定。
必須項目。
twitter:description コンテンツの概要を指定。
必須項目。
twitter:image ページコンテンツを表す画像URLを指定。

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

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="http://cly7796.net/wp/sample/determine-the-type-of-twitter-card/img2.jpg" />

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

twitter:card Twitterカードの種類を指定。
必須項目で、Summary Card with Large Imageを使用する場合はsummary_large_imageにする。
twitter:site カード内容の所有者のTwitter ID。
twitter:title コンテンツタイトルを指定。
必須項目。
twitter:description コンテンツの概要を指定。
必須項目。
twitter:image ページコンテンツを表す画像URLを指定。

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

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)では以下のように、概要の下にインストールボタンが表示されます。

twitter:card Twitterカードの種類を指定。
必須項目で、App Cardを使用する場合はappにする。
twitter:site カード内容の所有者のTwitter ID。
必須項目で、App Cardの場合はアプリのアカウントを指定するようです。
twitter:app:country App Storeの国を2文字の国コードで指定。
デフォルトではアメリカのストアを検索するので、日本のストアの場合はJPを指定。
twitter:app:name:iphone iPhoneでのアプリ名。
twitter:app:id:iphone App StoreのアプリID。必須項目。
twitter:app:name:ipad iPadでのアプリ名。
twitter:app:id:ipad App StoreのアプリID。必須項目。
twitter:app:name:googleplay Google Playでのアプリ名。
twitter:app:id:googleplay Google PlayでのアプリID。必須項目。

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

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してみると、以下のように表示できました。

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

twitter:card Twitterカードの種類を指定。
必須項目で、Player Cardを使用する場合はplayerにする。
twitter:site カード内容の所有者のTwitter ID。
必須項目。
twitter:title コンテンツタイトルを指定。
必須項目。
twitter:image 動画や音声に対応していない場合の代替画像。
必須項目。
twitter:player iframeで読み込むページURL。
必須項目で、httpsの環境に設置する必要がある。
twitter:player:width プレーヤーの幅。
必須項目。
twitter:player:height プレーヤーの高さ。
必須項目。

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

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP