Cardsもやっといた方が良いっぽい2014-08-25Webデザインレビューやり方を調べてもイマイチわかりづらかったので、ツイッターカードの設定方法とメリットを教えます。↑ちなみに、こちら、中南米にいる「ケツァール」という鳥です。手塚先生の『火の鳥』のモデルです。僕は、「バードウォッチング検定」の資格を取ってしまうほど野鳥が好きだったので、死ぬまでに一度見てみたいです。ツイッターにもOGP的なものがあるの?実はあります。今回の話は、FacebookのOGPをある程度理解していて、既に設定している人向けの内容です。この時点で何を言ってるのか分からない人は、この先読んでも面白くないと思います。Twitterカードを設定するメリット僕が思うに、今のところメリットは、2つほどあります。見た目がリッチになり、クリック率が上がるかも?Twitterの解析ができるようになるこの2つです。設定方法の前に、それぞれどんな感じか見ていきましょう。Cardsを設定しておくと、こんな感じで、リッチになります!下部に記事のタイトル、本文(説明)、画像、「Webで見る」ボタンが追加されてますよね!リンクをクリックする前に、どんなサイトかわかるので安心ですし、Googleの著者情報じゃないですけど、どことなく信頼感も得られると思います。amebaなど、大きなサイトは、設定しているところも多いです。Cardsを設定していないとできません。上記のリンクに飛んで、「さぁ始めよう」ボタンが無い人は、設定がうまくいってません。僕のアカウント、数がショボいので非常に恥ずかしいですが、こんな感じで全体のグラフや、ツイート毎のインプレッション、エンゲージメント数が見られます。インプレッション:ユーザにツイートを見られた回数。エンゲージメント:ユーザがツイートに対して反応した回数(RT、リプ、ふぁぼ、詳細クリック等)。自分のどういうツイートが、多く見られていて、どういうツイートが流されているのかわかるので、自分だけでなく、フォロワーのためにもなります。Cards設定方法お待たせしました。設定するサイトに行く前に、まずは、下準備です。-->以上のコードを入れておきましょう。アカウントの部分は自分のものに合わせて変えておいてください。Facebookで既にOGPを設定してあれば、下準備はこれだけです。次に、Twitterカードこちらのサイトに飛びます。Cardを選んでおきましょう(さっきの僕のもこれ)。Validatorという項目をクリックします。ログインを求められたら、ツイッタ―アカウントでログインしてください。再度、カードの種類を選ぶ画面が出てきます。下準備でもSummaryと記述したので、そのままで良いです。したら、ようやく作成画面です。Applyを選びます。ウィンドウに、設定したいサイトのURLを入れて、Go!OGP含む、下準備で入れた情報を読みこんでくれます。うまくいってない場合は、左部分の青信号が赤になるので、もう一度設定を見直してみてください。OGPでの設定が抜けていたり、他にも、例えばdescriptionが短すぎたりしても、怒られます。Approval」を押します。したら、またアカウントなどの情報を入れる画面が出てきます。メールアドレスも入力しておきます。Approval」を押して、ひとまず設定完了です。するとすぐ、Twitterから、「申請受け付けましたー」というメールが届きます。ったよー」というメールが届いたら成功です!早速リンクをシェアしてみましょう。おわりに非常にわかりづらいですが、一度やってしまえば、見た目もリッチになり、解析もできるので、かなり便利です。設定してる人、意外と少ないかな?という印象なので、是非やっておきましょう。先日、僕がデザインをリニューアルした、関口舞ブログでも、設定してます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。頼人(ライト)と申します。FANTASYロゴ風フリーフォントにグッと来た!(商用利用可)slackでチャンネルを削除。XDで「インタラクションが含まれていません」の警告が出て「開発者に共有」ができない邦ロックマニアが秋に聴きたくなる曲はこれだ気持ち悪い。POSTS社会人、恐いよー、なりたくないよー。