Twitterカードの導入方法を解説！

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

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

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

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日に廃止されています

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

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

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

設定ができたらCard Validatorでチェック

Card Validatorという公式ページからTwitterカードが「うまく設定できているか」と「どんな表示になるか」をチェックすることができます。

Card Validator

Twitter公式のサービスです。
使い方は簡単で①記事のURLを入力し、②［Preview card］をクリックするだけ。

すると「この記事をツイートするとこんな風に表示されるよ」とカードのプレビューが表示されます。

自動反映には少し時間がかかる

その記事がはじめてTwitter上で拡散されたときには、ややカードが表示されるまでに時間がかかることがあります（ちゃんと設定ができていれば、しばらくすると表示されるようになります）。もしいち早く表示させたいときにはCard ValidatorでURLを入力してプレビューすれば、すぐに反映されます。

カード情報を更新する

カード情報（画像やタイトル）はTwitter全体で保存されます。そのため、記事公開後に内容を変えても、カードにはなかなか反映されません。いち早く反映させたい場合には、さきほど同様にCard ValidatorでURLを入力します。これにより内容が更新されます。

Twitterカードが表示されないときの対処法

Card Validatorでチェックしてみましょう。もしかすると反映に時間がかかっているだけかもしれないので。
もし「No metatags found」などと表示されるのであれば、必要なタグが記入されていないのが原因です。
もし「No metatags found」などと表示されるのであれば、必要なタグが記入されていないのが原因です。
次にコードをチェック
次に実際にheadタグ内の設定コードを1つずつ見ていきましょう。

Chromeであれば、上のメニューの［表示］［開発/管理］［ソースを表示］からページのコードを確認できます。

必要なタグは書かれているか

さきほど解説した①〜⑥のタグが全て見当たるかチェックしましょう。どれかが欠けていると表示されません。

ディスクリプションは記入されているか

ディスクリプション（og:description）やタイトル（og:title）が空欄になっていると、Twitterカードは表示されません。もし、ツイート後に気づいた場合には、記事のメタディスクリプションを記入した後に、こちらの手順で更新を反映させるようにしましょう。

画像は1MB以下になっているか

指定する画像容量は1MB以下にする必要があります。また、逆に画像が小さすぎると表示されないことがあるようです。

Twitterの設定は問題ないか

Twitterの［設定とプライバシー］［プライバシーとセキュリティ］の中の「ツイートする画像/動画を不適切な内容を含むものとして設定する」にチェックが入っていると、ツイートした記事のカードの画像までうまく表示されないことがあるようです。

チェックが入っていた場合には、外した上で保存し、再ツイートしてみましょう。

Twitterカードを設定してエンゲージメント率を上げよう

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