ウェブサイトにツイッターカード(Twitter Cards)を設定する

本日はウェブサイトにツイッターカード(Twitter Cards)を設定してみたいと思います。

ツイッターカードとは、ツイートしたときのつぶやきの下に表示される画像とかビデオリンクとかのことです。

こんな↓ヤツですね。

ツイッター・カードの表示例(ツイッター・カードに該当するところが赤枠で囲われている)

ウェブサイト上でこのツイッターカードの設定をしておくと、そのリンクを含むツイートがされたときに指定の文章や画像が一緒に表示されるようになります。

OGPとは別に設定できます(Twitter Cardsの記述が優先される)ので、ツイッターのオーディエンスが他の媒体と異なる場合に記事の紹介分を変更したり、表示する画像を変えたりすることができます。

ツイッターカードの設定方法

カードをウェブサイトに追加する方法はいたって簡単です。

基本的にはTwitter公式サイトを参照すれば良いのですが、備忘録も兼ねて以下に一通り書いてみたいと思います。

カードの種類を選択する

公式サイトの手順に従って(笑)、まずはカードの種類を選択します。

時点では、選べるカードは以下の7つ(実質5種類ですが理由は後述します)です。それぞれ強調するポイントが違うので、実装したいウェブページやサービスの特性によって選ぶのが良いかと思います。

  • Summaryカード
    もっとも一般的なカードです。リンク先のページタイトルや説明文、サムネイル画像、ツイッターのアカウント情報を含めることができます。

  • 大きな画像のSummaryカード
    基本的にSummaryカードと変わりませんが、画像がツイートの横幅いっぱいに表示されます。指定できる画像の大きさや容量はSummaryカードと同じです。

  • Photoカード
    こちらのカードはに廃止されました。恐らく選択自体は可能だと思いますが、指定しても上記「大きな画像のSummaryカード」として表示されるようです。

  • Galleryカード
    こちらのカードもPhotoカード同様、に廃止され、「大きな画像のSummaryカード」に統合されています。「ギャラリー」という名の通り、元々は複数画像を表示するために用いられていましたが、統合により一枚しか表示できなくなっているため、わざわざ指定する意味はないでしょう。

  • Appカード
    アプリ宣伝用のカードで、アプリの概要やダウンロードリンクを表示することができます。ユーザーのOSによって表示内容を変更することが可能です。例えば、iPadやiPhoneなどのiOS搭載機ではApp Storeの、Android端末ではGoogle Playのダウンロードページを指定することが可能です。ちなみにそれぞれのOSで提供されているTwitter公式アプリ内でも表示されます。

  • Playerカード
    音声(音楽)または映像メディアをツイート上で再生することができるカードです。ただ、実際に表示するためには事前審査が必要みたいですので、手間は掛かるかもしれません。

  • Productカード
    商品やサービスの表示に適したカードですが、こちらもに廃止されています。ただ、Summaryカードに統合されていますので、機能自体は生きています。

ウェブページにコードを記述する

表示したいカードが決まったら、次は表示用のタグをページに書いていきます。

ただ、特定のカードに決めたからといって、そのカードしか指定できない訳ではないです。ページの内容に応じて、適したカードを表示するよう設定していきましょう。

今回は基本中の基本であるSummaryカードを設定します。

実装方法は簡単で、ヘッダータグの中に下記のようなコードをほんの数行追加するだけです。各タグの詳細やここで記述されていない種類のタグについては、公式ページをご参照ください。


<meta name="twitter:card" content="summary" /><!-- カード種別の選択 -->
<meta name="twitter:site" content="@ツイッターのアカウント名" />
<meta name="twitter:title" content="ページの表題" />
<meta name="twitter:description" content="ページの簡潔な内容" />
<meta name="twitter:image" content="表示したい画像のURL" />
<meta name="twitter:url" content="ページのURL" />

すべてのページに上記のコードを記述しても良いのですが、WordPressなどであればヘッダーの中に書いておけば書き漏れがありません。その場合はTwitter Cardsの部分だけ別ファイルとして切り出して、ループ内でWordPress関数を呼び出していく感じになると思いますが、こちらについては後日OGPの記事を書きますので、その時にまとめて説明したいと思います。

表示確認を行う

ページにコードを記述したら、ちゃんと表示ができるか確認を行います。

実際に当該ページを含んだツイートをするという手もありますが、公式ページに検証用のツールが置いてあるので、こちらを利用しましょう。

公式ページの手順では、検証を行った後、承認を受けるようなことが書いてあるのですが、私は特にそのような手順を踏まなくても表示することができました。

ツイッター・カードのプレビュー画面

検証時に表示される「*.ドメイン名 is whitelisted for summary card」なるメッセージを見る限り、ドメインがブラックリストに登録されているような場合に手順が必要となるのではないかと思います。もしかしたらブログサービスとかオールドドメインとかを使っている場合は、他の人や以前利用していた人がやらかしちゃっているかもしれませんので、承認が必要となる可能性があります。今後、確認する機会がありましたら、別記事でアップしたいと思います。

手順は以上です。

これでつぶやきにカードが表示されるようになります。