編集長ブログ―安田英久
Twitter上でWebページを魅力的にみせるTwitterカードの登録手順

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

今日は、御社の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で出すようにしたうえで、カードのタイプごとに上記の手順を繰り返してください。

tweet115このエントリーをはてなブックマークに追加
日本赤十字社 東日本大震災 義援金募集
Web担メルマガでラクラク情報ライフを
注目記事が毎週手もとに届いて見逃さない
要チェックのセミナー情報もゲットできる
編集長コラムを一足先に読める
―― 10万人が読んでいる、Web担必読メルマガです

今日の用語

キーワード密度
1つのWebページ中で同じキーワードがどれくらいの割合で出現しているかを示すもの ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスHP Softwareトランスコスモス株式会社株式会社ハイパーボックスDomain Keeperアドビ システムズ 株式会社
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社SitecoreYahoo!プロモーション広告Oracle