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

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

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

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

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

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

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

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

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

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

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

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

  1. Twitter Cardsのページにアクセスする

    https://dev.twitter.com/docs/cards/validation/validator

    Twitterアカウントでのログインを求められますので、ログインしてください。

    ChromeやSafariを使っていれば、プレビューも確認できますので、Chromeでのアクセスをお勧めします。

  2. カードのタイプを選ぶ

    まずは、カード用タグの確認の手順です。

    カードのタイプが表示されますので、クリックして選びます。よくわからなければ、「Summary」をクリックします。

  3. 確認と申請のタブに切り替える

    「Card Validator」のページが表示されますので、左側のタブを[Validate & Apply]に切り替えます。

  4. カードを表示したいページのURLを指定

    登録したいサイトのなかで、カード用のタグがすでに入っているURLを入力します。

    トップページにはカード用のタグが入ってなかったりするので、タグが入っていることがわかっている単体ページのURLを指定してください。タグの確認のためなので、URLを1つ入れればOKです。

  5. プレビューを確認

    [Go!]ボタンをクリックすると、指定されたURLにTwitterのシステムがアクセスして、カード用のタグを読み取ります。

    タグが正しく埋め込まれていれば、URLの下に[Request Approval]というボタンが表示されます。また、ChromeやSafariを使っていれば、右側にプレビューが表示されます。

    タグに問題がない場合の表示

    タグが正しく埋め込まれていない場合は、次のような表示になりますので、HTMLに正しくタグが入っているか確認して修正し、改めてチェックしましょう。

    タグに問題がある場合の表示
  6. カード表示を申請

    タグに問題がなければ、[Request Approval]ボタンをクリックします。

    ここからが、申請の手順です。

    ボタンをクリックすると、Webサイトに対するカード適用申請のフォームが表示されます。英語ですが、各項目を次のように入力し、下にある[Request Approval]ボタンをクリックします。

  7. 申請完了

    これだけです。申請が受け付けられた旨が表示されます。

  8. 登録完了はメールで通知

    完了画面では「数週間かかる場合も」とありましたが、いまは数分でメールが届くようです。

    登録が受け付けられたら、登録したサイトのURLをツイートしてみましょう。ツイートの下になどが表示され、クリックするとカードが表示されるはずです。

登録はカードのタイプごとに行う必要がありますので、「製品情報」「写真」「サマリと大きな画像」「動画・音声プレイヤー」「アプリ」「ギャラリー」などの他のタイプのカードを表示したい場合は、それぞれ適切なタグをHTMLで出すようにしたうえで、カードのタイプごとに上記の手順を繰り返してください。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]