記事内に商品プロモーションが含まれる場合があります
今回はTwitterカード（ツイッターカード）の使い方と設定方法をまとめて解説します。「Twitterカードって何？」というところから解説するので、ご存じの方はサクッと読み飛ばしてください。上手く設定すれば、記事拡散時のクリック率がグッと上がるはずです。
1. Twitterカードとは？
Twitterカードとは、ツイートに貼り付けられた記事へのリンクを魅力的に見せる機能のことです。具体的にはツイートの中に「アイキャッチ画像」や「記事のタイトル」などが表示されるようになります。
設定なしだと…
こちらはTwitterカードの設定をしていない場合です。記事へのリンクは文字だけで表示されます。
設定ありだと…
一方で、Twitterカードを設定していると、アイキャッチ画像やタイトルなどのページ情報が決まった形で自動表示されるようになります。
言うまでもなくカードが表示されている方がクリックしたくなりますよね。
4種類から好きな形を指定できる
Twitterカードには合計で4種類の形があります。のちほど説明する指定により、どれを使うかを自由に決めることができます。
もともとは7種類あったのですが、2015年7月から一般的に使えるのは4種類だけになりました。
| 種類 | 表示 |
|---|---|
| (1)Summary Card | |
| (2)Summary Card with Large Image |
|
| (3)App Cardアプリ配布用 | |
| (4)Player Card動画サイト用 | |
この中の(3)(4)は、それぞれアプリ配布用と動画サイト用です。そのため、通常のブログやウェブサイトであれば(1)か(2)のどちらかを選ぶことになります。
Twitterカードの効果
Itworksの実験結果によると、クリック率はカード設定前と後で、1.6% ⇒ 3%へと向上したそうです。さらにサイト滞在時間は伸び、直帰率が低下するという効果まであったとのこと。
クリック率の向上は頷けます。設定していないと、目が引かれないだけでなく、リンクがクリックしづらいのですよね。
Twitterでの記事拡散を重視しているのであれば、間違いなく設定をしておいた方が良いでしょう。
画像とカード、両方載せることはできない
ただし、Twitterカードは設定が上手く出来ていても、画像や動画を投稿した場合には表示されません。
画像を投稿した場合には、このように通常のテキストと投稿画像だけが表示されるようになります。
2. カード種類はどちらを選ぶべき？
では、ブログやウェブメディアの場合、「Summary Card」と「Summary with Large Image」のどちらを選ぶべきでしょうか（AppとPlayer Cardを使用する必要のあるサイトはほとんどないと思われるので除外します）。
明確な答えはなく画像次第
海外サイトまで含めて調べてみましたが、ケースバイケースのことが多いようです。サルワカでも両方使っていますが、クリック率は記事次第という印象です。重要なのは、カード種類とサムネイル画像がマッチしていることだと思います。
サルワカでは普段は「with Large Image」を指定していますが、以前「Summary Card」に設定した記事がかなりバズったこともあります。
「力尽きたときでも作れるレシピ」をひたすら追加していく新ページを開設しました。残りのHPを選択してレシピを探すことができます。
— サルワカくん (@saruwakakun) May 21, 2017
力尽きたときのためのレシピ 〜超簡単に作れるズボラ飯〜 https://t.co/pUmBIe51kU
アイキャッチ画像が長方形でかつインパクトがあるのであれば「with Large Image」を使うべきでしょう。一方で、画像が大きく表示される分、タイトルには目が行きづらくなるのではないかと思います。また、画像の質が悪ければ、クリック率は下がることは言うまでもありません。
アイキャッチ画像以上に、タイトルまでしっかりと読んでほしいのであれば、小さめの「Summary Card」を使うべきでしょう。
3. Twitterカードの使い方
次にTwitterカードの設定方法を紹介します。方法はシンプルでheadタグ内に以下のコードを追加するだけです。
<meta name="twitter:card" content="カード種類" /> <!--①-->
<meta name="twitter:site" content="@ユーザー名" /> <!--②-->
<meta property="og:url" content="記事のURL" /> <!--③-->
<meta property="og:title" content="記事のタイトル" /> <!--④-->
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--⑤-->
<meta property="og:image" content="画像のURL" /> <!--⑥-->
赤い文字の部分に、記事ごと（orサイトごと）のカードの情報を入れることになります。番号を振ったので、順番に解説していきます。
①カード種類を指定
<meta name="twitter:card" content="カード種類" />
例：<meta name="twitter:card" content="summary_large_image">
カード種類には、summaryかsummary_large_imageを入れます。後者が大きなサムネイルが表示される方ですね。
②Twitterのユーザー名を指定
<meta name="twitter:site" content="@ユーザー名" />
例：<meta name="twitter:site" content="@saruwakakun" />
Twitterアカウントのユーザー名を@に続けて入力するだけです。ここは記事に関わらず共通ですね。
③〜⑥は他のSNSと共通のコード
<meta property="og:url" content="記事のURL" /> <!--③-->
<meta property="og:title" content="記事のタイトル" /> <!--④-->
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--⑤-->
<meta property="og:image" content="画像のURL" /> <!--⑥-->
↓ 例
<meta property="og:url" content="https://saruwakakun.com/best" />
<meta property="og:title" content="サルワカの殿堂入り記事集" />
<meta property="og:description" content="これまで公開してきた200以上の記事の中で、特に人気のあったものを紹介します。" />
<meta property="og:image" content="https://saruwakakun.com/images/example.png" />
③〜⑥の<meta property="og:~というようなコードは、facebookなどの他のSNSで拡散されるときにも共通して使われるコードです。すでにブログに設定済みのことも多いのではないかと思います。⑤のディスクリプションには文字制限はありませんが、超えた分は切り捨てられます（どの端末or環境から見るかによって表示される文字数が異なります）。
上記の6つのタグを各記事のheadタグ内に置くわけですが、いちいち記事ごとに設定するのは面倒です。後ほどブログサービス別に、自動設定する方法を紹介します。
設定ができたらCard Validatorでチェック
Card Validatorという公式ページからTwitterカードが「うまく設定できているか」と「どんな表示になるか」をチェックすることができます。
使い方は簡単で①記事のURLを入力し、②［Preview card］をクリックするだけ。
すると「この記事をツイートするとこんな風に表示されるよ」とカードのプレビューが表示されます。
自動反映には少し時間がかかる
その記事がはじめてTwitter上で拡散されたときには、ややカードが表示されるまでに時間がかかることがあります（ちゃんと設定ができていれば、しばらくすると表示されるようになります）。もしいち早く表示させたいときにはCard ValidatorでURLを入力してプレビューすれば、すぐに反映されます。
カード情報を更新する
カード情報（画像やタイトル）はTwitter全体で保存されます。そのため、記事公開後に内容を変えても、カードにはなかなか反映されません。いち早く反映させたい場合には、さきほど同様にCard ValidatorでURLを入力します。これにより内容が更新されます。
詳しくは下の記事をご覧ください。
4.【ブログ別】Twitterカードの設定方法
ここからブログサービス別に、カード情報を各記事に自動設定する方法を紹介します。
はてなブログの場合
方法を表示するTwitterとの連携設定さえしていれば、自動でカードは表示されるようになります。自分でコードを追加する必要はありません。
連携ははてなブログの設定画面の［外部サービス連携］から行います。
詳しくは「はてなブログ開発ブログ」をご覧くださいませ。
Livedoorブログの場合
方法を表示するライブドアブログの場合も設定は簡単です。手順は「Twitterカードの設定方法：ライブドアブログ公式ブログ」をご覧ください。
アメブロの場合
方法を表示する一番左上の「ブログ管理トップ」をクリック
↓
「設定・管理」をクリック
↓
「プラグインの追加」をクリック
↓
「フリープラグイン」をクリック
↓
コードを貼付け<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Twitterユーザー名"> <meta name="twitter:title" content="<?php if (is_front_page()) { bloginfo('name');} else { wp_title('');}?>"> <meta name="twitter:description" content="<?php echo $_description;?>"> <meta name="twitter:image:src" content="<?php echo $_thumbnail;?>"> <meta name="twitter:domain" content="ブログのURL">
上記手順はおもち日記さんの記事で詳しく解説されています。なお、"summary"を"summary_large_image"に書き換えれば、サムネイル画像が大きいタイプのカードが表示されます。
FC2ブログの場合
方法を表示する少しだけ複雑です。ただ、「FC2ブログでTwitterカードに表示-Ukar」で分かりやすく手順が解説されているので参考にしてみてください。
WordPressの場合
方法を表示する使用しているテーマによっては既にTwitterカード用のコードが表示されている可能性があります。そこでブラウザで記事ページを開き、コードをチェックしてみましょう。
Chromeであれば、上のメニューの［表示］［開発/管理］［ソースを表示］からページのコードを確認できます。
さきほど説明した<meta name="twitter:card" content="summary">
などのコードがheadタグ内に見当たらない場合には、以下の手順で設定を行いましょう。
パターン1：twitter以外のOGPタグは設定済みの場合
ページのコードを見たときに以下の「①②のタグは無いけど、③〜⑥のタグはある」という場合にはとてもカンタンです（③〜⑥は他のSNSでも共通のタグでしたね）。
<meta name="twitter:card" content="~" /> <!--①-->
<meta name="twitter:site" content="~" /> <!--②-->
<meta property="og:url" content="~" /> <!--③-->
<meta property="og:title" content="~" /> <!--④-->
<meta property="og:description" content="~" /> <!--⑤-->
<meta property="og:image" content="~" /> <!--⑥-->
この場合、headタグのどこかに以下のコードだけを貼り付ければ設定は完了です（おそらくheader.phpにheadタグは書かれているはずです）。
<meta name="twitter:card" content="summary" /> <!--①-->
<meta name="twitter:site" content="@Twitterユーザー名" /> <!--②-->
大きなサムネイル画像が表示されるカードにしたい場合は、"summary"を"summary_large_image"に書き換えましょう。
パターン2：All in One SEO Packを使っている場合
もし①〜⑥のタグどれもが見当たらない場合には一から設定を行う必要があります。とはいえ「All in One SEO Pack」というプラグインを使っているのであればTwitterカードの設定は簡単です。具体的な手順は下の記事が参考になるのではないかと思います。
パターン3：プラグインを使わずに設定
もし①〜⑥のタグどれもが見当たらず「All in One SEO Pack」も利用していない場合には、せっかくなのでFacebookの設定を合わせて行うのが良いかと思います。FacebookもOGP設定というものを行っておくと、記事がシェアされたときにアイキャッチ画像が表示されたりして華やかに見えるのです。
詳しい手順は少し長くなりそうなので別記事にまとめました。
その他のブログ
- Tumblr：何も設定しなくても記事をシェアするとカードが表示される
- LINEブログ：同じく設定しなくても対応済
- Blogger：設定が必要。こちらが参考になります
5. Twitterカードが表示されないときの対処法
まずはCard Validatorでチェック
うまく表示されないときは、まずさきほど説明したようにCard Validatorでチェックしてみましょう。もしかすると反映に時間がかかっているだけかもしれないので。
もし「No metatags found」などと表示されるのであれば、必要なタグが記入されていないのが原因です。
次にコードをチェック
次に実際にheadタグ内の設定コードを1つずつ見ていきましょう。
Chromeであれば、上のメニューの［表示］［開発/管理］［ソースを表示］からページのコードを確認できます。
必要なタグは書かれているか
さきほど解説した①〜⑥のタグが全て見当たるかチェックしましょう。どれかが欠けていると表示されません。
ディスクリプションは記入されているか
ディスクリプション（og:description）やタイトル（og:title）が空欄になっていると、Twitterカードは表示されません。もし、ツイート後に気づいた場合には、記事のメタディスクリプションを記入した後に、こちらの手順で更新を反映させるようにしましょう。
画像は1MB以下になっているか
指定する画像容量は1MB以下にする必要があります。また、逆に画像が小さすぎると表示されないことがあるようです。
Twitterの設定は問題ないか
Twitterの［設定とプライバシー］［プライバシーとセキュリティ］の中の「ツイートする画像/動画を不適切な内容を含むものとして設定する」にチェックが入っていると、ツイートした記事のカードの画像までうまく表示されないことがあるようです。
チェックが入っていた場合には、外した上で保存し、再ツイートしてみましょう。
