Twitterのクリック率を上げるTwitterカードの導入方法

2016年5月27日

Twitter で企業アカウントを運用されている方は、「 Twitter カード」の設定は行われているでしょうか。
自社ホームページのコンテンツを紹介する時など、通常の投稿よりも目を引きやすい形式になるため、クリック率を高めることができます。
今回は、企業としてのアカウント運用するのであれば設定しておいた方が良い Twitter カードの設定方法を解説します。

Twitter カードとは？

Twitter カードとは、 Twitter 上でのOGP設定を指します。OGPとは、 Facebook や Twitter などのSNSで URL が投稿された際、自動的に URL のページ情報を表示する機能を指します。

参考：
FacebookのOGP設定方法＋参考記事6選

Twitter の場合、ツイートに URL が含まれている場合、その URL のサムネイル画像、、タイトル、meta description（紹介文）が自動的に表示されます。

Twitter カード未設定の状態。

Twitter カードが設定されている状態。ツイートに含まれる URL の概要が自動的に表示されます。

このように、通常のツイートよりも表示幅が広がり、リンク先の概要もひと目で把握できるので、ユーザーの関心を引いてリンクをクリックしてもらえる確率が高くなります。
自社ホームページへの誘導を1つの目標としている企業であれば確実に設定しておくべきです。

Twitter カードの設定方法

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

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

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

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

1.Summaryカード

URL の概要をまとめて表示してくれるタイプです。
最も一般的な表示形式で、ferretでも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に近いタイプのカードです。

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カード

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

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枚まで選択することができます。

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カード

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

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 カードです。サムネイル画像と説明文の他にも、価格や在庫数など、購入時に必要な情報が表示されるように設定することができます。

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