【ツイートした時にブログの概要などを表示させよう】自分のサイトをTwitterCards(ツイッターカード)に対応する方法

これいいなぁ~・・・って前から思っていたんですが、attripさんのツイートってちょっと他と違うんですよね。

なんか、普通のツイートよりも情報がたくさん載ってる

attripさんのブログにあるツイートボタンからツイートしても、こうなる。情報多い

どうやら「Twitter Cards(ツイッターカード)」に対応しているらしいです。僕もやりたい!ということでやりました。

Twitter Cardsを使う

使うには申請をしないといけないようです。ですが、すぐに利用申請っていう手順とはいかないようで、まずは「https://dev.twitter.com/cards」をクリックします。流れは以下のように書いてあります。英文ですね。

  1. Choose a card type! Try them out or read more about them.
  2. Found one? Then add the required meta tags to your page.
  3. To apply for the card you want, validate your meta tags.

将来的に何度も使いそうな内容なので、以下になんとなく和訳して手順を書きました。

1.表示したいカードタイプを選ぶ

https://dev.twitter.com/docs/cards/validation/validator」をクリックします。下の画面が出てきます。

ここで、Twitter Cardsとして表示させたいカードタイプを選びましょう。例えば、画像を前面にアピールしたいようなツイートをしたい場合は、画像が大きく表示される「Photo」などがいいのでしょうかね。ここは、お好みですね。僕は、いろんな要素をちょっとずつ表示したいので「summary」を選びました。

2.タグを追加する

「summary」のカードタイプに必要なmetaタグを「<head>~</head>」内に入れます。僕の場合ですと、このブログ「https://www.imamura.biz/blog/」ですね。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@s56bouya">
<meta name="twitter:domain" content="www.imamura.biz">
<meta name="twitter:creator" content="@s56bouya">
<meta name="twitter:title" content="ブログのタイトルなど">
<meta name="twitter:description" content="ブログの概要など">
<meta name="twitter:image" content="表示させたい画像など">

表示させたいカードタイプによって、入れるmetaタグは若干違います。こちら「https://dev.twitter.com/docs/cards」で他のカードタイプについても確認できます。

3.テストする

こちら「https://dev.twitter.com/docs/cards/validation/validator」をクリックします。タブを「Validate & Apply」に切り替えて、テストしたいURLを入力します。「Go!」をクリックしてテスト開始しましょう。

下のようにテスト結果が出ました。特に問題なさそうです。

https://dev.twitter.com/docs/cards」に掲載されているmetaタグのサンプルなどを参考にして、必要なものや間違っているものなどがある場合は追加したり、修正します。(Mobile App Integrationはオプションなので、お好みでOK)

4.申請する

上記の表示は「テスト」なので、テスト結果の画面から「Twitter Cards」の利用申請をします。「Request Approval」をクリックします。

だいたいTwitterアカウントのログイン情報をもとに、あらかじめ入力されています。必須項目の入力内容を確認して、「Request Approval」をクリックします。

申請をすると下のように表示されます。利用できるようになったらメールで連絡するから、数週間待ってくれ!と書いてあると思います。

待つのか・・・と思ったら、すぐにメールが来ました。下のような感じで、使えますよと教えてくれました。

それでは早速使います。

サンプル

ブログに設置しているツイートボタンから、この記事をツイートしました。「【Google+の新機能「Content recommendations」を使ってモバイルサイトにおすすめコンテンツを表示】WordPressに入れました

すると、左下に「概要を表示」と出てきました。クリックします。

Twitter Cardsが表示されてる!OKOK

申請前は、こういうの出なかったですよね。これで「Twitter Cards」に対応できました。

いいですね~

これは、いろんなツイートの中でもちょっと目立つな~と思いました。140文字以内で表現できることって限られているので「+概要」が入っていると、「なんかおもしろそう。ちょっと見てみよう。」みたいに思ったことが過去何度かありました。ですので、例えばツイートで自分のブログの更新情報などを発信される方にとっては、「Twitter Cards」を導入することで、見てもらえる機会も増えるかも・・・しれないですね。

面白いので、ぜひともお試しください~。

追記:WordPressプラグインならもっと簡単に導入できるよ!

attripさんに教えてもらった~。こっちも簡単でいいかも。

ブログをTwitterに最適化。Twitter Cards 登録方法 wordpressなら簡単に設定できるよ!

著者:bouya Imamura

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

お名前,メールアドレスが仮のものですとコメントが反映されない場合があります

最近の投稿が物足りない方は

最新記事の隣にアイキャッチ(サムネイル)を簡単につけられるWordPressプラグインをWordPress.orgで無料で配布中です。画像は人の目につきやすいですね。導入方法は、専用ページをご参考ください。 プラグイン専用ページ
※バージョン1.3.1より、PHP5.3以上で動作するように変更しました。動かない!という方は専用ページで解決方法をご案内しています。

PICKUP!