株式会社コプロシステム

お問い合わせ

2014年5月 1日

OGP設定がしてあれば10分で設定完了!ツイートをより魅力的にしてくれる「Twitterカード」の設定方法

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステムWebデザイングループのディレクターの石川です。
大荒れの天気になりそうでしたが、晴れ間が見えてきたGW、いかがお過ごしですか?

遅ればせながら、弊社コーポレートサイトにも「Twitterカード」の設定をしましたので、今回の記事ではその設定方法をわかりやすく解説します。
これから設定する方は、是非参考にしてみてください。:)

Twitterカードとは?

URLリンクが含まれたツイートについて、ページのタイトル/サマリー文章/サムネイル画像などそのページの詳細情報をリッチに表示してくれるTwitterの機能のことを「Twitterカード」といいます。

下のようなツイートを見たことがありませんか?

2012年6月からスタートした機能で、ご存じの方・すでに導入している方も多いと思います。
ただのテキストより、サムネイル画像が入ったり、詳細情報が事前に見える方がページへの誘導率が上がりそうということは容易に想像できますよね。
ユーザーとのエンゲージメント促進にもつながるとTwitterは言っています。

Twitterカードのタイプは全部で7種類

スタート当初Twitterカードの種類は3種類でしたが、今では7種類に増えていて、用途によって適切な種類を選ぶことができます。
ニュース記事やブログ記事などは、「Summary Card」か「Summary Card with Large Image」が一番相性が良さそうです。

設定のステップは大きく分けて2つ:「①:ページへのタグ設置」と「②:Twitterへの申請・承認」

FacebookやGoogle+は、ページにOGP設定のタグを設置すればSNS本体への申請なんかは不要なのですが、Twitterカードは、Twitterに対して「このサイトでTwitterカードを使いたいですよ」と申請、承認を得ることが必要なのです。





今回は、最も幅広く使われている「Summary Card」で解説していきます。

  • ※選択するカード種類によって設置するタグが変わります。その他種類の詳細や、各設定方法についてはTwitterカードの開発者向けページをご確認ください。
  • ※この情報は、2014年5月1日現在の情報です。

設定に入る前の事前準備

さっそく設定に入りましょー!...と、その前にちょっと待ってください。
以下の情報を事前に用意しておくと、5分~10分くらいでスムーズに設定を完了できます。

  • サイト管理者ご自身のTwitterアカウント情報
  • 設定するサイトのTwitterアカウント情報
  • OGP設定

今度こそスタートです。
準備はいいですか?

設定のステップ①:ページへのタグ設置

①-1:Twitterカードの開発者向けページへ移動

まずは、Twitterカードの開発者向けページへ移動して、「Summary Card」をクリックします。


①-2:各metaプロパティを確認

Summary Cardページで少しスクロールすると、設置するタグを確認できます。

OGP設定がしてあれば、新規に追加するmetaプロパティは「twitter:card」の1つだけですね。

<meta name="twitter:card" content="summary">

①-3:head部分にタグを設置

ページのhead部分に、必要なタグを設置します。


以上で、ページへのタグ設置は完了です。たったこれだけ!速い!

設定のステップ②:Twitterへの申請・承認

②-1:Twitterカードの申請システムにログインする

Twitterカードの申請システムへ移動して、Twitterアカウントでログインします。


②-2:Twitterカードの種類を選択

設置したいTwitterカードの種類を選択します。


②-3:「Validate & Apply」をクリック


②-4:申請したいサイトのURLを入力してバリデート(検証)

申請したいサイトのURLを入力し、「Go!」をクリックします。

すると、ローディング画面に変化します。


②-5:ミスがないかどうかや、プレビューを確認

Twitterのシステムがサイトをクローリングしにいき、検証してくれます。
まだ承認前&設置状況に問題がなければ、タグリストが黄色に、
まだ承認前&設置状況に問題があれば、タグリストが赤色に、
すでに承認済みの場合は、タグリストが緑色になります。

合わせて、Twitterカードがどのように表示されるかプレビューで確認できるので確認し、問題がなければ「Request Approval」をクリック。申請をスタートします。


②-6:申請に必要な項目を入力

モーダルウィンドウが立ち上がるので、必要項目を入力していきます。


②-7:申請完了

「できるだけ早くあなたの申請を確認するけど、長いと数週間かかる場合もあります。あなたの申請に対する検討が終わったら、申請した時の管理者のEメールアドレスにメールします。」といったような内容が書いてある完了画面が表示されます。


②-8:メールを確認

「長いと数週間」とか書いてあったので、うへーほんとですかー(;´д`)と思ってたら、数分でメールが返ってきました。:)

「同じサイト内でも別の種類のTwitterカードを使いたい場合は再度申請が必要ですよ」といった内容も書かれていました。


以上で、設定のステップはすべて完了です!
さっそくツイートしてみましょう!と言いたいところなのですが...。

でも、すぐに表示がされない場合があるんです...

上記方法で設定を行いさっそくテストツイートしてみたところ、Twitterカードが反映されるページ/反映されないページとで分かれたり、反映に時間がかかる場合があることが判りました。

Twitterサイドのことなので、気長に待つのもひとつの手段です。

ただ、状況によっては「すぐに反映してほしい!」という場合もありますよね。
そういう時は、上記ステップ②-4「URLを入力してバリデートする」で行ったように、すぐに反映してほしいURLをバリデートすると、Twitterが検証するためにそのページをクローリングするからか、早く反映されました。

まとめ

  • Twitterカードは全7種類。
    「Summary Card」か「Summary Card with Large Image」が幅広く使われている。
  • 選択するカード種類によって設置するタグが変わるので、要注意。
  • 設定のステップは大きく分けて2つ。
    「①:ページへのタグ設置」と「②:Twitterへの申請」で、どちらも設定しないと機能しない。
  • Twitterアカウント情報やOGP設定など、あらかじめ事前準備をしておくとスムーズに終わる。
  • 同じサイト内でも別の種類のTwitterカードを使いたい場合は再度申請が必要。
  • Twitterカードが反映されるページ/反映されないページとで分かれたり、反映に時間がかかる場合がある。
  • 上記ステップ②-4「URLを入力からのバリデート」で、Twitterがページをクローリングしてくれるため(?)、早く反映された。
  • 一度反映されると過去のツイートにも反映されるが、それでも反映されない場合もある。
  • 反映されるのを気長に待つのもひとつの手段。



いかがでしたでしょうか?
ご参考になれば幸いです。:)

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「How to do」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP