すぐにできるTwitter Cards設定

Twitter Cardsの設定の手順です。Twitter Cardsの出始めの頃、面倒そうだなぁと思っていたのですが、やってみると簡単で、しかもOGPをすでに指定している人は5分ほどで設定が完了してしまいます。

Twitter Cardsとは

Twitter Cardsは、URLを含んだツイートをするとツイート内に、そのサイトのタイトルや概要やサムネイル画像などを表示させるための仕組みです。

Webサイトのhead要素に必要なプロパティをmeta要素で追加する必要があります。どのようなプロパティがあるかは下記のリファレンスを参照してください。
Cards Markup Tag Reference

Twitter Cardsの設定

Twitter Cardsの設定ですが、「Twitter Developers」のトップに行き、下記図で記した箇所(validate your meta tags)にアクセスします。

ページ遷移するとSummaryProductPhotoなどのカードの種類を選ぶ必要があります。サイトの種類にマッチしたものを選びます。

カードの種類について詳しくは下記のサイトに詳しくありますので、そちらを参照ください。
Twitterカード

Metaタグの指定

Card Validatorに移動すると下記図のように必要情報を入力するフォームがあります。

そこにサイトの情報を入力していき、「Update Preview」というボタンを押すと右側に表示されているコードサンプルが入力したものに更新されますので、それをサイトにコピペすればよいのですが、ここで注意。

OGP + Twitter Cards

現在、多くのサイトでOGPを指定していると思いますが、OGPでtitleurldescriptionimageを設定している人はTwitter CardsのMetaタグの指定は下記のたった2行をhead要素内に追加するだけです。そのためフォームに必要情報を入力してどうのこうのする必要はありません。


<head>
・・・
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@Twitterアカウント">
・・・
</head>

Twitter Cardsの申請

Twitter Cardsを利用するためには、申請をしなければなりません。このことがTwitter Cardsを利用することを躊躇っていました。面倒くさそう印象がありましたがやってみると面倒なフローもなくすぐに終わりました。

申請するためには、Card Validatorのページにある「Validate & Apply」のタブをクリックします。

「Enter URL to validate」と書かれている入力フォームにURLを入力します。

エラーがでなければ「Request Approval」というボタンが表示されますので、そのボタンをクリックします。

「Request Approval」ボタンを押すと「Request Domain Approval」というフォームが表示されます。

フォームが表示されたときからすでにいくつかの項目が入力されていると思いますが、赤色のアスタリスクのある項目は必須項目で、下記の2項目の入力が必要になります。

  • Website Description
  • Website Twitter Username

「Website Description」はサイトのmeta descriptionに書かれている内容で良いでしょう。「Website Twitter Username」はTwitterアカウントで良いと思います。

必要事項の入力を終えたら、下記図にあるような「Request Approval」と書かれた青いボタンを押すと申請完了です。

数分するとTwitterから「Your Twitter card is ready!」というタイトルのメールが来ますので、メール到着後にURL付きのものをツィートするとツィート内に「概要を表示」というリンクが付きますので、それをクリックすると下記図のような感じで、タイトル、詳細、サムネイル等がツィート内に表示されます。

おわりに

上述していますが、すでにOGPを指定していると申請まですぐに終えることができます。TwitterアナリティクスにTwitterカードの項目がありますので、どういったアクションがあったのか確認できますので、Twitter Cardsを指定してみるのも良いかもしれません。