Quantcast
Channel: Web担当者Forum
Viewing all articles
Browse latest Browse all 19485

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

$
0
0
この記事を読むのにかかる時間: 約 2.5

今日は、御社の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担 編集長) の写真

安田 英久(やすだ・ひでひさ)

株式会社インプレスビジネスメディア
Web担当者Forum 編集長

プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、現在Webサイト 「Web担当者Forum」編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開してい る。

個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模 索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。

この記事に関連する他の記事を見る

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事:Twitter上でWebページを魅力的にみせるTwitterカードの登録手順 [編集長ブログ―安田英久] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.


Viewing all articles
Browse latest Browse all 19485

Trending Articles