初代編集長ブログ―安田英久

Twitter上でWebページを魅力的にみせるTwitterカードの登録手順

英語がわからなくてもTwitterカードを表示したいサイトをTwitterに登録するステップ

安田英久（Web担編集統括） 2014/4/15 12:00 Web担当者／仕事 | 解説／ノウハウ

今日は、御社のWebページのURLがTwitter上で書き込まれたときに、画像やサマリが表示され、より魅力的に見えるようにする「Twitter Cards（ツイッター・カード）」の登録手順を解説します。英語がわからなくても、このとおりにやればOKです。

Twitter上で、こんな表示を見たことはないでしょうか。

ツイートの下の［開く］がなどになっていて、クリックすると上記のような表示になるのです。これが「Twitter Cards」と呼ばれる仕組みです。

昔は一部のサイトでしか使えなかったのですが、今は設定して登録すればどんなサイトでも利用できるようです。

設定手順は以前にこのコラムで紹介していますでそちらをご覧いただくとして、

Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順（OGP済みなら10分でOK）

そのうち「Twitterカードを表示したいサイトをTwitterに登録」の部分が少し変わっているので、そこを解説します。

「ネットショップ担当者フォーラム」というサイトを立ち上げたのですが、その際にTwitterカードを登録しようとしたら、以前よりも手順が楽になっていたので、改めて解説です。

Twitterカードを表示したいサイトをTwitterに登録

Twitterに登録する部分は英語のページですが、次のようにすればOKです。全体の流れとしては、Twitterカードのタグがちゃんと埋め込まれていることをTwitter側のシステムで確認してから申請というようになっています。

Twitter Cardsのページにアクセスする
→ https://dev.twitter.com/docs/cards/validation/validator
Twitterアカウントでのログインを求められますので、ログインしてください。
ChromeやSafariを使っていれば、プレビューも確認できますので、Chromeでのアクセスをお勧めします。
カードのタイプを選ぶ
まずは、カード用タグの確認の手順です。
カードのタイプが表示されますので、クリックして選びます。よくわからなければ、「Summary」をクリックします。
確認と申請のタブに切り替える
「Card Validator」のページが表示されますので、左側のタブを［Validate & Apply］に切り替えます。
カードを表示したいページのURLを指定
登録したいサイトのなかで、カード用のタグがすでに入っているURLを入力します。
トップページにはカード用のタグが入ってなかったりするので、タグが入っていることがわかっている単体ページのURLを指定してください。タグの確認のためなので、URLを1つ入れればOKです。
プレビューを確認
［Go!］ボタンをクリックすると、指定されたURLにTwitterのシステムがアクセスして、カード用のタグを読み取ります。
タグが正しく埋め込まれていれば、URLの下に［Request Approval］というボタンが表示されます。また、ChromeやSafariを使っていれば、右側にプレビューが表示されます。
タグに問題がない場合の表示
タグが正しく埋め込まれていない場合は、次のような表示になりますので、HTMLに正しくタグが入っているか確認して修正し、改めてチェックしましょう。
タグに問題がある場合の表示
カード表示を申請
タグに問題がなければ、［Request Approval］ボタンをクリックします。
ここからが、申請の手順です。
ボタンをクリックすると、Webサイトに対するカード適用申請のフォームが表示されます。英語ですが、各項目を次のように入力し、下にある［Request Approval］ボタンをクリックします。
申請完了
これだけです。申請が受け付けられた旨が表示されます。
登録完了はメールで通知
完了画面では「数週間かかる場合も」とありましたが、いまは数分でメールが届くようです。
登録が受け付けられたら、登録したサイトのURLをツイートしてみましょう。ツイートの下になどが表示され、クリックするとカードが表示されるはずです。