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

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

まとめ

Twitter カードはページごとに設定できるため、 コンテンツ の内容によって上記の7種類を使い分けてみるのも良いでしょう。
テキスト の羅列だけよりも明らかに印象に残りやすいため、 エンゲージメント 率向上のためにもまだ実装されていない方は早急にとりかかることをオススメします。