Clik here to view.
今日は、御社のWebページのURLがTwitter上で書き込まれたときに、画像やサマリが表示され、より魅力的に見えるようにする「Twitter Cards（ツイッター・カード）」の登録手順を解説します。英語がわからなくても、このとおりにやればOKです。
Twitter上で、こんな表示を見たことはないでしょうか。
Clik here to view.
ツイートの下の［開く］がImage may be NSFW.
Clik here to view.
などになっていて、クリックすると上記のような表示になるのです。これが「Twitter Cards」と呼ばれる仕組みです。
昔は一部のサイトでしか使えなかったのですが、今は設定して登録すればどんなサイトでも利用できるようです。
設定手順は以前にこのコラムで紹介していますでそちらをご覧いただくとして、
そのうち「Twitterカードを表示したいサイトをTwitterに登録」の部分が少し変わっているので、そこを解説します。
「ネットショップ担当者フォーラム」というサイトを立ち上げたのですが、その際にTwitterカードを登録しようとしたら、以前よりも手順が楽になっていたので、改めて解説です。
Twitterカードを表示したいサイトをTwitterに登録
Twitterに登録する部分は英語のページですが、次のようにすればOKです。全体の流れとしては、Twitterカードのタグがちゃんと埋め込まれていることをTwitter側のシステムで確認してから申請というようになっています。
Twitter Cardsのページにアクセスする
→ https://dev.twitter.com/docs/cards/validation/validator
Twitterアカウントでのログインを求められますので、ログインしてください。
ChromeやSafariを使っていれば、プレビューも確認できますので、Chromeでのアクセスをお勧めします。
カードのタイプを選ぶ
まずは、カード用タグの確認の手順です。
カードのタイプが表示されますので、クリックして選びます。よくわからなければ、「Summary」をクリックします。
Image may be NSFW.
Clik here to view.
確認と申請のタブに切り替える
「Card Validator」のページが表示されますので、左側のタブを［Validate & Apply］に切り替えます。
Image may be NSFW.
Clik here to view.カードを表示したいページのURLを指定
登録したいサイトのなかで、カード用のタグがすでに入っているURLを入力します。
Image may be NSFW.
Clik here to view.トップページにはカード用のタグが入ってなかったりするので、タグが入っていることがわかっている単体ページのURLを指定してください。タグの確認のためなので、URLを1つ入れればOKです。
プレビューを確認
［Go!］ボタンをクリックすると、指定されたURLにTwitterのシステムがアクセスして、カード用のタグを読み取ります。
タグが正しく埋め込まれていれば、URLの下に［Request Approval］というボタンが表示されます。また、ChromeやSafariを使っていれば、右側にプレビューが表示されます。
Image may be NSFW.
Clik here to view.タグに問題がない場合の表示タグが正しく埋め込まれていない場合は、次のような表示になりますので、HTMLに正しくタグが入っているか確認して修正し、改めてチェックしましょう。
Image may be NSFW.
Clik here to view.タグに問題がある場合の表示カード表示を申請
タグに問題がなければ、［Request Approval］ボタンをクリックします。
ここからが、申請の手順です。
ボタンをクリックすると、Webサイトに対するカード適用申請のフォームが表示されます。英語ですが、各項目を次のように入力し、下にある［Request Approval］ボタンをクリックします。
Image may be NSFW.
Clik here to view.![]()
申請完了
これだけです。申請が受け付けられた旨が表示されます。
Image may be NSFW.
Clik here to view.![]()
登録完了はメールで通知
完了画面では「数週間かかる場合も」とありましたが、いまは数分でメールが届くようです。
Image may be NSFW.
Clik here to view.![]()
登録が受け付けられたら、登録したサイトのURLをツイートしてみましょう。ツイートの下にImage may be NSFW.
Clik here to view.![]()
などが表示され、クリックするとカードが表示されるはずです。
登録はカードのタイプごとに行う必要がありますので、「製品情報」「写真」「サマリと大きな画像」「動画・音声プレイヤー」「アプリ」「ギャラリー」などの他のタイプのカードを表示したい場合は、それぞれ適切なタグをHTMLで出すようにしたうえで、カードのタイプごとに上記の手順を繰り返してください。
Clik here to view.
安田 英久（やすだ・ひでひさ）
株式会社インプレスビジネスメディア
Web担当者Forum 編集長
プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、現在Webサイト 「Web担当者Forum」編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開してい る。
個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模 索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。
- 内容カテゴリ：Web担当者／仕事
- コーナー：編集長ブログ―安田英久
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：Twitter上でWebページを魅力的にみせるTwitterカードの登録手順 [編集長ブログ―安田英久] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.