Twitterカードの設定方法

Twitterカードには表示形式が7種類存在します。設定を行う前に、自社にはどの形式が最適かを選びましょう。

設定する際は以下の手順を踏みます。（Playerカードのみ例外）

  • 1.設定したいカードのサンプルコードを自社ホームページに追加
  • 2.追加したページのURLをこちらに入力し、Twitterカード追加の申請を行う
  • 3.申請が承認されたら完了

承認後は該当ページをツイートして表示を確認しましょう。
設定は数十分もかからずに完了できます。

1.Summaryカード

URLの概要をまとめて表示してくれるタイプです。
最も一般的な表示形式で、ferretでもSummaryカードを採用しています。

Summaryカード
https://dev.twitter.com/ja/cards/types/summary

サンプルコード

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/photos/unicphoto/sets/72157645001703785/" />

2.Summary with Large Imageカード

Summaryカードの画像がより大きく表示される、形式的にはFacebookのOGPに近いタイプのカードです。

Summary with Large Imageカード
https://dev.twitter.com/ja/cards/types/summary-large-image

サンプルコード

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image:src" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

3.Photoカード

画像が優先して表示されるタイプです。画像をクリックするとツイート内容が表示されます。
ビジュアル訴求が重要な業種（アパレルや飲食店等）にオススメです。

Photoカードは2015年7月3日に廃止されています

Photoカード
https://dev.twitter.com/ja/cards/types/photo

メタタグ

<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Mountain sunset" />
<meta name="twitter:description" content="Explore Reza-Sina's photos on Flickr. Reza-Sina has uploaded 113 photos to Flickr." />
<meta name="twitter:image" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/photos/reza-sina/11858349453/" />

4.Galleryカード

一度の投稿で複数枚の画像を表示させることができるカードです。
表示させる画像は最大4枚まで選択することができます。

Galleryカードは2015年7月3日に廃止されています

Galleryカード
https://dev.twitter.com/ja/cards/types/gallery

メタタグ

<meta name="twitter:card" content="gallery" />
<meta name="twitter:site" content="@fodorstravel" />
<meta name="twitter:creator" content="@fodorstravel" />
<meta name="twitter:title" content="America's Best Small Towns">
<meta name="twitter:description" content="For the second year in a row, we've compiled a list that highlights some of the best places in the country you don't hear about every day.">
<meta name="twitter:url" content="http://www.fodors.com/news/photos/americas-best-small-towns" />
<meta name="twitter:image0" content="http://www.fodors.com/ee/files/slideshows/telluride-resized.jpg">   
<meta name="twitter:image1" content="http://www.fodors.com/ee/files/slideshows/shutterstock_18216130-resized.jpg">   
<meta name="twitter:image2" content="http://www.fodors.com/ee/files/slideshows/3-marfa-texas.jpg">   
<meta name="twitter:image3" content="http://www.fodors.com/ee/files/slideshows/4-paia-maui-hawaii.jpg">

5.Appカード

アプリを紹介する際に利用したいカードです。アプリケーションの名前や紹介文、アプリアイコンだけでなく、評価や価格なども表示されます。

Appカード
https://dev.twitter.com/ja/cards/types/app

メタタグ

<meta name="twitter:card" content="app">
<meta name="twitter:description" content="The perfect for grabbing a nearby taxi. Try it by downloading today.">
<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:iphone" content="Example App">
<meta name="twitter:app:id:iphone" content="306934135">
<meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:ipad" content="Example App">
<meta name="twitter:app:id:ipad" content="306934135">
<meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:googleplay" content="Example App">
<meta name="twitter:app:id:googleplay" content="com.example.app">
<meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef">

6.Playerカード

ツイートに動画を埋め込めるカードです。
Playerカードのみ設定方法が異なるので注意しましょう。
詳細はこちら

7.Productカード

製品紹介に最適化されたTwitterカードです。サムネイル画像と説明文の他にも、価格や在庫数など、購入時に必要な情報が表示されるように設定することができます。

Productカードは2015年7月3日に廃止されています

Productカード
https://dev.twitter.com/ja/cards/types/product

メタタグ

<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@iHeartRadio">
<meta name="twitter:creator" content="@iHeartRadio">
<meta name="twitter:domain" content="iheart.com">
<meta name="twitter:title" content="24/7 Beatles ? Celebrating 50 years of Beatlemania">
<meta name="twitter:image" content="http://radioedit.iheart.com/service/img/nop()/assets/images/05fbb21d-e5c6-4dfc-af2b-b1056e82a745.png">
<meta name="twitter:label1" content="Genre">
<meta name="twitter:data1" content="Classic Rock">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="National">